### Card Component Example (MDC)

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

Demonstrates the Card component for highlighting content blocks, with options for title, icon, and linking. The example shows how to configure a card to display project information and link to a GitHub repository.

```mdc
::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
A dashboard with multi-column layout.
::
```

--------------------------------

### Create Step-by-Step Guides with Steps Component

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

The Steps component automatically generates numbered steps from document headings, ideal for creating guides for processes or tutorials. The 'level' prop can be used to specify the heading level to include. It requires no external dependencies.

```mdc
::steps{level="4"}

#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```

#### Import Tailwind CSS and Nuxt UI in your CSS

```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

::
```

--------------------------------

### Initialize Nuxt UI SaaS Project

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Commands to create a new Nuxt UI SaaS project, install dependencies, and run the development server. It also includes build, preview, linting, and type-checking commands.

```bash
# Create a new project using the template
npm create nuxt@latest -- -t github:nuxt-ui-templates/saas

# Navigate to project directory
cd my-saas-app

# Install dependencies
pnpm install

# Start development server on http://localhost:3000
pnpm dev

# Build for production
pnpm build

# Preview production build locally
pnpm preview

# Run linting
pnpm lint

# Run TypeScript type checking
pnpm typecheck
```

--------------------------------

### Callout Component Examples (MDC)

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

Illustrates the use of the Callout component for emphasizing contextual information, with support for markdown. Includes examples for default callout and semantic shortcuts like note, tip, warning, and caution, which come with pre-defined styles and icons.

```mdc
::callout
This is a `callout` with full **markdown** support.
::
```

```mdc
::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::
```

--------------------------------

### Environment Configuration for SaaS Template

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Provides an example of an environment variable file (`.env.example`) for configuring the Nuxt SaaS template. It highlights the `NUXT_PUBLIC_SITE_URL` variable, which is crucial for SEO purposes like Open Graph image generation, canonical URLs, and sitemap creation during static exports.

```bash
# .env.example
NUXT_PUBLIC_SITE_URL=https://your-domain.com

# Used for:
# - Open Graph image generation in static exports
# - Canonical URLs for SEO
# - Sitemap generation

```

--------------------------------

### Create Ordered Lists in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates creating ordered lists in Markdown by starting each item with a number. Ideal for sequential steps or prioritized items.

```markdown
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
```

--------------------------------

### Content Query API Examples

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Demonstrates various ways to query content collections programmatically using TypeScript in Nuxt.js. It covers fetching single documents, all documents, applying filters and sorting, querying navigation structures, and retrieving search index data and surrounding items for navigation. These functions leverage the Nuxt Content module.

```typescript
// Example usage in any component or page

// Query single document
const { data: page } = await useAsyncData('pricing', () =>
  queryCollection('pricing').first()
)

// Query all posts
const { data: posts } = await useAsyncData('blog-posts', () =>
  queryCollection('posts').all()
)

// Query with filters
const { data: recentPosts } = await useAsyncData('recent-posts', () =>
  queryCollection('posts')
    .where({ draft: { $ne: true } })
    .sort({ date: -1 })
    .limit(5)
)

// Query navigation structure
const { data: navigation } = await useAsyncData('docs-nav', () =>
  queryCollectionNavigation('docs')
)

// Query for search
const { data: searchSections } = await useAsyncData('search-index', () =>
  queryCollectionSearchSections('docs', {
    limit: 42
  })
)

// Get surrounding items (prev/next navigation)
const { data: surround } = await useAsyncData('surround', () =>
  queryCollectionItemSurroundings('posts', route.path, {
    fields: ['title', 'description']
  })
)
```

--------------------------------

### Badge Component Example (MDC)

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

Shows how to use the Badge component to display status indicators or labels, such as version numbers. It accepts text content directly.

```mdc
::badge
**v3.0.0-alpha.10**
::
```

--------------------------------

### Multiline Blockquote Example - Nuxt UI

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

