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()
-})

pnpm-lock.yaml

@@ -135,8 +135,8 @@ importers:
         specifier: ^1.1.35
         version: 1.1.35
       '@nuxt/content':
-        specifier: ^2.12.1
-        version: 2.12.1(ioredis@5.4.1)(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))
+        specifier: npm:@nuxt/content-edge@2.12.1-28635002.f66778a
+        version: '@nuxt/content-edge@2.12.1-28635002.f66778a(ioredis@5.4.1)(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))'
       '@nuxt/fonts':
         specifier: ^0.7.0
         version: 0.7.0(encoding@0.1.13)(ioredis@5.4.1)(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))
@@ -1053,8 +1053,8 @@ packages:
     resolution: {integrity: sha512-y7efHHwghQfk28G2z3tlZ67pLG0XdfYbcVG26r7YIXALRsrVQcTq4/tdenSmdOrEsNahIYA/eh8aEVROWGFUDg==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  '@nuxt/content@2.12.1':
-    resolution: {integrity: sha512-xW4xjyYm6zqglb17Tu0J+rpKUV1PF9zp6SLu1lopylFnerdyImtce84206HT6Zd/DJgivKtoW4dyyJn0ZaSqCQ==}
+  '@nuxt/content-edge@2.12.1-28635002.f66778a':
+    resolution: {integrity: sha512-BvD3oVJwzkUiF2kXpHSHpDGftgpuR9qs79opcmDVK8UQmbNT+FSfTqTHI9BnLE13j9l6PXIVOt+dY3LQdgMoOw==}
 
   '@nuxt/devalue@2.0.2':
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
@@ -1171,8 +1171,8 @@ packages:
   '@nuxtjs/color-mode@3.4.1':
     resolution: {integrity: sha512-vZgJqDstxInGw3RGSWbLoCLXtU1mvh1LLeuEA/X3a++DYA4ifwSbNoiSiOyb9qZHFEwz1Xr99H71sXV4IhOaEg==}
 
-  '@nuxtjs/mdc@0.6.1':
-    resolution: {integrity: sha512-zS5QK7DZ/SBrjqQX1DOy7GnxKy+wbj2+LvooefOWmQqHfLTAqJLVIjuv/BmKnQWiRCq19+uysys3iY42EoY5/A==}
+  '@nuxtjs/mdc@0.7.1':
+    resolution: {integrity: sha512-RTKqrQEs7Lthc2r8dlEEvwWBCgtQpWfx8X+Ozd6in7OhXILAhHpqR737sj031gxFu3nujSOwG/wS63crN76czg==}
 
   '@nuxtjs/plausible@1.0.0':
     resolution: {integrity: sha512-2K0/AbPJAEr3yMA8oDD0I6WB+SXs/YlF297azjR5eSZVQjuimDAwLf4bEXk9ilbrzoMFmm0Tpzn4CC6f0rISBA==}
@@ -8108,10 +8108,10 @@ snapshots:
       - bluebird
       - supports-color
 
-  '@nuxt/content@2.12.1(ioredis@5.4.1)(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))':
+  '@nuxt/content-edge@2.12.1-28635002.f66778a(ioredis@5.4.1)(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@nuxt/kit': 3.12.1(rollup@4.18.0)
-      '@nuxtjs/mdc': 0.6.1(rollup@4.18.0)
+      '@nuxtjs/mdc': 0.7.1(rollup@4.18.0)
       '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/head': 2.0.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/nuxt': 10.10.0(nuxt@3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(eslint@9.4.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(rollup@4.18.0))(vue@3.4.27(typescript@5.4.5)))(fuse.js@7.0.0)(ioredis@5.4.1)(lightningcss@1.25.1)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1)))(vite@5.2.4(@types/node@20.14.2)(lightningcss@1.25.1)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))
@@ -8694,7 +8694,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxtjs/mdc@0.6.1(rollup@4.18.0)':
+  '@nuxtjs/mdc@0.7.1(rollup@4.18.0)':
     dependencies:
       '@nuxt/kit': 3.12.1(rollup@4.18.0)
       '@shikijs/transformers': 1.6.3