feat: migrate to @nuxt/ui-pro and @nuxt/content v3

app/app.config.ts

@@ -1,34 +1,8 @@
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
-    gray: 'cool',
-    button: {
-      rounded: 'rounded-full',
-      default: {
-        size: 'md'
-      }
-    },
-    input: {
-      default: {
-        size: 'md'
-      }
-    },
-    card: {
-      rounded: 'rounded-xl'
-    },
-    footer: {
-      top: {
-        wrapper: 'border-t border-gray-200 dark:border-gray-800',
-        container: 'py-8 lg:py-16'
-      },
-      bottom: {
-        wrapper: 'border-t border-gray-200 dark:border-gray-800'
-      }
-    },
-    page: {
-      hero: {
-        wrapper: 'lg:py-24'
-      }
+    colors: {
+      primary: 'blue',
+      neutral: 'slate'
     }
   }
 })

app/app.vue

@@ -23,16 +23,47 @@ useSeoMeta({
   twitterImage: 'https://saas-template.nuxt.dev/social-card.png',
   twitterCard: 'summary_large_image'
 })
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
+  transform: data => data.find(item => item.path === '/docs')?.children || []
+})
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false
+})
+
+const links = [{
+  label: 'Docs',
+  icon: 'i-lucide-book',
+  to: '/docs/getting-started'
+}, {
+  label: 'Pricing',
+  icon: 'i-lucide-credit-card',
+  to: '/pricing'
+}, {
+  label: 'Blog',
+  icon: 'i-lucide-pencil',
+  to: '/blog'
+}]
+
+provide('navigation', navigation)
 </script>
 
 <template>
-  <div>
+  <UApp>
     <NuxtLoadingIndicator />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <UNotifications />
-  </div>
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        shortcut="meta_k"
+        :navigation="navigation"
+        :links="links"
+        :fuse="{ resultLimit: 42 }"
+      />
+    </ClientOnly>
+  </UApp>
 </template>

app/assets/css/main.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content";
+
+@theme {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --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;
+}
+
+.dark {
+  --ui-bg: var(--ui-color-neutral-950);
+}

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const links = [{
+const columns = [{
   label: 'Resources',
   children: [{
     label: 'Help center'
@@ -42,69 +42,66 @@ const loading = ref(false)
 function onSubmit() {
   loading.value = true
 
-  setTimeout(() => {
-    toast.add({
-      title: 'Subscribed!',
-      description: 'You\'ve been subscribed to our newsletter.'
-    })
-
-    loading.value = false
-  }, 1000)
+  toast.add({
+    title: 'Subscribed!',
+    description: 'You\'ve been subscribed to our newsletter.'
+  })
 }
 </script>
 
 <template>
-  <UFooter>
+  <USeparator
+    icon="i-simple-icons-nuxtdotjs"
+    class="h-px"
+  />
+  <UFooter :ui="{ top: 'border-b border-[var(--ui-border)]' }">
     <template #top>
-      <UFooterColumns :links="links">
-        <template #right>
-          <form @submit.prevent="onSubmit">
-            <UFormGroup
-              label="Subscribe to our newsletter"
-              :ui="{ container: 'mt-3' }"
-            >
-              <UInput
-                v-model="email"
-                type="email"
-                placeholder="Enter your email"
-                :ui="{ icon: { trailing: { pointer: '' } } }"
-                required
-                size="xl"
-                autocomplete="off"
-                class="max-w-sm"
-                input-class="rounded-full"
+      <UContainer>
+        <UFooterColumns :columns="columns">
+          <template #right>
+            <form @submit.prevent="onSubmit">
+              <UFormField
+                name="email"
+                label="Subscribe to our newsletter"
+                size="lg"
               >
-                <template #trailing>
-                  <UButton
-                    type="submit"
-                    size="xs"
-                    color="primary"
-                    :label="loading ? 'Subscribing' : 'Subscribe'"
-                    :loading="loading"
-                  />
-                </template>
-              </UInput>
-            </UFormGroup>
-          </form>
-        </template>
-      </UFooterColumns>
+                <UInput
+                  v-model="email"
+                  type="email"
+                  class="w-full"
+                  placeholder="Enter your email"
+                >
+                  <template #trailing>
+                    <UButton
+                      type="submit"
+                      size="xs"
+                      color="neutral"
+                      label="Subscribe"
+                    />
+                  </template>
+                </UInput>
+              </UFormField>
+            </form>
+          </template>
+        </UFooterColumns>
+      </UContainer>
     </template>
 
     <template #left>
-      <p class="text-gray-500 dark:text-gray-400 text-sm">
+      <p class="text-(--ui-text-muted) text-sm">
         Copyright © {{ new Date().getFullYear() }}. All rights reserved.
       </p>
     </template>
 
     <template #right>
-      <UColorModeButton size="sm" />
+      <UColorModeButton />
 
       <UButton
         to="https://github.com/nuxt-ui-pro/saas"
         target="_blank"
         icon="i-simple-icons-github"
         aria-label="GitHub"
-        color="gray"
+        color="neutral"
         variant="ghost"
       />
     </template>

app/components/AppHeader.vue

@@ -1,50 +1,72 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+const route = useRoute()
 
-const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
-
-const links = [{
+const items = computed(() => [{
   label: 'Docs',
-  to: '/docs'
+  to: '/docs',
+  active: route.path.startsWith('/docs')
 }, {
   label: 'Pricing',
   to: '/pricing'
 }, {
   label: 'Blog',
   to: '/blog'
-}]
+}])
 </script>
 
 <template>
-  <UHeader :links="links">
-    <template #logo>
-      Nuxt UI Pro <UBadge
-        label="SaaS"
-        variant="subtle"
-        class="mb-0.5"
-      />
+  <UHeader>
+    <template #left>
+      <NuxtLink to="/">
+        <LogoPro class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+      <TemplateMenu />
     </template>
 
+    <UNavigationMenu
+      :items="items"
+      variant="link"
+    />
+
     <template #right>
+      <UColorModeButton />
       <UButton
         label="Sign in"
-        color="gray"
+        color="neutral"
+        variant="ghost"
         to="/login"
       />
       <UButton
         label="Sign up"
-        icon="i-heroicons-arrow-right-20-solid"
-        trailing
-        color="black"
-        to="/signup"
+        color="neutral"
+        trailing-icon="i-lucide-arrow-right"
         class="hidden lg:flex"
+        to="/signup"
       />
     </template>
 
-    <template #panel>
-      <UNavigationTree
-        :links="mapContentNavigation(navigation)"
-        default-open
+    <template #body>
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        class="-mx-2.5"
+      />
+
+      <USeparator class="my-6" />
+
+      <UButton
+        label="Sign in"
+        color="neutral"
+        variant="subtle"
+        to="/login"
+        block
+        class="mb-3"
+      />
+      <UButton
+        label="Sign up"
+        color="neutral"
+        to="/signup"
+        block
       />
     </template>
   </UHeader>

app/components/ImagePlaceholder.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
-    <div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10">
+  <UPageCard
+    variant="subtle"
+  >
+    <div class="relative overflow-hidden rounded-(--ui-radius) border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center aspect-video">
       <svg
-        class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10"
+        class="absolute inset-0 h-full w-full stroke-(--ui-border-inverted)/10"
         fill="none"
       >
         <defs>
@@ -24,6 +26,8 @@
           height="100%"
         />
       </svg>
+
+      <slot />
     </div>
-  </div>
+  </UPageCard>
 </template>