chore: migrate to Nuxt UI v3 & Content v3 (#471)

Co-authored-by: HugoRCD <[email protected]>

Author: atinux

docs/app.config.ts

@@ -0,0 +1,37 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'green',
+      neutral: 'slate',
+      warning: 'amber',
+      important: 'violet'
+    },
+    commandPalette: {
+      slots: {
+        itemLeadingIcon: 'size-4'
+      }
+    },
+    tabs: {
+      slots: {
+        list: 'overflow-x-auto'
+      }
+    }
+  },
+  uiPro: {
+    contentNavigation: {
+      slots: {
+        linkLeadingIcon: 'size-4',
+        listWithChildren: 'ms-4.5'
+      }
+    }
+  },
+  seo: {
+    siteName: 'NuxtHub'
+  },
+  toc: {
+    title: 'On this page',
+    bottom: {
+      edit: 'https://github.com/nuxt-hub/core/edit/main/docs/content'
+    }
+  }
+})

docs/app/app.config.ts

@@ -1,27 +1,25 @@
 <script setup lang="ts">
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
-
 const appConfig = useAppConfig()
 const route = useRoute()
 const { seo } = useAppConfig()
 const { isLoading } = useLoadingIndicator()
 
 const primary = (route.meta?.primary as string) || 'green'
-appConfig.ui.primary = primary
+appConfig.ui.colors.primary = primary
 watch(() => route.meta?.primary, (primary: string) => {
   setTimeout(() => {
-    appConfig.ui.primary = primary || 'green'
+    appConfig.ui.colors.primary = primary || 'green'
   }, 40)
 })
 const heroBackgroundClass = computed(() => route.meta?.heroBackground || '')
 
 const appear = ref(false)
 const appeared = ref(false)
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
-  default: () => []
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
+  transform: data => data.find(item => item.path === '/docs')?.children || []
 })
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
-  default: () => [],
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false
 })
 
@@ -41,7 +39,7 @@ useSeoMeta({
   ogSiteName: seo?.siteName,
   twitterCard: 'summary_large_image',
   titleTemplate(title) {
-    return title.includes('NuxtHub') ? title : `${title} · NuxtHub`
+    return title?.includes('NuxtHub') ? title : `${title} · NuxtHub`
   }
 })
 
@@ -56,15 +54,11 @@ onMounted(() => {
   }, 0)
 })
 