This example shows how to create a multiline blockquote using Nuxt UI components. It's suitable for displaying extended quotations or multiple paragraphs within a quote. The code leverages Nuxt UI's markdown rendering capabilities.

```vue
<template>
  <UQuote>
    Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.

    Create beautiful, responsive, and accessible Vue applications with Nuxt UI.
  </UQuote>
</template>
```

```mdc
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
>
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI.
```

--------------------------------

### Accordion Component Example (MDC)

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

Demonstrates the usage of the Accordion and AccordionItem components for creating collapsible content sections. Useful for FAQs or grouped information. These components expect label and icon props.

```mdc
::accordion

:::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
::

:::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started.
::

::
```

--------------------------------

### Display Basic Code Blocks

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/2.code-blocks.md

Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. This component supports various languages and has no specific input requirements beyond the code itself.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```

--------------------------------

### Group Code Blocks in Tabs

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/2.code-blocks.md

Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. It takes multiple code blocks as children and displays them in a tabbed interface.

```markdown
:::code-group
```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```
:::
```

--------------------------------

### Deployment to Vercel

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Outlines three methods for deploying the Nuxt UI SaaS Template to Vercel. It includes using the one-click 'Deploy' button, the Vercel CLI for local deployment, and connecting a Git repository for automated deployments. The template is pre-configured for automatic preview and production deployments.

```bash
# Option 1: Use the Deploy button in README
# Click: https://vercel.com/new/clone?repository-url=...

# Option 2: Deploy via Vercel CLI
npm i -g vercel
vercel

# Option 3: Connect Git repository
# 1. Push code to GitHub
# 2. Import project in Vercel dashboard
# 3. Configure environment variables
# 4. Deploy

# The template is pre-configured with:
# - Automatic preview deployments for PRs
# - Production deployment on main branch
# - Edge caching for static assets

```

--------------------------------

### Pricing and FAQ Content Configuration - YAML

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

YAML structure for configuring pricing plans, including monthly and yearly prices, and frequently asked questions (FAQ) with their respective titles and descriptions.

```yaml
---
seo:
  title: Pricing
  description: Compare our plans to find the perfect fit for your needs.
title: Flexible Pricing
description: Choose the plan that works best for you.
plans:
  - name: Free
    features:
      - 100 credits
      - 3 projects
      - Community support
    price:
      month: $0
      year: $0
    cta: Get started free
  - name: Pro
    features:
      - 1000 credits
      - 10 projects
      - Email support
    price:
      month: $19
      year: $190
    popular: true
    cta: Start your free trial
  - name: Enterprise
    features:
      - Unlimited credits
      - Unlimited projects
      - 24/7 phone support
    price:
      month: $99
      year: $990
    cta: Contact sales
logos:
  title: Trusted by
  icons:
    - simple-icons:nuxtdot
    - simple-icons:vite
    - simple-icons:tailwindcss
    - simple-icons:github
    - simple-icons:gitlab
faq:
  title: Frequently Asked Questions
  description: Got questions? We have answers.
  items:
    - label: How does billing work?
      default: true
      content: You can choose to pay monthly or annually. Annual plans offer a discount.
    - label: Can I change my plan later?
      content: Yes, you can upgrade or downgrade your plan at any time.
    - label: What is included in the free plan?
      content: The free plan includes 100 credits, 3 projects, and community support.
    - label: Do you offer custom enterprise solutions?
      content: Yes, we offer custom solutions for enterprise clients. Please contact our sales team for more information.
...

