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

app/app.config.ts

@@ -1,54 +1,8 @@
 export default defineAppConfig({
   ui: {
-    primary: 'indigo',
-    gray: 'zinc',
-    variables: {
-      light: {
-        background: 'var(--color-gray-50)'
-      },
-      dark: {
-        background: 'var(--color-gray-950)'
-      }
-    },
-    button: {
-      rounded: 'rounded-full',
-      default: {
-        size: 'md',
-        color: 'black'
-      }
-    },
-    input: {
-      rounded: 'rounded-full'
-    },
-    header: {
-      wrapper: 'lg:!border-transparent bg-gray-50 dark:bg-gray-950',
-      links: {
-        wrapper: 'ring-1 ring-gray-200 dark:ring-gray-800 px-3 gap-x-0 rounded-full',
-        base: 'py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity',
-        active: 'text-gray-900 dark:text-white after:opacity-100',
-        inactive: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
-      }
-    },
-    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'
-      }
-    },
-    pricing: {
-      card: {
-        highlight: 'ring-gray-900 dark:ring-white',
-        features: {
-          item: {
-            icon: {
-              base: 'text-gray-900 dark:text-white'
-            }
-          }
-        }
-      }
+    colors: {
+      primary: 'green',
+      neutral: 'zinc'
     }
   }
 })

app/app.vue

@@ -19,13 +19,13 @@ useSeoMeta({
 </script>
 
 <template>
-  <AppHeader />
+  <UApp :toaster="{ expand: false }">
+    <AppHeader />
 
-  <UMain>
-    <NuxtPage />
-  </UMain>
+    <UMain>
+      <NuxtPage />
+    </UMain>
 
-  <AppFooter />
-
-  <UNotifications />
+    <AppFooter />
+  </UApp>
 </template>

app/assets/css/main.css

@@ -0,0 +1,28 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@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;
+}
+
+:root {
+  --ui-primary: black;
+  --ui-bg: white;
+}
+
+.dark {
+  --ui-primary: white;
+  --ui-bg: #090909;
+}

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const links = [{
+const columns = [{
   label: 'Resources',
   children: [{
     label: 'Help center'
@@ -42,50 +42,49 @@ 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"
+      <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"
-                    :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>
@@ -102,7 +101,7 @@ function onSubmit() {
         target="_blank"
         icon="i-simple-icons-github"
         aria-label="GitHub"
-        color="gray"
+        color="neutral"
         variant="ghost"
       />
     </template>

app/components/AppHeader.vue

@@ -1,74 +1,69 @@
 <script setup lang="ts">
-const nuxtApp = useNuxtApp()
-const { activeHeadings, updateHeadings } = useScrollspy()
+const route = useRoute()
 
-const links = computed(() => [{
+const items = computed(() => [{
   label: 'Features',
   to: '#features',
-  icon: 'i-heroicons-cube-transparent',
-  active: activeHeadings.value.includes('features') && !activeHeadings.value.includes('pricing')
+  active: route.hash === '#features'
+}, {
+  label: 'Templates',
+  to: '#templates',
+  active: route.hash === '#templates'
 }, {
   label: 'Pricing',
   to: '#pricing',
-  icon: 'i-heroicons-credit-card',
-  active: activeHeadings.value.includes('pricing') && !activeHeadings.value.includes('testimonials')
+  active: route.hash === '#pricing'
 }, {
   label: 'Testimonials',
   to: '#testimonials',
-  icon: 'i-heroicons-academic-cap',
-  active: activeHeadings.value.includes('testimonials')
+  active: route.hash === '#testimonials'
 }, {
   label: 'FAQ',
   to: '#faq',
-  icon: 'i-heroicons-question-mark-circle',
-  active: activeHeadings.value.includes('faq')
+  active: route.hash === '#faq'
 }])
-
-nuxtApp.hooks.hookOnce('page:finish', () => {
-  updateHeadings([
-    document.querySelector('#features'),
-    document.querySelector('#pricing'),
-    document.querySelector('#testimonials'),
-    document.querySelector('#faq')
-  ])
-})
 </script>
 
 <template>
-  <UHeader :links="links">
-    <template #logo>
-      Nuxt UI Pro <UBadge
-        label="Landing"
-        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="white"
+        color="neutral"
         variant="ghost"
-        trailing-icon="i-heroicons-arrow-right-20-solid"
+        trailing-icon="i-lucide-arrow-right"
         class="hidden lg:flex"
       />
     </template>
 
-    <template #panel>
-      <UAsideLinks :links="links" />
+    <template #content>
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        class="-mx-2.5"
+      />
 
-      <UDivider class="my-6" />
+      <USeparator class="my-6" />
 
       <UButton
         label="Sign in"
-        color="white"
+        color="neutral"
         block
         class="mb-3"
       />
-      <UButton
-        label="Get started"
-        block
-      />
     </template>
   </UHeader>
 </template>