docs: migrate to nuxt compatibility 4

docs/app/app.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import { debounce } from 'perfect-debounce'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+// import { debounce } from 'perfect-debounce'
+import type { ContentSearchFile } from '#ui-pro/types'
 
-const searchRef = ref()
+const searchTerm = ref('')
 
 const route = useRoute()
-const colorMode = useColorMode()
+// const colorMode = useColorMode()
 // const { branch } = useContentSource()
+const runtimeConfig = useRuntimeConfig()
+const { integrity, api } = runtimeConfig.public.content
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
+const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
 
 // Computed
 
-const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
@@ -44,20 +46,20 @@ const links = computed(() => {
 
 // Watch
 
-watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
-  if (!query) {
-    return
-  }
+// watch(searchTerm, debounce((query: string) => {
+//   if (!query) {
+//     return
+//   }
 
-  useTrackEvent('Search', { props: { query: `${query} - ${searchRef.value?.commandPaletteRef.results.length} results` } })
-}, 500))
+//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
+// }, 500))
 
 // Head
 
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: 'theme-color', name: 'theme-color', content: color }
+    // { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
@@ -93,8 +95,6 @@ provide('files', files)
 
     <Footer v-if="!$route.path.startsWith('/examples')" />
 
-    <!-- <ClientOnly>
-      <LazyUContentSearch ref="searchRef" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
-    </ClientOnly> -->
+    <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>

docs/app/error.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ContentSearchFile } from '#ui-pro/types'
 
 useSeoMeta({
   title: 'Page not found',
@@ -12,25 +12,29 @@ defineProps<{
 }>()
 
 const route = useRoute()
-const colorMode = useColorMode()
+// const colorMode = useColorMode()
 // const { branch } = useContentSource()
+const runtimeConfig = useRuntimeConfig()
+const { integrity, api } = runtimeConfig.public.content
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
+const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
 
 // Computed
 
-const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 const links = computed(() => {
   return [{
     label: 'Docs',
     icon: 'i-heroicons-book-open',
     to: '/getting-started',
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
   }, ...(navigation.value.find(item => item._path === '/pro') ? [{
     label: 'Pro',
     icon: 'i-heroicons-square-3-stack-3d',
     to: '/pro',
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
   }, {
     label: 'Pricing',
     icon: 'i-heroicons-credit-card',
@@ -51,7 +55,7 @@ const links = computed(() => {
 useHead({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: 'theme-color', name: 'theme-color', content: color }
+    // { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }

docs/app/layouts/docs.vue

@@ -6,7 +6,7 @@
           <UPageAside>
             <!-- <BranchSelect /> -->
 
-            <!-- <UNavigationTree :links="mapContentNavigation(navigation)" /> -->
+            <UContentNavigation :navigation="navigation" />
           </UPageAside>
         </template>
 

docs/nuxt.config.ts

@@ -5,6 +5,13 @@ import pkg from '../package.json'
 const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
+  app: {
+    head: {
+      bodyAttrs: {
+        class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
+      }
+    }
+  },
   extends: [
     process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs') : process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
   ],
@@ -19,28 +26,31 @@ export default defineNuxtConfig({
     'nuxt-og-image',
     // 'modules/content-examples-code'
   ],
+  future: {
+    compatibilityVersion: 4
+  },
   runtimeConfig: {
     public: {
       version: pkg.version
     }
   },
-  ui: {
-    global: true
-  },
+  // ui: {
+  //   global: true
+  // },
   content: {
     sources: {
       pro: process.env.NUXT_UI_PRO_PATH ? {
         prefix: '/pro',
         driver: 'fs',
         base: resolve(process.env.NUXT_UI_PRO_PATH, 'docs/content/pro')
-      } : process.env.NUXT_GITHUB_TOKEN && {
+      } : process.env.NUXT_GITHUB_TOKEN ? {
         prefix: '/pro',
         driver: 'github',
         repo: 'nuxt/ui-pro',
         branch: 'dev',
         dir: 'docs/content/pro',
         token: process.env.NUXT_GITHUB_TOKEN || ''
-      }
+      } : undefined
     }
   },
   image: {
@@ -52,7 +62,6 @@ export default defineNuxtConfig({
         '/',
         '/getting-started',
         '/dev/getting-started',
-        '/api/search.json',
         '/api/releases.json',
         '/api/pulls.json'
       ],
@@ -63,26 +72,26 @@ export default defineNuxtConfig({
     '/components': { redirect: '/components/app', prerender: false },
     '/dev/components': { redirect: '/dev/components/app', prerender: false }
   },
-  componentMeta: {
-    exclude: [
-      // '@nuxt/content',
-      // '@nuxt/ui-templates',
-      // '@nuxtjs/color-mode',
-      // '@nuxtjs/mdc',
-      // 'nuxt/dist',
-      // 'nuxt-og-image',
-      // 'nuxt-site-config',
-      resolve('./components'),
-      // process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs', 'components') : '.c12'
-    ],
-    // metaFields: {
-    //   type: false,
-    //   props: true,
-    //   slots: true,
-    //   events: false,
-    //   exposed: false
-    // }
-  },
+  // componentMeta: {
+  //   exclude: [
+  //     // '@nuxt/content',
+  //     // '@nuxt/ui-templates',
+  //     // '@nuxtjs/color-mode',
+  //     // '@nuxtjs/mdc',
+  //     // 'nuxt/dist',
+  //     // 'nuxt-og-image',
+  //     // 'nuxt-site-config',
+  //     resolve('./components'),
+  //     // process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs', 'components') : '.c12'
+  //   ],
+  //   // metaFields: {
+  //   //   type: false,
+  //   //   props: true,
+  //   //   slots: true,
+  //   //   events: false,
+  //   //   exposed: false
+  //   // }
+  // },
   hooks: {
     // Related to https://github.com/nuxt/nuxt/pull/22558
     // 'components:extend': (components) => {
@@ -95,9 +104,6 @@ export default defineNuxtConfig({
     //   })
     // }
   },
-  typescript: {
-    strict: false
-  },
   vite: {
     optimizeDeps: {
       include: ['date-fns']

docs/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@nuxt/ui-docs",
   "private": true,
+  "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.1.21",
     "@iconify-json/simple-icons": "^1.1.105",
     "@iconify-json/vscode-icons": "^1.1.35",
-    "@nuxt/content": "^2.12.1",
+    "@nuxt/content": "npm:@nuxt/content-edge@2.12.1-28635002.f66778a",
     "@nuxt/fonts": "^0.7.0",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui": "latest",

docs/server/api/search.json.get.ts

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