```

--------------------------------

### Nuxt Configuration with Modules and Settings

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Configuration file for Nuxt 4, defining modules like ESLint, image optimization, UI components, content management, utility composables, and OG image generation. Includes devtools, global styles, route rules, and Nitro prerendering settings.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',      // ESLint integration
    '@nuxt/image',       // Image optimization
    '@nuxt/ui',          // UI component library
    '@nuxt/content',     // File-based CMS
    '@vueuse/nuxt',      // Vue composable utilities
    'nuxt-og-image'      // OG image generation
  ],

  devtools: {
    enabled: true
  },

  // Import global styles
  css: ['~/assets/css/main.css'],

  // Route rules and redirects
  routeRules: {
    '/docs': { redirect: '/docs/getting-started', prerender: false }
  },

  compatibilityDate: '2024-07-11',

  // Pre-rendering configuration for static hosting
  nitro: {
    prerender: {
      routes: ['/'],
      crawlLinks: true  // Automatically discover and pre-render all linked pages
    }
  },

  // ESLint configuration
  eslint: {
    config: {
      stylistic: {
        commaDangle: 'never',
        braceStyle: '1tbs'
      }
    }
  }
})
```

--------------------------------

### Create Markdown Titles

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates how to create main titles in Markdown using the '#' symbol. Titles help structure documentation and navigation.

```markdown
## Titles
```

--------------------------------

### Nuxt App Configuration for UI Theming

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Application configuration file for Nuxt, specifically defining global UI settings such as primary and neutral color schemes using the Nuxt UI component library. This allows for consistent theming across the application.

```typescript
// app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',   // Primary brand color
      neutral: 'slate'   // Neutral color scheme
    }
  }
})
```

--------------------------------

### Create Internal Links in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Shows how to create internal links within documentation using root-relative paths in Markdown. Facilitates navigation within the project.

```markdown
[Installation](/getting-started/installation)
```

--------------------------------

### Display Image using Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/4.images-embeds.md

Demonstrates how to display images using standard Markdown syntax. This is suitable for basic image inclusion. Dependencies: None. Input: Image URL. Output: Displayed image.

```markdown
![Nuxt Social Image](https://nuxt.com/new-social.jpg)
```

--------------------------------

### Create Tables in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates creating tables in Markdown using pipes and hyphens. Tables are effective for presenting structured data in rows and columns.

```markdown
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
```

--------------------------------

### Blog Post Page with Table of Contents in Vue

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Renders an individual blog post with navigation to surrounding posts and a table of contents. It fetches post data using useAsyncData and handles SEO meta tags. Dependencies include Nuxt's useRoute, useAsyncData, queryCollection, and useSeoMeta.

```vue
<script setup lang="ts">
const route = useRoute()

// Fetch blog post by route path
const { data: post } = await useAsyncData(route.path, () =>
  queryCollection('posts').path(route.path).first()
)

if (!post.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Post not found',
    fatal: true
  })
}

// Fetch surrounding posts for navigation
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('posts', route.path, {
    fields: ['description']
  })
})

const title = post.value.seo?.title || post.value.title
const description = post.value.seo?.description || post.value.description

useSeoMeta({
  title,
  ogTitle: title,
  description,
  ogDescription: description
})

// Use post image for OG image if available
if (post.value.image?.src) {
  defineOgImage({
    url: post.value.image.src
  })
} else {
  defineOgImageComponent('Saas', {
    headline: 'Blog'
  })
}
</script>

<template>
  <UContainer v-if="post">
    <UPageHeader
      :title="post.title"
      :description="post.description"
    >
      <template #headline>
        <UBadge
          v-bind="post.badge"
          variant="subtle"
        />
        <span class="text-muted">&middot;</span>
        <time class="text-muted">
          {{ new Date(post.date).toLocaleDateString('en', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          }) }}
        </time>
      </template>

      <div class="flex flex-wrap items-center gap-3 mt-4">
        <UButton
          v-for="(author, index) in post.authors"
          :key="index"
          :to="author.to"
          color="neutral"
          variant="subtle"
          target="_blank"
          size="sm"
        >
          <UAvatar
            v-bind="author.avatar"
            alt="Author avatar"
            size="2xs"
          />
          {{ author.name }}
        </UButton>
      </div>
    </UPageHeader>

    <UPage>
      <UPageBody>
        <ContentRenderer
          v-if="post"
          :value="post"
        />

        <USeparator v-if="surround?.length" />

        <UContentSurround :surround="surround" />
      </UPageBody>

      <template
        v-if="post?.body?.toc?.links?.length"
        #right
      >
        <UContentToc :links="post.body.toc.links" />
      </template>
    </UPage>
  </UContainer>
</template>

```

