feat(app): update starter to be fully compliant with Nuxt Studio (#145)

Author: larbish

app/components/content/PictureAndText.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { UCard } from '#components'
+
+defineProps<{
+  reverse?: boolean
+  card?: boolean
+}>()
+</script>
+
+<template>
+  <component :is="card ? UCard : 'div'">
+    <div class="grid grid-cols-3 items-center w-full gap-x-8">
+      <div :class="{ 'order-2': reverse }">
+        <slot name="image" />
+      </div>
+      <div class="col-span-2">
+        <slot />
+      </div>
+    </div>
+  </component>
+</template>

app/components/content/Pictures.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  orientation: 'horizontal' | 'vertical'
+}>()
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between"
+    :class="orientation === 'vertical' ? 'flex-col space-y-4' : 'flex-row   space-x-4'"
+  >
+    <slot />
+  </div>
+</template>

app/pages/blog/[slug].vue

@@ -12,8 +12,8 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
   })
 })
 
-const title = post.value.title
-const description = post.value.description
+const title = post.value.seo?.title || post.value.title
+const description = post.value.seo?.description || post.value.description
 
 useSeoMeta({
   title,

app/pages/index.vue

@@ -3,18 +3,18 @@ const { data: page } = await useAsyncData('index', () => queryCollection('index'
 
 useSeoMeta({
   titleTemplate: '',
-  title: page.value?.title,
-  ogTitle: page.value?.title,
-  description: page.value?.description,
-  ogDescription: page.value?.description
+  title: page.value?.seo?.title || page.value?.title,
+  ogTitle: page.value?.seo?.title || page.value?.title,
+  description: page.value?.seo?.description || page.value?.description,
+  ogDescription: page.value?.seo?.description || page.value?.description
 })
 </script>
 
 <template>
   <div v-if="page">
     <UPageHero
-      :title="page.hero.title"
-      :description="page.hero.description"
+      :title="page.title"
+      :description="page.description"
       :links="page.hero.links"
     >
       <template #top>

app/pages/pricing.vue

@@ -2,10 +2,10 @@
 const { data: page } = await useAsyncData('pricing', () => queryCollection('pricing').first())
 
 useSeoMeta({
-  title: page.value?.title,
-  ogTitle: page.value?.title,
-  description: page.value?.description,
-  ogDescription: page.value?.description
+  title: page.value?.seo?.title || page.value?.title,
+  ogTitle: page.value?.seo?.title || page.value?.title,
+  description: page.value?.seo?.description || page.value?.description,
+  ogDescription: page.value?.seo?.description || page.value?.description
 })
 
 defineOgImageComponent('Saas')
@@ -26,7 +26,10 @@ const items = ref([
 
 <template>
   <div v-if="page">
-    <UPageHero v-bind="page.hero">
+    <UPageHero
+      :title="page.title"
+      :description="page.description"
+    >
       <template #links>
         <UTabs
           v-model="isYearly"

content.config.ts

@@ -5,94 +5,74 @@ const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning',
 const sizeEnum = z.enum(['xs', 'sm', 'md', 'lg', 'xl'])
 const orientationEnum = z.enum(['vertical', 'horizontal'])
 
-const baseSchema = {
+const createBaseSchema = () => z.object({
   title: z.string().nonempty(),
   description: z.string().nonempty()
-}
+})
 
-const linkSchema = z.object({
+const createFeatureItemSchema = () => createBaseSchema().extend({
+  icon: z.string().nonempty().editor({ input: 'icon' })
+})
+
+const createLinkSchema = () => z.object({
   label: z.string().nonempty(),
   to: z.string().nonempty(),
-  icon: z.string().optional(),
+  icon: z.string().optional().editor({ input: 'icon' }),
   size: sizeEnum.optional(),
   trailing: z.boolean().optional(),
   target: z.string().optional(),
   color: colorEnum.optional(),
   variant: variantEnum.optional()
 })
 
-const imageSchema = z.object({
-  src: z.string().nonempty(),
+const createImageSchema = () => z.object({
+  src: z.string().nonempty().editor({ input: 'media' }),
   alt: z.string().optional(),
   loading: z.string().optional(),
   srcset: z.string().optional()
 })
 
-const featureItemSchema = z.object({
-  ...baseSchema,
-  icon: z.string().nonempty()
-})
-
-const sectionSchema = z.object({
-  headline: z.string().optional(),
-  ...baseSchema,
-  features: z.array(featureItemSchema)
-})
-
 export const collections = {
   docs: defineCollection({
     type: 'page',
-    source: '1.docs/**/*',
-    schema: z.object({
-      title: z.string().nonempty(),
-      description: z.string().nonempty()
-    })
+    source: '1.docs/**/*'
   }),
   posts: defineCollection({
     type: 'page',
     source: '3.blog/**/*',
     schema: z.object({
-      title: z.string().nonempty(),
-      description: z.string().nonempty(),
-      image: z.object({ src: z.string().nonempty() }),
+      image: z.object({ src: z.string().nonempty().editor({ input: 'media' }) }),
       authors: z.array(
         z.object({
           name: z.string().nonempty(),
           to: z.string().nonempty(),
-          avatar: z.object({ src: z.string().nonempty() })
+          avatar: z.object({ src: z.string().nonempty().editor({ input: 'media' }) })
         })
       ),
-      date: z.string().nonempty(),
+      date: z.date(),
       badge: z.object({ label: z.string().nonempty() })
     })
   }),
   index: defineCollection({
     source: '0.index.yml',
-    type: 'data',
+    type: 'page',
     schema: z.object({
-      title: z.string().nonempty(),
-      description: z.string().nonempty(),
-      hero: sectionSchema.extend({
-        headline: z.object({
-          label: z.string().nonempty(),
-          to: z.string().nonempty(),
-          icon: z.string().nonempty()
-        }),
-        links: z.array(linkSchema)
-      }),
+      hero: z.object(({
+        links: z.array(createLinkSchema())
+      })),
       sections: z.array(
-        sectionSchema.extend({
+        createBaseSchema().extend({
           id: z.string().nonempty(),
           orientation: orientationEnum.optional(),
-          features: z.array(featureItemSchema),
-          links: z.array(linkSchema),
-          reverse: z.boolean().optional()
+          reverse: z.boolean().optional(),
+          features: z.array(createFeatureItemSchema())
         })
       ),
-      features: sectionSchema.extend({
-        items: z.array(featureItemSchema)
+      features: createBaseSchema().extend({
+        items: z.array(createFeatureItemSchema())
       }),
-      testimonials: sectionSchema.extend({
+      testimonials: createBaseSchema().extend({
+        headline: z.string().optional(),
         items: z.array(
           z.object({
             quote: z.string().nonempty(),
@@ -101,24 +81,20 @@ export const collections = {
               description: z.string().nonempty(),
               to: z.string().nonempty(),
               target: z.string().nonempty(),
-              avatar: imageSchema
+              avatar: createImageSchema()
             })
           })
         )
       }),
-      cta: sectionSchema.extend({
-        links: z.array(linkSchema)
+      cta: createBaseSchema().extend({
+        links: z.array(createLinkSchema())
       })
     })
   }),
   pricing: defineCollection({
     source: '2.pricing.yml',
-    type: 'data',
-    schema: sectionSchema.extend({
-      hero: z.object({
-        title: z.string().nonempty(),
-        description: z.string().nonempty()
-      }),
+    type: 'page',
+    schema: z.object({
       plans: z.array(
         z.object({
           title: z.string().nonempty(),
@@ -129,7 +105,7 @@ export const collections = {
           }),
           billing_period: z.string().nonempty(),
           billing_cycle: z.string().nonempty(),
-          button: linkSchema,
+          button: createLinkSchema(),
           features: z.array(z.string().nonempty()),
           highlight: z.boolean().optional()
         })
@@ -138,7 +114,7 @@ export const collections = {
         title: z.string().nonempty(),
         icons: z.array(z.string())
       }),
-      faq: sectionSchema.extend({
+      faq: createBaseSchema().extend({
         items: z.array(
           z.object({
             label: z.string().nonempty(),
@@ -151,7 +127,6 @@ export const collections = {
   }),
   blog: defineCollection({
     source: '3.blog.yml',
-    type: 'data',
-    schema: sectionSchema
+    type: 'page'
   })
 }

content/0.index.yml

@@ -1,9 +1,10 @@
-title: Nuxt UI Pro - SaaS template
-description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
+title: Build your SaaS with Nuxt UI Pro
+description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
+seo:
+  title: Nuxt UI Pro - SaaS template
+  description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
 navigation: false
 hero:
-  title: Build your SaaS with Nuxt UI Pro
-  description: Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
   links:
     - label: Get started
       icon: i-lucide-arrow-right
@@ -74,61 +75,61 @@ testimonials:
   title: Trusted by Industry Leaders
   description: Join thousands of companies worldwide who have transformed their digital presence with our platform.
   items:
-    - quote: "The developer experience is unmatched. We migrated our entire infrastructure in weeks instead of months, and our team's productivity has increased dramatically. The TypeScript support and component library saved us months of development time."
+    - quote: The developer experience is unmatched. We migrated our entire infrastructure in weeks instead of months, and our team's productivity has increased dramatically. The TypeScript support and component library saved us months of development time.
       user:
         name: Sarah Chen
         description: CTO at TechScale Solutions
         avatar:
           src: https://i.pravatar.cc/120?img=1
-    - quote: "After implementing the edge computing features, our global application response times dropped by 70%. Our European and Asian markets saw immediate improvements in user engagement and conversion rates."
+    - quote: After implementing the edge computing features, our global application response times dropped by 70%. Our European and Asian markets saw immediate improvements in user engagement and conversion rates.
       user:
         name: Marcus Rodriguez
         description: VP of Engineering at DataFlow
         avatar:
           src: https://i.pravatar.cc/120?img=7
-    - quote: "The platform's security features gave us peace of mind during our SOC 2 certification. The built-in compliance tools and audit logs made the process seamless."
+    - quote: The platform's security features gave us peace of mind during our SOC 2 certification. The built-in compliance tools and audit logs made the process seamless.
       user:
         name: David Kumar
         description: Security Director at SecureStack
         avatar:
           src: https://i.pravatar.cc/120?img=3
-    - quote: "During our Black Friday sale, we handled 15x our normal traffic without a hitch. The auto-scaling features worked flawlessly, and our monitoring dashboard gave us real-time insights throughout the event."
+    - quote: During our Black Friday sale, we handled 15x our normal traffic without a hitch. The auto-scaling features worked flawlessly, and our monitoring dashboard gave us real-time insights throughout the event.
       user:
         name: Emily Zhang
         description: Lead Architect at ScaleForce
         avatar:
           src: https://i.pravatar.cc/120?img=5
-    - quote: "The support team goes above and beyond. They helped us optimize our CI/CD pipeline and suggested performance improvements that reduced our build times by 45%."
+    - quote: The support team goes above and beyond. They helped us optimize our CI/CD pipeline and suggested performance improvements that reduced our build times by 45%.
       user:
         name: James Wilson
         description: DevOps Lead at CloudPro
         avatar:
           src: https://i.pravatar.cc/120?img=8
-    - quote: "Switching to this platform reduced our infrastructure costs by 40% while improving performance. The cost savings alone paid for the investment within the first quarter."
+    - quote: Switching to this platform reduced our infrastructure costs by 40% while improving performance. The cost savings alone paid for the investment within the first quarter.
       user:
         name: Lisa Patel
         description: CEO at AutoScale
         avatar:
           src: https://i.pravatar.cc/120?img=9
-    - quote: "The accessibility features and responsive components helped us achieve WCAG 2.1 compliance with minimal custom development. Our site now scores 100 on Lighthouse accessibility metrics."
+    - quote: The accessibility features and responsive components helped us achieve WCAG 2.1 compliance with minimal custom development. Our site now scores 100 on Lighthouse accessibility metrics.
       user:
         name: Michael Torres
         description: Frontend Lead at AccessFirst
         avatar:
           src: https://i.pravatar.cc/120?img=11
-    - quote: "We serve millions of API requests daily, and the real-time analytics and monitoring tools have been invaluable for optimizing our performance and identifying bottlenecks."
+    - quote: We serve millions of API requests daily, and the real-time analytics and monitoring tools have been invaluable for optimizing our performance and identifying bottlenecks.
       user:
         name: Rachel Kim
         description: Performance Engineer at APIHub
         avatar:
           src: https://i.pravatar.cc/120?img=10
-    - quote: "The component library and design system tools helped us maintain consistency across our 20+ micro-frontends. Our development velocity has never been better."
+    - quote: The component library and design system tools helped us maintain consistency across our 20+ micro-frontends. Our development velocity has never been better.
       user:
         name: Thomas Weber
         description: UI Architecture Lead at DesignScale
         avatar:
           src: https://i.pravatar.cc/120?img=12
-    - quote: "Integration with our existing tools was seamless. The webhooks and API documentation made it easy to automate our workflows and enhance our development pipeline."
+    - quote: Integration with our existing tools was seamless. The webhooks and API documentation made it easy to automate our workflows and enhance our development pipeline.
       user:
         name: Sophia Martinez
         description: Integration Specialist at TechFlow
@@ -139,11 +140,11 @@ cta:
   description: Nuxt UI Pro is free in development, but you need a license to use it in production.
   links:
     - label: Buy now
-      to: 'https://ui.nuxt.com/pro/purchase'
+      to: https://ui.nuxt.com/pro/purchase
       target: _blank
       icon: i-lucide-shopping-cart
     - label: License
-      to: 'https://ui.nuxt.com/getting-started/license'
+      to: https://ui.nuxt.com/getting-started/license
       trailingIcon: i-lucide-circle-help
       target: _blank
       variant: subtle

content/1.docs/1.getting-started/1.index.md

@@ -41,4 +41,4 @@ to: https://codesandbox.io/s/github/nuxt-ui-pro/saas/
 ---
 ::
 
-Or open [Nuxt UI playground](https://ui.nuxt.com/playground){target=_blank}.
+Or open [Nuxt UI playground](https://ui.nuxt.com/playground).

content/2.pricing.yml

@@ -1,9 +1,9 @@
-title: Pricing
-description: Choose the plan that's right for you.
+title: A plan for every need
+description: Our plans are designed to meet the requirements of both beginners and players. Get the right plan that suits you.
+seo:
+  title: Pricing
+  description: Choose the plan that's right for you.
 navigation.icon: i-lucide-credit-card
-hero:
-  title: A plan for every need
-  description: Our plans are designed to meet the requirements of both beginners and players. Get the right plan that suits you.
 plans:
   - title: Basic
     description: A basic plan for individuals.