-useScriptClarity({
-  id: 'o4ovofrg5c'
-})
-
 const links = computed(() => [
   ...navigation.value.map(item => ({
     label: item.title,
     icon: item.icon,
-    to: item._path === '/docs' ? '/docs/getting-started' : item._path
+    to: item.path === '/docs' ? '/docs/getting-started' : item.path
   })),
   {
     label: 'NuxtHub Admin',
@@ -91,15 +85,14 @@ const links = computed(() => [
 </script>
 
 <template>
-  <div class="bg-white dark:bg-gray-950">
+  <UApp>
     <AppHeader />
     <UMain class="relative">
       <HeroBackground
-        class="absolute w-full top-[1px] transition-all text-primary flex-shrink-0"
+        class="absolute w-full -top-px transition-all text-(--ui-primary) shrink-0"
         :class="[
-          isLoading ? 'animate-pulse' : (appear ? 'opacity-100' : 'opacity-0'),
-          appeared ? 'duration-[400ms]': 'duration-1000',
-          heroBackgroundClass
+          isLoading ? 'animate-pulse' : (appear ? heroBackgroundClass : 'opacity-0'),
+          appeared ? 'duration-[400ms]': 'duration-1000'
         ]"
       />
       <NuxtLayout>
@@ -112,7 +105,5 @@ const links = computed(() => [
     <ClientOnly>
       <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
     </ClientOnly>
-
-    <UNotifications />
-  </div>
+  </UApp>
 </template>

docs/app.vue docs/app/app.vue

@@ -0,0 +1,27 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../content/**/*";
+
+.dark {
+  /* --ui-bg: var(--ui-color-neutral-950); */
+  --ui-bg: rgb(2, 4, 32);
+}
+
+@theme {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --breakpoint-3xl: 1920px;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}

docs/app/assets/main.css

@@ -17,44 +17,50 @@ const links = [
 </script>
 
 <template>
-  <UFooter :links="links">
+  <UFooter>
     <template #left>
       <span class="inline text-sm">© {{ new Date().getFullYear() }} <a href="https://nuxtlabs.com" target="_blank" class="text-gray-900 dark:text-gray-50 hover:underline underline-offset-4">NuxtLabs</a></span>
     </template>
 
+    <UNavigationMenu :items="links" variant="link" />
+
     <template #right>
-      <ColorScheme><UColorModeSelect /></ColorScheme>
+      <ColorScheme><UColorModeSelect size="sm" variant="ghost" /></ColorScheme>
       <UButton
         icon="i-simple-icons-discord"
-        color="gray"
+        color="neutral"
         variant="ghost"
         to="https://discord.gg/vW89dsVqBF"
         target="_blank"
         aria-label="Go to NuxtHub Discord server"
+        size="sm"
       />
       <UButton
         icon="i-simple-icons-x"
-        color="gray"
+        color="neutral"
         variant="ghost"
         to="https://x.com/nuxt_hub"
         target="_blank"
         aria-label="Go to NuxtHub X account"
+        size="sm"
       />
       <UButton
         icon="i-simple-icons-linkedin"
-        color="gray"
+        color="neutral"
         variant="ghost"
         to="https://www.linkedin.com/showcase/nuxthub/"
         target="_blank"
         aria-label="Go to NuxtHub LinkedIn page"
+        size="sm"
       />
       <UButton
         icon="i-simple-icons-github"
-        color="gray"
+        color="neutral"
         variant="ghost"
         to="https://github.com/nuxt-hub/core"
         target="_blank"
         aria-label="Go to NuxtHub GitHub repository"
+        size="sm"
       />
     </template>
   </UFooter>

docs/components/AppFooter.vue docs/app/components/AppFooter.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const route = useRoute()
+const links = computed(() => [
+  {
+    label: 'Docs',
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs'),
+    icon: 'i-lucide-book'
+  }, {
+    label: 'Templates',
+    to: '/templates',
+    icon: 'i-lucide-panels-top-left'
+  }, {
+    label: 'Pricing',
+    to: '/pricing',
+    icon: 'i-lucide-credit-card'
+  }, {
+    label: 'Changelog',
+    to: '/changelog',
+    icon: 'i-lucide-megaphone'
+  }, {
+    label: 'Blog',
+    to: '/blog',
+    icon: 'i-lucide-newspaper'
+  }
+])
+
+const navLinks = computed(() => links.value.map((link) => {
+  if (link.label === 'Docs') {
+    return {
+      icon: link.icon,
+      title: link.label,
+      path: link.to,
+      children: navigation.value
+    }
+  }
+  return {
+    title: link.label,
+    path: link.to,
+    icon: link.icon
+  }
+}))
+const ready = ref(false)
+const authenticated = ref(false)
+onMounted(async () => {
+  const endpoint = import.meta.dev ? 'http://localhost:3000/api/authenticated' : 'https://admin.hub.nuxt.com/api/authenticated'
+  await $fetch(endpoint, {
+    credentials: 'include'
+  }).then((state: { authenticated: boolean }) => {
+    authenticated.value = state.authenticated
+  }).catch(() => {
+    authenticated.value = false
+  })
+  nextTick(() => {
+    ready.value = true
+  })
+})
+</script>
+
+<template>
+  <UHeader>
+    <template #left>
+      <div class="inline-flex items-end gap-2">
+        <NuxtLink to="/" aria-label="NuxtHub"><HubLogo class="h-6" /></NuxtLink>
+        <UBadge variant="subtle" size="sm" class="relative top-[2px]">
+          beta
+        </UBadge>
+      </div>
+    </template>
+
+    <UNavigationMenu :items="links.map(({ icon, ...link }) => link)" variant="link" :ui="{ link: 'text-(--ui-text-highlighted) hover:text-(--ui-primary) data-active:text-(--ui-primary)' }" />
+
+    <template #right>
+      <div class="flex items-center gap-2 transition-opacity duration-300" :class="[ready ? 'opacity-100' : 'opacity-0']">
+        <UTooltip text="Search" :kbds="['meta', 'K']" :popper="{ strategy: 'absolute' }">
+          <UContentSearchButton :label="null" size="sm" />
+        </UTooltip>
+        <UButton v-if="ready && !authenticated" size="sm" label="Log in" color="neutral" variant="subtle" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=login" class="hidden sm:inline-flex" external />
+        <UButton v-if="ready && !authenticated" size="sm" label="Sign up" color="neutral" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=signup" class="hidden sm:inline-flex" external />
+        <UButton v-if="ready && authenticated" size="sm" label="Dashboard" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=dashboard" class="hidden sm:inline-flex" external />
+      </div>
+    </template>
+
+    <template #body>
+      <UContentNavigation :navigation="navLinks" highlight type="single" :default-open="$route.path.startsWith('/docs')" :ui="{ itemWithChildren: 'ps-1.5' }" />
+
+      <div class="flex flex-col gap-y-2 mt-4">
+        <USeparator class="mb-4" />
+        <UButton v-if="ready && !authenticated" label="Log in" color="neutral" variant="subtle" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=login" class="flex justify-center sm:hidden" external />
+        <UButton v-if="ready && !authenticated" label="Sign up" color="neutral" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=signup" class="flex justify-center text-gray-900 bg-(--ui-primary) sm:hidden" external />
+        <UButton v-if="ready && authenticated" label="Dashboard" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=dashboard" class="flex justify-center text-gray-900 bg-(--ui-primary) sm:hidden" external />
+      </div>
+    </template>
+  </UHeader>
+</template>

docs/app/components/AppHeader.vue

@@ -3,12 +3,12 @@
     <path
       fill="currentColor"
       d="M377 201c2.16 0 4-1.791 4-4v-93s5 9 14 24l39 67c1.785 3.74 5.744 6 9 6h27V51h-27c-1.798 0-4 1.4941-4 4v94l-18-32-36-61c-1.752-3.1088-5.521-5-9-5h-26v150h27ZM726 93h13c3.314 0 6-2.6863 6-6V61h28v32h27v24h-27v43c0 10.5 5.057 15 14 15h13v26h-17c-23.052 0-38-14.929-38-40v-44h-19V93Zm-135 0v62c0 14.004-5.258 25.809-13 34-7.742 8.191-18.434 12-33 12-14.566 0-26.258-3.809-34-12-7.611-8.191-13-19.996-13-34V93h16c3.412 0 6.769.622 9 3 2.231 2.2459 3 3.5652 3 7v52c0 8.059.457 13.037 4 17 3.543 3.831 7.914 5 15 5 7.217 0 10.457-1.169 14-5 3.543-3.963 4-8.941 4-17v-52c0-3.4348.769-5.622 3-8 1.96-2.0893 4.028-2.0401 7-2 .411.0055 1.586 0 2 0h16Zm85 52 34-52h-26c-3.277 0-6.188 1.1758-8 4l-16 24-15-23c-1.812-2.8242-5.723-5-9-5h-25l34 51-37 57h26c3.25 0 6.182-3.213 8-6l18-27 19 28c1.818 2.787 4.75 5 8 5h26l-37-56Z"
-      class="dark:text-white text-gray-950"
+      class="text-(--ui-text-highlighted)"
     />
     <path
       fill="currentColor" fill-rule="evenodd"
       d="M102.799 3.5398C106.33 1.5449 110.324.5 114.382.5s8.052 1.045 11.582 3.0398c3.532 1.9952 6.482 4.8753 8.542 8.3653l18.242 30.9566 15.801 25.5766 6.644-11.6251 1.841-3.2371 6.518-11.388c2.058-3.4906 5.008-6.3712 8.538-8.367 3.53-1.9953 7.524-3.0406 11.582-3.0406 4.057 0 8.051 1.0453 11.581 3.0406 3.531 1.9958 6.48 4.8766 8.538 8.3672l18.389 31.1803.016.0006.998 1.7174 53.65 90.9664c0 .001-.001-.001 0 0 2.061 3.49 3.154 7.465 3.156 11.517.002 4.054-1.087 8.028-3.146 11.52-2.058 3.492-5.008 6.373-8.54 8.369-3.53 1.996-7.525 3.041-11.584 3.041H161.599l22.185-37.558h67.115l-47.233-80.0753-48.126 81.5653c-7.7 12.729-17.328 22.167-28.957 28.189-.113.065-.228.13-.343.196-3.193 1.817-7.516 4.034-11.665 5.334-4.093 1.283-10.624 1.835-15.7702 2.097-.1935.01-.3858.019-.5766.029-2.1167.148-4.2767.223-6.4804.223h-68.283c-.0001 0 .0002 0 0 0-4.0583 0-8.0532-1.045-11.5837-3.041-3.5314-1.996-6.4815-4.877-8.5396-8.369-2.0588-3.492-3.148-7.466-3.1462-11.52.0018-4.052 1.094-8.024 3.1551-11.515m0 0 30.633-51.944 16.5658-29.1048 20.6681-34.0319L94.2571 11.906c2.0595-3.49 5.0106-6.371 8.5419-8.3663M40.7818 116.789l35.8795-60.8401L110.47 45.0357 45.1786 155.732l-4.3968-38.943Zm-6.0668 10.288L9.5056 169.824c-1.397 2.365-2.1281 5.039-2.1293 7.75a15.149 15.149 0 0 0 .5565 4.074l31.0522-16.751-4.27-37.82Zm6.9797 44.638-30.1993 16.291c1.1104 1.199 2.4133 2.232 3.8691 3.055 2.4537 1.387 5.2477 2.122 8.0995 2.122h32.8168l-14.5861-21.468Zm47.4539 21.468h.2597l.4603-.002c.472-.002 1.1577-.008 2.0043-.022 1.5584-.026 3.6544-.079 5.9617-.189 9.4374-.673 17.8654-2.946 25.3574-6.801a91.7367 91.7367 0 0 0 2.93-1.764l-.953-30.109c-3.704 4.749-7.764 8.378-12.428 10.964-6.423 3.561-13.6739 4.968-22.1064 4.968l-41.2221-.009 15.5049 22.821 24.2312.143Zm-39.821-30.281 41.307.009c.0003 0-.0002 0 0 0 7.6494 0 13.6184-1.275 18.6744-4.078 5.045-2.797 9.497-7.291 13.825-14.273l22.734-38.556-31.458-53.4439L49.3276 162.902Zm100.0514-48.644-17.594 29.838h22.236l-4.642-29.838Zm5.463 37.155h-22.579l.894 28.262c6.188-4.988 11.588-11.348 16.259-19.065.003-.006.007-.012.01-.018l5.416-9.179Zm6.005-10.177 38.491-65.2347-19.773-12.2828-8.466 14.8894-15.469 29.0981 5.217 33.53Zm3.652-65.6173-17.888-28.957-9.912-16.8203-19.905 12.542 33.832 57.4798 8.483-14.7654.008-.014 5.382-9.4651Zm-50.048-40.3619 18.551-11.689-4.65-7.8922c-1.397-2.3672-3.417-4.3507-5.87-5.7368-2.454-1.3866-5.248-2.1218-8.1-2.1218-2.852 0-5.646.7352-8.101 2.1218-1.876 1.06-3.498 2.4694-4.782 4.1326l12.952 21.1854ZM97.273 20.998 82.2519 46.4689l25.5511-8.2475-10.53-17.2234Zm112.762 58.4635 46.215 78.3495 7.607-33.219-12.277-20.705-13.568-23.3557-27.977-1.0698Zm59.177 53.9465-7.055 30.81h25.226l-18.171-30.81Zm22.35 38.127h-32.113l-28.571 21.648h45.853c2.852 0 5.646-.735 8.1-2.122 2.453-1.386 4.471-3.37 5.867-5.738 1.395-2.366 2.122-5.039 2.121-7.749-.001-2.076-.429-4.129-1.257-6.039Zm-68.258 18.268 25.794-19.544H198.69l24.614 19.544Zm-35.728-19.092 28.303 22.472h-41.577l13.274-22.472Zm46.033-97.6702-15.973-27.0841c-1.396-2.367-3.414-4.351-5.867-5.7372a16.149 16.149 0 0 0-1.378-.695l-2.629 32.5279 25.847.9884Zm-32.755-4.6672 2.447-30.2719c-2.722.0609-5.38.7913-7.727 2.1178-2.446 1.3823-4.459 3.3587-5.855 5.7169L183.173 57.39l17.681 10.9836ZM1133.15 198.2c4.93 2.267 10.12 2.8 15.85 2.8 9.73 0 18.35-1.533 25.55-5.8 7.2-4.267 12.67-10.333 16.4-18.2 3.87-7.867 6.05-16.6 6.05-27 0-10.4-2.18-19.933-6.05-27.8-3.73-7.867-9.2-13.933-16.4-18.2-7.07-4.2668-15.4-6.4001-25-6.4001-6.13 0-11.6 1.1333-16.4 3.4001-4.8 2.133-9.22 5.067-12.15 8.8V60.3999h-20c-4.42 0-8 3.5817-8 8V201h28v-12c2.8 3.867 7.22 6.933 12.15 9.2Zm-6.4-28.2c-4.53-5.2-6.75-12-6.75-20.4 0-8.533 2.15-15.333 6.55-20.4 4.53-5.2 10.53-7.8 18-7.8 7.47 0 13.4 2.6 17.8 7.8 4.53 5.067 6.8 11.867 6.8 20.4 0 8.4-2.27 15.2-6.8 20.4-4.53 5.067-10.47 7.6-17.8 7.6s-13.27-2.533-17.8-7.6ZM950 201V60.9999h-20c-4.418 0-8 3.5817-8 8V117h-54V60.9999h-28V201h19.946c4.439 0 8.029-3.615 7.999-8.054L867.6 142H922v59h28Zm118-45.989V93.0115h-16c-.12 0-.3.0004-.5.0009-.52.0013-1.21.003-1.5-.0009l-.09-.0012c-2.92-.0397-4.97-.0674-6.91 2.0012-2.23 2.3779-3 4.5651-3 7.9995v52c0 8.059-.46 13.037-4 17-3.54 3.832-6.78 5-14 5-7.09 0-11.46-1.168-15-5-3.54-3.963-4-8.941-4-17v-52c0-3.4344-.77-4.7537-3-6.9995-2.231-2.378-5.588-3-9-3h-16v61.9995c0 14.004 5.389 25.81 13 34 7.742 8.191 19.43 11.989 34 11.989s25.26-3.798 33-11.989c7.74-8.19 13-19.996 13-34Z"
-      clip-rule="evenodd" class="text-primary transition-all duration-300"
+      clip-rule="evenodd" class="text-(--ui-primary) transition-all duration-300"
     />
   </svg>
 </template>

docs/components/HeroBackground.vue docs/app/components/HeroBackground.vue

@@ -8,10 +8,9 @@ defineProps({
 </script>
 
 <template>
-  <ULandingSection
+  <UPageSection
     :ui="{
-      wrapper: 'mt-10 not-prose relative' + (!loose ? ' py-12 sm:py-12' : ''),
-      container: 'gap-8 sm:gap-y-8',
+      container: 'gap-8 sm:gap-y-8' + (!loose ? ' py-12 sm:py-12' : ''),
       title: 'lg:text-4xl font-semibold'
     }"
     :links="[
@@ -24,7 +23,7 @@ defineProps({
         label: 'Read the docs',
         to: '/docs/getting-started',
         variant: 'ghost',
-        color: 'gray'
+        color: 'neutral'
       }
     ]"
   >
@@ -56,7 +55,7 @@ defineProps({
     </ClientOnly>
 
     <template #title>
-      <span>Start with NuxtHub <span class="text-primary">today</span></span>
+      <span>Start with NuxtHub <span class="text-(--ui-primary)">today</span></span>
     </template>
-  </ULandingSection>
+  </UPageSection>
 </template>