--------------------------------

### Create Markdown Subtitles

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates creating subtitles in Markdown using the '##' symbol. Subtitles further divide sections for a detailed content hierarchy.

```markdown
### Subtitles
```

--------------------------------

### Documentation Layout with Search (Vue)

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

This Vue component defines the layout for documentation pages, incorporating a sidebar with navigation and a search bar. It utilizes Nuxt Content's navigation injection and provides a structure for the documentation interface. Dependencies include Nuxt Content for navigation data.

```vue
<!-- app/layouts/docs.vue -->
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

// Navigation is injected by Nuxt Content
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>

<template>
  <div>
    <AppHeader />

    <UMain>
      <UContainer>
        <UPage>
          <template #left>
            <UPageAside>
              <template #top>
                <UContentSearchButton :collapsed="false" />
              </template>

              <UContentNavigation
                :navigation="navigation"
                highlight
              />
            </UPageAside>
          </template>

          <slot />
        </UPage>
      </UContainer>
    </UMain>

    <AppFooter />
  </div>
</template>
```

--------------------------------

### Create Unordered Lists in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates creating unordered lists in Markdown using the '-' symbol. Useful for items without a specific sequence.

```markdown
- I'm a list item.
- I'm another list item.
- I'm the last list item.
```

--------------------------------

### Documentation Page with Sidebar Navigation (Vue)

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

This Vue component handles fetching and displaying individual documentation pages within a 'docs' layout. It includes sidebar navigation support, SEO meta tags, and allows for dynamic content rendering and table of contents display. It depends on Nuxt Content for data fetching and rendering.

```vue
<!-- app/pages/docs/[...slug].vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'docs'  // Use docs layout with sidebar
})

const route = useRoute()

// Fetch documentation page
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('docs').path(route.path).first()
)

if (!page.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page not found',
    fatal: true
  })
}

// Fetch surrounding pages for prev/next navigation
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('docs', route.path, {
    fields: ['description']
  })
})

const title = page.value.seo?.title || page.value.title
const description = page.value.seo?.description || page.value.description

useSeoMeta({
  title,
  ogTitle: title,
  description,
  ogDescription: description
})

defineOgImageComponent('Saas')
</script>

<template>
  <UPage v-if="page">
    <UPageHeader
      :title="page.title"
      :description="page.description"
    />

    <UPageBody>
      <ContentRenderer
        v-if="page.body"
        :value="page"
      />

      <USeparator v-if="surround?.length" />

      <UContentSurround :surround="surround" />
    </UPageBody>

    <template
      v-if="page?.body?.toc?.links?.length"
      #right
    >
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>
```

--------------------------------

### Display Keyboard Keys with Kbd Component

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

The Kbd component is used to visually represent keyboard keys or shortcuts. It is useful for displaying instructions or command references. No external dependencies are required.

```mdc
:kbd{value="meta"} :kbd{value="K"}
```

--------------------------------

### Create External Links in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates how to create external links in Markdown by wrapping the link text in brackets and the URL in parentheses. Essential for referencing external resources.

```markdown
[Nuxt UI](https://ui.nuxt.com/getting-started/installation)
```

--------------------------------

### Customize Image Display with Nuxt UI Components

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/4.images-embeds.md

Shows how to use Nuxt UI components for more customized image display, including setting height. Dependencies: Nuxt UI. Input: Image URL, height attribute. Output: Displayed image with specified height.

```mdc
:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"}
```

--------------------------------

### Application Header with Navigation (Vue)

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

This Vue component builds a responsive application header, including a logo, navigation menu, color mode button, and authentication buttons. It dynamically sets navigation item active states based on the current route and provides different button appearances for desktop and mobile. It relies on Nuxt's routing and UI components.

