Add optional nuxt search backend (#100)

* Allow switching search backend in config

* Implement nuxt search backend

Author: rijkvanzanten

app/app.config.ts

@@ -1,13 +1,17 @@
 export default defineAppConfig({
+	search: {
+		backend: 'nuxt', // 'nuxt' | 'algolia',
+	},
+
 	ui: {
 		primary: 'purple', // Tailwind color name,
 
 		content: {
 			callout: {
 				// Fix background color of pre > code blocks
-				wrapper: '[&_pre>code]:!bg-transparent'
-			}
-		}
+				wrapper: '[&_pre>code]:!bg-transparent',
+			},
+		},
 	},
 
 	header: {

app/app.vue

@@ -9,6 +9,8 @@ provide('navigation', navigation);
 defineOgImage({
 	url: '/img/og-image.png',
 });
+
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false });
 </script>
 
 <template>
@@ -22,5 +24,14 @@ defineOgImage({
 		</UMain>
 
 		<DocsFooter />
+
+		<ClientOnly>
+			<LazyUContentSearch
+				ref="searchRef"
+				:files="files"
+				:navigation="navigation"
+				:fuse="{ resultLimit: 42 }"
+			/>
+		</ClientOnly>
 	</div>
 </template>

app/components/DocsHeader.vue

@@ -8,7 +8,7 @@ const oasSpec = inject<OpenAPIObject>('openapi', { openapi: '3.0', info: { title
 
 const { metaSymbol } = useShortcuts();
 
-const { header } = useAppConfig();
+const { header, search } = useAppConfig();
 const route = useRoute();
 
 const links = computed(() =>
@@ -45,7 +45,7 @@ const navigationTree = computed(() => {
 		</template>
 
 		<template #right>
-			<ClientOnly>
+			<ClientOnly v-if="search.backend === 'algolia'">
 				<UTooltip
 					text="Search"
 					:shortcuts="[metaSymbol, 'K']"
@@ -64,6 +64,15 @@ const navigationTree = computed(() => {
 				</UTooltip>
 			</ClientOnly>
 
+			<UTooltip
+				v-if="search.backend === 'nuxt'"
+				text="Search"
+				:shortcuts="[metaSymbol, 'K']"
+				:popper="{ strategy: 'absolute' }"
+			>
+				<UContentSearchButton :label="null" />
+			</UTooltip>
+
 			<UColorModeButton class="hidden lg:inline-flex" />
 
 			<UDivider

server/api/search.json.get.ts

@@ -0,0 +1,5 @@
+import { serverQueryContent } from '#content/server';
+
+export default eventHandler(async (event) => {
+	return serverQueryContent(event).where({ _type: 'markdown', navigation: { $ne: false } }).find();
+});