```vue
<!-- app/components/AppHeader.vue -->
<script setup lang="ts">
const route = useRoute()

const items = computed(() => [{
  label: 'Docs',
  to: '/docs',
  active: route.path.startsWith('/docs')
}, {
  label: 'Pricing',
  to: '/pricing'
}, {
  label: 'Blog',
  to: '/blog'
}, {
  label: 'Changelog',
  to: '/changelog'
}])
</script>

<template>
  <UHeader>
    <template #left>
      <NuxtLink to="/">
        <AppLogo class="w-auto h-6 shrink-0" />
      </NuxtLink>
      <TemplateMenu />
    </template>

    <UNavigationMenu
      :items="items"
      variant="link"
    />

    <template #right>
      <UColorModeButton />

      <UButton
        icon="i-lucide-log-in"
        color="neutral"
        variant="ghost"
        to="/login"
        class="lg:hidden"
      />

      <UButton
        label="Sign in"
        color="neutral"
        variant="outline"
        to="/login"
        class="hidden lg:inline-flex"
      />

      <UButton
        label="Sign up"
        color="neutral"
        trailing-icon="i-lucide-arrow-right"
        class="hidden lg:inline-flex"
        to="/signup"
      />
    </template>

    <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>
</template>
```

--------------------------------

### TypeScript Type Definitions for Blog Posts

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Defines custom TypeScript interfaces for blog post content, extending ParsedContent from Nuxt.js. This includes properties like title, description, date, image, badge, and author details. These types enhance code completion and type safety when working with blog content.

```typescript
// app/types/index.d.ts
import type { ParsedContent } from '@nuxt/content'

export interface BlogPost extends ParsedContent {
  title: string
  description: string
  date: string
  image: {
    src: string
    alt?: string
  }
  badge: {
    label: string
  }
  authors: Array<{
    name: string
    to: string
    avatar: {
      src: string
      alt?: string
    }
  }>
}
```

--------------------------------

### Create Single-line Blockquotes in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates creating single-line blockquotes in Markdown by prefixing a paragraph with '>'. Ideal for highlighting short quotes or important notes.

```markdown
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
```

--------------------------------

### Organize Content with Tabs Component

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

The Tabs and Tabs-item components enable the creation of tabbed interfaces for organizing content into logical sections. This improves content discoverability and organization. They require no external dependencies.

```mdc
::tabs

:::tabs-item{label="Code" icon="i-lucide-code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:: 
```

:::

:::tabs-item{label="Preview" icon="i-lucide-eye"}

::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::

:::

::
```

--------------------------------

### Create Superscript Text in Markdown using HTML

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Shows how to create superscript text in Markdown using the HTML `<sup>` tag. Useful for exponents or footnotes.

```markdown
<sup>superscript</sup>
```

--------------------------------

### Combine Bold and Strikethrough Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates combining bold and strikethrough text formatting in Markdown. Useful for indicating a change from bolded text.

```markdown
~~**bold**~~
```

--------------------------------

### Dynamic Pricing Page with Billing Toggle - Vue.js

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

A Vue.js component for displaying pricing plans that allows users to switch between monthly and yearly billing periods. It fetches pricing data and configures UI elements like tabs and accordions for FAQs.

```vue
<!-- app/pages/pricing.vue -->
<script setup lang="ts">
// Fetch pricing data from YAML content
const { data: page } = await useAsyncData('pricing', () =>
  queryCollection('pricing').first()
)

const title = page.value?.seo?.title || page.value?.title
const description = page.value?.seo?.description || page.value?.description

useSeoMeta({
  title,
  ogTitle: title,
  description,
  ogDescription: description
})

defineOgImageComponent('Saas')

// State for billing period toggle
const isYearly = ref('0')

const items = ref([
  {
    label: 'Monthly',
    value: '0'
  },
  {
    label: 'Yearly',
    value: '1'
  }
])
</script>

<template>
  <div v-if="page">
    <UPageHero
      :title="page.title"
      :description="page.description"
    >
      <template #links>
        <UTabs
          v-model="isYearly"
          :items="items"
          color="neutral"
          size="xs"
          class="w-48"
          :ui="{
            list: 'ring ring-accented rounded-full',
            indicator: 'rounded-full',
            trigger: 'w-1/2'
          }"
        />
      </template>
    </UPageHero>

    <UContainer>
      <UPricingPlans scale>
        <UPricingPlan
          v-for="(plan, index) in page.plans"
          :key="index"
          v-bind="plan"
          :price="isYearly === '1' ? plan.price.year : plan.price.month"
          :billing-cycle="isYearly === '1' ? '/year' : '/month'"
        />
      </UPricingPlans>
    </UContainer>

    <UPageSection>
      <UPageLogos>
        <UIcon
          v-for="icon in page.logos.icons"
          :key="icon"
          :name="icon"
          class="w-12 h-12 flex-shrink-0 text-muted"
        />
      </UPageLogos>
    </UPageSection>

    <UPageSection
      :title="page.faq.title"
      :description="page.faq.description"
    >
      <UAccordion
        :items="page.faq.items"
        :unmount-on-hide="false"
        :default-value="['0']"
        type="multiple"
        class="max-w-3xl mx-auto"
        :ui="{
          trigger: 'text-base text-highlighted',
          body: 'text-base text-muted'
        }"
      />
    </UPageSection>
  </div>
</template>

```

--------------------------------

### Create Nested Lists in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Shows how to create nested lists in Markdown by indenting sub-items with four spaces. Useful for complex hierarchical structures.

```markdown
- I'm a list item.
  - I'm a nested list item.
  - I'm another nested list item.
- I'm another list item.
```

--------------------------------

### Apply Bold Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Shows how to apply bold text formatting in Markdown using double asterisks. This is useful for emphasizing key terms.

```markdown
**bold**
```

--------------------------------

### Define Content Collections with Zod Validation - Nuxt.config.ts

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Defines type-safe content collections for documentation, blog posts, and pricing pages using Zod. It specifies schemas for each collection, including custom editors for media and icons, and enums for variants and colors. This enables robust validation and TypeScript inference.

```typescript
// content.config.ts
import { defineCollection, z } from '@nuxt/content'

const variantEnum = z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link'])
const colorEnum = z.enum(['primary', 'secondary', 'neutral', 'error', 'warning', 'success', 'info'])
const sizeEnum = z.enum(['xs', 'sm', 'md', 'lg', 'xl'])

const createLinkSchema = () => z.object({
  label: z.string().nonempty(),
  to: z.string().nonempty(),
  icon: z.string().optional().editor({ input: 'icon' }),
  size: sizeEnum.optional(),
  trailing: z.boolean().optional(),
  target: z.string().optional(),
  color: colorEnum.optional(),
  variant: variantEnum.optional()
})

export const collections = {
  // Documentation pages
  docs: defineCollection({
    source: '1.docs/**/*',
    type: 'page'
  }),

  // Blog posts with metadata
  posts: defineCollection({
    source: '3.blog/**/*',
    type: 'page',
    schema: z.object({
      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().editor({ input: 'media' })
          })
        })
      ),
      date: z.date(),
      badge: z.object({ label: z.string().nonempty() })
    })
  }),

  // Pricing page configuration
  pricing: defineCollection({
    source: '2.pricing.yml',
    type: 'page',
    schema: z.object({
      plans: z.array(
        z.object({
          title: z.string().nonempty(),
          description: z.string().nonempty(),
          price: z.object({
            month: z.string().nonempty(),
            year: z.string().nonempty()
          }),
          billing_period: z.string().nonempty(),
          billing_cycle: z.string().nonempty(),
          button: createLinkSchema(),
          features: z.array(z.string().nonempty()),
          highlight: z.boolean().optional()
        })
      ),
      logos: z.object({
        title: z.string().nonempty(),
        icons: z.array(z.string())
      }),
      faq: z.object({
        title: z.string().nonempty(),
        description: z.string().nonempty(),
        items: z.array(
          z.object({
            label: z.string().nonempty(),
            content: z.string().nonempty()
          })
        )
      })
    })
  })
}

```

--------------------------------

### Create Subscript Text in Markdown using HTML

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates creating subscript text in Markdown using the HTML `<sub>` tag. Useful for indices or chemical formulas.

```markdown
<sub>subscript</sub>
```

--------------------------------

### Embed YouTube Video using Nuxt UI Components

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/4.images-embeds.md

Illustrates embedding a YouTube video using Nuxt UI's iframe component. This allows for multimedia content integration. Dependencies: Nuxt UI. Input: YouTube embed URL and attributes. Output: Embedded video player.

```mdc
:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}
```

--------------------------------

### Apply Strikethrough Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates applying strikethrough text formatting in Markdown using double tildes. This is typically used for indicating removed or incorrect text.

```markdown
~~strike~~
```

--------------------------------

### Display Project Structure with CodeTree

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/2.code-blocks.md

The `code-tree` component displays code blocks in a file tree view, ideal for visualizing project structures and file relationships. It takes file content as direct children.

```ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],

  css: ['~/assets/css/main.css']
})
```

```css
@import "tailwindcss";
@import "@nuxt/ui";
```

```ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
```

```vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.63",
    "@nuxt/content": "^3.6.3",
    "@nuxt/ui": "^4.0.0",
    "nuxt": "^4.1.0"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.9.0",
    "eslint": "^9.34.0",
    "typescript": "^5.9.2",
    "vue-tsc": "^3.0.6"
  }
}
```

```json
{
  "extends": "./.nuxt/tsconfig.json"
}
```

```md
# Nuxt Minimal Starter

Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
```

--------------------------------

### Icon: Insert icons from icon libraries

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

The `icon` component is used to display icons from various icon libraries, identified by their `name` prop. It's a simple way to add visual elements to your interface or documentation, enhancing clarity and aesthetics. No other props or slots are required for basic usage.

```mdc
:icon{name="i-simple-icons-nuxtdotjs"}

```

--------------------------------

### Apply Italic Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Demonstrates applying italic text formatting in Markdown using single asterisks. This is useful for subtle emphasis or foreign words.

```markdown
*italic*
```

--------------------------------

### User Sign Up Form with Zod Validation - Vue.js

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

A Vue.js component for user registration using Zod for schema validation. It includes fields for name, email, and password, along with social login providers. The component handles form submission and displays toast notifications.

```vue
<!-- app/pages/signup.vue -->
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

definePageMeta({
  layout: 'auth'
})

useSeoMeta({
  title: 'Sign up',
  description: 'Create an account to get started'
})

const toast = useToast()

const fields = [{
  name: 'name',
  type: 'text' as const,
  label: 'Name',
  placeholder: 'Enter your name'
}, {
  name: 'email',
  type: 'text' as const,
  label: 'Email',
  placeholder: 'Enter your email'
}, {
  name: 'password',
  label: 'Password',
  type: 'password' as const,
  placeholder: 'Enter your password'
}]

const providers = [{
  label: 'Google',
  icon: 'i-simple-icons-google',
  onClick: () => {
    toast.add({ title: 'Google', description: 'Login with Google' })
  }
}, {
  label: 'GitHub',
  icon: 'i-simple-icons-github',
  onClick: () => {
    toast.add({ title: 'GitHub', description: 'Login with GitHub' })
  }
}]

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

function onSubmit(payload: FormSubmitEvent<Schema>) {
  console.log('Submitted', payload)
  // Handle user registration
  // Example: await $fetch('/api/auth/signup', { method: 'POST', body: payload.data })
}
</script>

<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    :providers="providers"
    title="Create an account"
    :submit="{ label: 'Create account' }"
    @submit="onSubmit"
  >
    <template #description>
      Already have an account? <ULink
        to="/login"
        class="text-primary font-medium"
      >Login</ULink>.
    </template>

    <template #footer>
      By signing up, you agree to our <ULink
        to="/"
        class="text-primary font-medium"
      >Terms of Service</ULink>.
    </template>
  </UAuthForm>
</template>

```

--------------------------------

### Field: Describe a specific field or parameter

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/3.prose-components.md

The `field` component is used to describe a specific field, property, or parameter, often within documentation for APIs or configurations. It accepts `name`, `type`, and `required` props. The description itself can be provided via the default slot, supporting full Markdown.

```mdc
::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

```

--------------------------------

### Login Page with Zod Validation and OAuth - Vue

Source: https://context7.com/nuxt-ui-templates/saas/llms.txt

Creates a login form using Nuxt UI's UAuthForm component. It integrates Zod for form validation, defines fields, and includes OAuth provider buttons for authentication. The page uses a dedicated authentication layout and includes SEO meta tags.

```vue
<!-- app/pages/login.vue -->
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

definePageMeta({
  layout: 'auth'  // Use authentication layout (centered card)
})

useSeoMeta({
  title: 'Login',
  description: 'Login to your account to continue'
})

const toast = useToast()

// Form field configuration
const fields = [{
  name: 'email',
  type: 'text' as const,
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password' as const,
  placeholder: 'Enter your password'
}, {
  name: 'remember',
  label: 'Remember me',
  type: 'checkbox' as const
}]

// OAuth provider buttons
const providers = [{
  label: 'Google',
  icon: 'i-simple-icons-google',
  onClick: () => {
    toast.add({ title: 'Google', description: 'Login with Google' })
  }
}, {
  label: 'GitHub',
  icon: 'i-simple-icons-github',
  onClick: () => {
    toast.add({ title: 'GitHub', description: 'Login with GitHub' })
  }
}]

// Zod validation schema
const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

function onSubmit(payload: FormSubmitEvent<Schema>) {
  console.log('Submitted', payload)
  // Handle authentication logic here
  // Example: await $fetch('/api/auth/login', { method: 'POST', body: payload.data })
}
</script>

<template>
  <UAuthForm
    :fields="fields"
    :schema="schema"
    :providers="providers"
    title="Welcome back"
    icon="i-lucide-lock"
    @submit="onSubmit"
  >
    <template #description>
      Don't have an account? <ULink
        to="/signup"
        class="text-primary font-medium"
      >Sign up</ULink>.
    </template>

    <template #password-hint>
      <ULink
        to="/"
        class="text-primary font-medium"
        tabindex="-1"
      >Forgot password?</ULink>
    </template>

    <template #footer>
      By signing in, you agree to our <ULink
        to="/"
        class="text-primary font-medium"
      >Terms of Service</ULink>.
    </template>
  </UAuthForm>
</template>

```

--------------------------------

### Combine Italic and Strikethrough Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Illustrates combining italic and strikethrough text formatting in Markdown. Useful for indicating a change from italicized text.

```markdown
~~*italic*~~
```

--------------------------------

### Combine Bold and Italic Text Formatting in Markdown

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/1.markdown-syntax.md

Shows how to combine bold and italic text formatting in Markdown using both double asterisks and single asterisks. Useful for strong emphasis.

```markdown
**_bold italic_**
```

--------------------------------

### Configure Code Block Icons

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/2.code-blocks.md

Some icons are already defined by default, but you can add more in your `app.config.ts` through the `ui.prose.codeIcon` key. This configuration allows for customization of icons used in code blocks, enhancing visual identification.

```typescript
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})
```

--------------------------------

### Display Inline Code

Source: https://github.com/nuxt-ui-templates/saas/blob/main/content/1.docs/2.essentials/2.code-blocks.md

Use `inline code` to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. This component does not have external dependencies and accepts a string as input.

```markdown
`inline code`
```