### Vue Component with Script Setup

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/5.code.md

Example of a Vue 3 component using <script setup> to manage reactive state and define methods, rendered within a template.

```vue
<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>
```

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

### Basic useTour Implementation

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/3.composables/use-tour.md

This example demonstrates how to use the `useTour` composable to create a simple guided tour. It defines tour steps with CSS selectors and uses a `UPopover` to display tour content and navigation buttons.

```vue
<script setup lang="ts">
const card = useTemplateRef('card')

const tour = useTour([
  { target: '#cta', title: 'Get started' },
  { target: () => card.value, title: 'Profile', side: 'right' },
  { target: null, title: 'All set' }
])
</script>

<template>
  <UButton @click="tour.start()">Start tour</UButton>

  <UPopover :open="tour.open.value" :reference="tour.reference.value" :dismissible="false">
    <template #content>
      <!-- your content + buttons -->
      <UButton :disabled="!tour.hasPrev.value" @click="tour.prev()">Back</UButton>
      <UButton @click="tour.next()">{{ tour.hasNext.value ? 'Next' : 'Finish' }}</UButton>
    </template>
  </UPopover>
</template>
```

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

### InputDate with min/max dates example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/input-date.md

Configuration for the min/max dates example component.

```yaml
name: 'input-date-min-max-dates-example'
```

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

### InputDate as a date picker example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/input-date.md

Configuration for the date picker example component.

```yaml
name: 'input-date-date-picker-example'
```

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

### Install Nuxt UI Skill from URL with Skills CLI

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/7.ai/3.skills.md

If cloning from GitHub is slow, use this command to install the Nuxt UI skill directly from its web URL. This provides an alternative installation source.

```bash
npx skills add https://ui.nuxt.com
```

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

### Pagination Component Usage Examples

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pagination.md

Practical examples demonstrating how to use the Pagination component with different configurations and features.

```APIDOC
## Basic Usage

### Control Current Page

Use the `default-page` prop or the `v-model:page` directive to control the current page.

```vue
<template>
  <Pagination v-model:page="currentPage" :total="100" />
</template>

<script setup>
const currentPage = ref(5)
</script>
```

### Set Total Items

Use the `total` prop to set the total number of items in the list.

```vue
<template>
  <Pagination v-model:page="page" :total="100" />
</template>
```

### Configure Items Per Page

Use the `items-per-page` prop to set the number of items per page. Defaults to `10`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :items-per-page="20" />
</template>
```

### Adjust Sibling Count

Use the `sibling-count` prop to set the number of siblings to show. Defaults to `2`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :sibling-count="1" />
</template>
```

### Show Edges

Use the `show-edges` prop to always show the ellipsis, first and last pages. Defaults to `false`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :show-edges="true" :sibling-count="1" />
</template>
```

### Hide Controls

Use the `show-controls` prop to show or hide the first, prev, next and last buttons. Defaults to `true`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :show-controls="false" :show-edges="true" />
</template>
```

### Styling with Color

Use the `color` prop to set the color of the inactive controls. Defaults to `neutral`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" color="primary" />
</template>
```

### Styling with Variant

Use the `variant` prop to set the variant of the inactive controls. Defaults to `outline`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" variant="subtle" />
</template>
```

### Active Control Color

Use the `active-color` prop to set the color of the active control. Defaults to `primary`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :active-color="neutral" />
</template>
```

### Active Control Variant

Use the `active-variant` prop to set the variant of the active control. Defaults to `solid`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :active-variant="subtle" />
</template>
```

### Control Size

Use the `size` prop to set the size of the controls. Defaults to `md`.

```vue
<template>
  <Pagination v-model:page="page" :total="100" size="xl" />
</template>
```

### Disabled State

Use the `disabled` prop to disable the pagination controls.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :disabled="true" />
</template>
```

### With Links

Use the `to` prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.

```vue
<template>
  <Pagination v-model:page="page" :total="100" :to="(page) => `/results?page=${page}#with-links`" />
</template>
```
```

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

### InputDate as a date range picker example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/input-date.md

Configuration for the date range picker example component.

```yaml
name: 'input-date-date-range-picker-example'
```

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

### Install Dependencies

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/4.contribution.md

Install project dependencies using pnpm, the recommended package manager for this project.

```sh
pnpm install
```

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

### Editor Toolbar Configuration Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/editor.md

Example implementation showing how to configure toolbar items using default handlers with the UEditor component.

```APIDOC
## UEditor Toolbar Configuration

### Description
Example of configuring an Editor toolbar with default handler items.

### Implementation

#### Setup
```vue
<script setup lang="ts">
import type { EditorToolbarItem } from '@nuxt/ui'

const value = ref('<h1>Hello World</h1>\n')

const items: EditorToolbarItem[] = [
  { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
  { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
  { kind: 'heading', level: 1, icon: 'i-lucide-heading-1' },
  { kind: 'heading', level: 2, icon: 'i-lucide-heading-2' },
  { kind: 'textAlign', align: 'left', icon: 'i-lucide-align-left' },
  { kind: 'textAlign', align: 'center', icon: 'i-lucide-align-center' },
  { kind: 'bulletList', icon: 'i-lucide-list' },
  { kind: 'orderedList', icon: 'i-lucide-list-ordered' },
  { kind: 'blockquote', icon: 'i-lucide-quote' },
  { kind: 'link', icon: 'i-lucide-link' }
]
</script>
```

#### Template
```vue
<template>
  <UEditor v-slot="{ editor }" v-model="value">
    <UEditorToolbar :editor="editor" :items="items" />
  </UEditor>
</template>
```

### Configuration Details

#### EditorToolbarItem Properties
- **kind** (string) - Required - The handler type to execute
- **mark** (string) - Optional - For mark handler: 'bold', 'italic', 'strike', 'code', 'underline'
- **level** (number) - Optional - For heading handler: 1-6
- **align** (string) - Optional - For textAlign handler: 'left', 'center', 'right', 'justify'
- **icon** (string) - Optional - Icon class for toolbar button display
- **pos** (number) - Optional - For node manipulation handlers: position in document

### Notes
- The `textAlign` handler requires the textAlign extension to be installed
- Multiple toolbar items can reference the same handler with different configurations
- Icons use Lucide icon naming convention (e.g., 'i-lucide-bold')
```

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

### Start your development server

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/steps.md

Run the development server using npm

```bash
npm run dev
```

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

### Input Component Example References

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/input.md

MDC macros used to embed interactive examples for keyboard shortcuts, masking, and form layouts.

```markdown
::component-example
---
name: 'input-kbd-example'
---
::
```

```markdown
::component-example
---
name: 'input-mask-example'
---
::
```

```markdown
::component-example
---
name: 'input-floating-label-example'
---
::
```

```markdown
::component-example
---
name: 'input-form-field-example'
---
::
```

```markdown
::component-example
---
name: 'input-field-group-example'
---
::
```

```markdown
::component-example
---
collapse: true
name:
```

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

### Install Iconify Collections for Nuxt UI

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/guidelines/conventions.md

Install icon collections locally for improved SSR reliability and performance.

```bash
pnpm i @iconify-json/lucide
pnpm i @iconify-json/simple-icons
```

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

### Accordion Drag and Drop Example Configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/accordion.md

Configure an Accordion example demonstrating drag and drop functionality using the `useSortable` composable from `@vueuse/integrations`.

```yaml
name: 'accordion-drag-and-drop-example'
```

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

### MDC Link Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to create a hyperlink using Markdown Component (MDC) syntax.

```mdc
[Nuxt documentation](https://nuxt.com)
```

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

### Install @nuxt/content

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/6.integrations/5.content.md

Add the @nuxt/content package to your project using your preferred package manager.

```bash
pnpm add @nuxt/content
```

```bash
yarn add @nuxt/content
```

```bash
npm install @nuxt/content
```

```bash
bun add @nuxt/content
```

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

### Basic Code Preview Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/code-preview.md

An example demonstrating the `CodePreview` component, showing how it can display a live preview of inline code along with its source.

```mdc
::code-preview
`inline code`

#code
```mdc
`inline code`
```
::
```

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

### Accordion Body Slot Example Configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/accordion.md

Configure an Accordion example that customizes the body of each item using the `#body` slot.

```yaml
name: 'accordion-body-slot-example'
props:
  class: 'px-4'
```

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

### Accordion Content Slot Example Configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/accordion.md

Configure an Accordion example that customizes the content of each item using the `#content` slot, providing full control over styling.

```yaml
name: 'accordion-content-slot-example'
props:
  class: 'px-4'
```

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

### Install Nuxt UI dependencies

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/SKILL.md

Install the required packages for Nuxt UI and Tailwind CSS using pnpm.

```bash
pnpm add @nuxt/ui tailwindcss
```

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

### Install Nuxt UI Skill using Skills CLI

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/7.ai/3.skills.md

Use this command to add the Nuxt UI skill to your AI agent's context. This is the default installation method.

```bash
npx skills add nuxt/ui
```

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

### Install Iconify collection with package managers

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/6.integrations/1.icons/1.nuxt.md

Install icon data locally for faster and more reliable icon serving on both SSR and client-side. Replace {collection_name} with the desired collection (e.g., 'uil' for i-uil-github).

```bash
pnpm i @iconify-json/{collection_name}
```

```bash
yarn add @iconify-json/{collection_name}
```

```bash
npm install @iconify-json/{collection_name}
```

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

### Install AI SDK MCP Client

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/chat.md

Install the '@ai-sdk/mcp' package using npm, pnpm, or yarn to enable Model Context Protocol features.

```bash
npm install @ai-sdk/mcp
```

```bash
pnpm add @ai-sdk/mcp
```

```bash
yarn add @ai-sdk/mcp
```

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

### Accordion Markdown Content Example Configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/accordion.md

Configure an Accordion example to render markdown content within items using the MDC component from `@nuxtjs/mdc`.

```yaml
collapse: true
name: 'accordion-markdown-example'
class: 'px-8'
```

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

### Install Nuxt UI Package with Package Managers

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Install the Nuxt UI and Tailwind CSS packages using your preferred package manager.

```bash
pnpm add @nuxt/ui tailwindcss
```

```bash
yarn add @nuxt/ui tailwindcss
```

```bash
npm install @nuxt/ui tailwindcss
```

```bash
bun add @nuxt/ui tailwindcss
```

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

### Accordion Control Active Item(s) Example Configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/accordion.md

Configure an Accordion example to control active items using `default-value` or `v-model`, matching items by their `value` or index.

```yaml
name: 'accordion-model-value-example'
props:
  class: 'px-4'
```

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

### Install Dependencies with Package Managers

Source: https://github.com/nuxt/ui/blob/v4/docs/content/blog/how-to-build-an-ai-chat.md

Install Nuxt UI, AI SDK, and related dependencies. Choose the command for your preferred package manager (pnpm, yarn, npm, or bun).

```bash
pnpm add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod
```

```bash
yarn add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod
```

```bash
npm install @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod
```

```bash
bun add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod
```

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

### Empty Component Usage Examples

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/empty.md

Common usage patterns and examples for implementing the Empty component with various configurations including title, description, icon, avatar, actions, variant, and size options.

```APIDOC
## Empty Component Usage Examples

### Basic Empty State

```vue
<u-empty
  icon="i-lucide-file"
  title="No projects found"
  description="It looks like you haven't added any projects. Create one to get started."
/>
```

### Empty State with Actions

```vue
<u-empty
  icon="i-lucide-file"
  title="No projects found"
  description="It looks like you haven't added any projects. Create one to get started."
  :actions="[
    { icon: 'i-lucide-plus', label: 'Create new' },
    { icon: 'i-lucide-refresh-cw', label: 'Refresh', color: 'neutral', variant: 'subtle' }
  ]"
/>
```

### Empty State with Avatar

```vue
<u-empty
  :avatar="{ src: 'https://github.com/nuxt.png' }"
  title="No projects found"
  description="It looks like you haven't added any projects. Create one to get started."
/>
```

### Naked Variant Empty State

```vue
<u-empty
  variant="naked"
  icon="i-lucide-bell"
  title="No notifications"
  description="You're all caught up. New notifications will appear here."
  :actions="[
    { icon: 'i-lucide-refresh-cw', label: 'Refresh', color: 'neutral', variant: 'subtle' }
  ]"
/>
```

### Large Size Empty State

```vue
<u-empty
  size="xl"
  icon="i-lucide-bell"
  title="No notifications"
  description="You're all caught up. New notifications will appear here."
  :actions="[
    { icon: 'i-lucide-refresh-cw', label: 'Refresh', color: 'neutral', variant: 'subtle' }
  ]"
/>
```

### Empty State with Custom Slots

The Empty component supports slots for creating more complex empty state layouts with custom content.
```

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

### Chat Interface Starting Point

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/chat-prompt.md

Example of using ChatPrompt as a starting point for a chat interface, handling message submission and navigation.

```vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

const chat = new Chat()

async function onSubmit() {
  chat.sendMessage({ text: input.value })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <UDashboardPanel>
    <template #body>
      <UContainer>
        <h1>How can I help you today?</h1>

        <UChatPrompt v-model="input" @submit="onSubmit">
          <UChatPromptSubmit :status="chat.status" />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>
```

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

### Start Development Server (Docs)

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/4.contribution.md

Run the development server specifically for working on the documentation located in the 'docs' folder.

```sh
pnpm run docs
```

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

### Create Nuxt Project with Starter Template

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Use this command to create a new Nuxt project with the UI Starter template.

```bash
npm create nuxt@latest -- -t ui
```

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

### app.vue

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/content-search.md

Example demonstrating how to use the navigation prop with queryCollectionNavigation.

```vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :navigation="navigation"
      />
    </ClientOnly>
  </UApp>
</template>
```

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

### Installation Commands

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/code-group.md

Commands to add @nuxt/ui using different package managers.

```bash
pnpm add @nuxt/ui
```

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

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

```bash
bun add @nuxt/ui
```

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

### Use Nuxt UI Vue Plugin

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/2.vue.md

Integrate the Nuxt UI Vue plugin into your main application entry point. Examples are provided for plain Vite, Laravel Inertia, and AdonisJS Inertia setups.

```typescript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')
```

```typescript
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import ui from '@nuxt/ui/vue-plugin'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Nuxt UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `./pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ui)
      .mount(el)
  }
})
```

```typescript
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import ui from '@nuxt/ui/vue-plugin'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Nuxt UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob<DefineComponent>('../pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ui)
      .mount(el)
  }
})
```

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

### UAuthForm Complete Login Example

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/recipes/auth.md

Full-featured login form with email/password fields, checkbox, Zod validation, and social provider buttons. Use UAuthForm when you need a polished, pre-built auth interface with minimal setup.

```vue
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'

const fields: AuthFormField[] = [{
  name: 'email',
  type: 'email',
  label: 'Email',
  placeholder: 'Enter your email',
  required: true
}, {
  name: 'password',
  label: 'Password',
  type: 'password',
  placeholder: 'Enter your password',
  required: true
}, {
  name: 'remember',
  label: 'Remember me',
  type: 'checkbox'
}]

const providers = [{
  label: 'Google',
  icon: 'i-simple-icons-google',
  onClick: () => navigateTo('/auth/google', { external: true })
}, {
  label: 'GitHub',
  icon: 'i-simple-icons-github',
  onClick: () => navigateTo('/auth/github', { external: true })
}]

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

type Schema = z.output<typeof schema>

function onSubmit(payload: FormSubmitEvent<Schema>) {
  // payload.data contains validated fields
}
</script>

<template>
  <div class="flex min-h-dvh items-center justify-center">
    <UPageCard class="w-full max-w-md">
      <UAuthForm
        :schema="schema"
        :fields="fields"
        :providers="providers"
        title="Welcome back!"
        description="Sign in to your account."
        icon="i-lucide-lock"
        @submit="onSubmit"
      >
        <template #password-hint>
          <ULink to="/forgot-password" class="text-primary font-medium">Forgot password?</ULink>
        </template>
        <template #footer>
          Don't have an account? <ULink to="/signup" class="text-primary font-medium">Sign up</ULink>.
        </template>
      </UAuthForm>
    </UPageCard>
  </div>
</template>
```

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

### Create Nuxt UI Vue Starter Project

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/2.vue.md

Use this command to create a new Nuxt UI project with the starter template.

```bash
npm create nuxt@latest -- --no-modules -t ui-vue
```

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

### Shortcuts

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/callout.md

Example demonstrating the usage of note, tip, warning, and caution shortcuts in MDC.

```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.
::
```

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

### Define an AI SDK Tool for Weather Data

Source: https://github.com/nuxt/ui/blob/v4/docs/content/blog/how-to-build-an-ai-chat.md

Extend your chatbot with AI SDK tools to fetch real-time data. This example defines a 'weatherTool' using 'ai' and 'zod' to get current weather for a specified location.

```ts
import { tool } from 'ai'
import { z } from 'zod'

const weatherTool = tool({
  description: 'Get the current weather for a location',
  parameters: z.object({
    location: z.string().describe('The city name')
  }),
  execute: async ({ location }) => {
    // Fetch weather data from an API
    return { location, temperature: 22, condition: 'Sunny' }
  }
})
```

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

### Initializing Nuxt UI Projects from Official Templates

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/guidelines/conventions.md

Quickly bootstrap new Nuxt UI projects using `npx nuxi init` with various official templates for different application types like dashboards, docs, or SaaS.

```bash
npx nuxi@latest init -t ui              # Starter
npx nuxi@latest init -t ui/dashboard    # Dashboard
npx nuxi@latest init -t ui/docs         # Docs (Nuxt Content)
npx nuxi@latest init -t ui/landing      # Landing page
npx nuxi@latest init -t ui/saas         # SaaS (landing + pricing + docs + blog)
npx nuxi@latest init -t ui/chat         # AI chat (Vercel AI SDK)
npx nuxi@latest init -t ui/editor       # Rich text editor
npx nuxi@latest init -t ui/portfolio    # Portfolio
npx nuxi@latest init -t ui/changelog    # Changelog
```

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

### Start Development Server (Playground)

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/4.contribution.md

Run the development server for the Nuxt components playground to test and develop components.

```sh
pnpm run dev
```

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

### InputDate with unavailable dates example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/input-date.md

Configuration for the unavailable dates example component.

```yaml
name: 'input-date-unavailable-dates-example'
```

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

### App Shell Configuration for Documentation

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/layouts/docs.md

Main entry point providing navigation data and setting up the header, main content area, and search functionality.

```vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))

provide('navigation', navigation)

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/docs/getting-started',
  active: route.path.startsWith('/docs')
}])
</script>

<template>
  <UApp>
    <UHeader>
      <template #title>
        <Logo class="h-6 w-auto" />
      </template>

      <UNavigationMenu :items="items" />

      <template #right>
        <UContentSearchButton />
        <UColorModeButton />
      </template>
    </UHeader>

    <UMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </UMain>

    <UFooter />

    <UContentSearch :navigation="navigation" />
  </UApp>
</template>
```

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

### Initialize Nuxt AI Chat Project

Source: https://github.com/nuxt/ui/blob/v4/docs/content/blog/how-to-build-an-ai-chat.md

Create a new Nuxt project and navigate to the project directory.

```bash
npx nuxi@latest init nuxt-ai-chat
cd nuxt-ai-chat
```

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

### Field Group Usage Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/field-group.md

An example demonstrating how to group fields using the `::field-group` and `::field` components in MDC.

```mdc
::field-group
  ::field{name="analytics" type="boolean"}
    Default to `false` - Enables analytics for your project (coming soon).
  ::

  ::field{name="blob" type="boolean"}
    Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
  ::

  ::field{name="cache" type="boolean"}
    Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
  ::

  ::field{name="database" type="boolean"}
    Default to `false` - Enables SQL database to store your application's data.
  ::
::
```

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

### MDC Paragraph Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to define a standard paragraph of text using Markdown Component (MDC) syntax.

```mdc
Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
```

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

### Using the Compact Prop for PricingPlans

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pricing-plans.md

Shows how to apply the `compact` prop to reduce padding between pricing plans, especially when one plan is scaled for better visual balance.

```yaml
compact: true
plans:
  - title: Solo
    description: 'Tailored for indie hackers.'
    price: '$249'
    features:
      - 'One developer'
      - 'Lifetime access'
    button:
      label: 'Buy now'
  - title: Startup
    description: 'Best suited for small teams.'
    price: '$499'
    scale: true
    features:
      - 'Up to 5 developers'
      - 'Everything in Solo'
    button:
      label: 'Buy now'
  - title: Organization
    description: 'Ideal for larger teams and organizations.'
    price: '$999'
    features:
      - 'Up to 20 developers'
      - 'Everything in Startup'
    button:
      label: 'Buy now'
```

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

### MDC Heading 4 Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to define a fourth-level heading using Markdown Component (MDC) syntax.

```mdc
#### Getting started
```

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

### MDC Heading 3 Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to define a third-level heading using Markdown Component (MDC) syntax.

```mdc
### Enhanced components
```

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

### Start Development Server (Vue Playground)

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/4.contribution.md

Run the development server for the Vue components playground to test and develop Vue components.

```sh
pnpm run dev:vue
```

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

### MDC Heading 2 Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to define a second-level heading using Markdown Component (MDC) syntax.

```mdc
## What's new in v4?
```

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

### Create Nuxt Project with Landing Template

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Use this command to create a new Nuxt project with the UI Landing template.

```bash
npm create nuxt@latest -- -t ui/landing
```

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

### MDC Heading 1 Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to define a top-level heading using Markdown Component (MDC) syntax.

```mdc
# Nuxt UI
```

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

### Install AI SDK and Comark dependencies

Source: https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/references/layouts/chat.md

Add necessary packages for building AI chat interfaces in either a Nuxt.js or Vue (Vite) project.

```bash
pnpm add ai @ai-sdk/gateway @ai-sdk/vue @comark/nuxt
```

```bash
pnpm add ai @ai-sdk/gateway @ai-sdk/vue @comark/vue
```

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

### PricingTable slot name examples

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pricing-table.md

Examples of specific and generic slot names used to target tiers, sections, and features.

```html
#team-title
```

```html
#solo-price
```

```html
#section-features-title
```

```html
#feature-developers-title
```

```html
#feature-value
```

```html
#section-premium-features-title
```

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

### Creating and Opening an Overlay

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/3.composables/use-overlay.md

Demonstrates how to create a modal overlay instance using useOverlay and then open it with specific props. This is useful for displaying dynamic content in a modal.

```vue
<script setup lang="ts">
import { LazyModalExample } from '#components'

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

function openModal() {
  modal.open({
    title: 'Welcome'
  })
}
</script>
```

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

### Actions Prop Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/chat-message.md

Example of using the `actions` prop to define a 'Copy to clipboard' button for a chat message.

```javascript
{
  actions: [
    {
      label: 'Copy to clipboard',
      icon: 'i-lucide-copy'
    }
  ],
  parts: [
    {
      type: 'text',
      id: '1',
      text: 'Nuxt UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.'
    }
  ],
  role: 'user',
  id: '1'
}
```

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

### Create Nuxt Project with SaaS Template

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Use this command to create a new Nuxt project with the UI SaaS template.

```bash
npm create nuxt@latest -- -t ui/saas
```

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

### MDC Blockquote Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to create a blockquote for important information or quotes using Markdown Component (MDC) syntax.

```mdc
> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
```

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

### MDC Emphasized Text Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to apply emphasis formatting to text using Markdown Component (MDC) syntax.

```mdc
*Emphasized text*
```

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

### PricingTable component configuration

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pricing-table.md

Full configuration example for tiers and sections, including pricing details, billing cycles, and feature availability mapping.

```yaml
prettier: true
collapse: true
external:
  - tiers
  - sections
externalTypes:
  - PricingTableTier[]
  - PricingTableSection[]
hide:
  - class
ignore:
  - tiers
  - sections
props:
  tiers:
    - id: 'solo'
      title: 'Solo'
      price: '$249'
      description: 'For indie hackers.'
      billingCycle: '/month'
      button:
        label: 'Buy now'
        variant: 'subtle'
    - id: 'team'
      title: 'Team'
      price: '$499'
      description: 'For growing teams.'
      billingCycle: '/month'
      button:
        label: 'Buy now'
    - id: 'enterprise'
      title: 'Enterprise'
      price: 'Custom'
      description: 'For large organizations.'
      button:
        label: 'Contact sales'
        color: 'neutral'
  sections:
    - title: 'Features'
      features:
        - title: 'Number of developers'
          tiers:
            solo: '1'
            team: '5'
            enterprise: 'Unlimited'
        - title: 'Projects'
          tiers:
            solo: true
            team: true
            enterprise: true
    - title: 'Security'
      features:
        - title: 'SSO'
          tiers:
            solo: false
            team: true
            enterprise: true
```

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

### MDC Strong Text Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to apply strong formatting to text using Markdown Component (MDC) syntax.

```mdc
**Strong text**
```

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

### Install Nuxt I18n package

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/6.integrations/4.i18n/1.nuxt.md

Install the `@nuxtjs/i18n` module using your preferred package manager to enable dynamic locale switching.

```bash
pnpm add @nuxtjs/i18n
```

```bash
yarn add @nuxtjs/i18n
```

```bash
npm install @nuxtjs/i18n
```

```bash
bun add @nuxtjs/i18n
```

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

### Create Nuxt Project with Docs Template

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Use this command to create a new Nuxt project with the UI Docs template.

```bash
npm create nuxt@latest -- -t ui/docs
```

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

### Basic PricingPlan Usage

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pricing-plan.md

Configure a complete pricing plan with title, description, price, discount, billing cycle, and features.

```yaml
title: 'Solo'
description: 'For bootstrappers and indie hackers.'
price: '$249'
discount: '$199'
billing-cycle: '/month'
badge: 'Most popular'
features:
  - 'One developer'
  - 'Unlimited projects'
  - 'Access to GitHub repository'
  - 'Unlimited patch & minor updates'
  - 'Lifetime access'
button:
  label: 'Buy now'
class: 'w-96'
```

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

### Install Vue I18n package

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/6.integrations/4.i18n/2.vue.md

Install vue-i18n version 11 using your preferred package manager for dynamic locale switching support.

```bash
pnpm add vue-i18n@11
```

```bash
yarn add vue-i18n@11
```

```bash
npm install vue-i18n@11
```

```bash
bun add vue-i18n@11
```

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

### MDC Horizontal Rule Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/4.typography/2.headers-and-text.md

This example demonstrates how to insert a horizontal rule to separate content sections using Markdown Component (MDC) syntax.

```mdc
---
```

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

### useTour API

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/3.composables/use-tour.md

The `useTour` composable initializes a guided tour with a list of steps and optional configuration. It returns reactive state and methods to control the tour's progression and appearance.

```APIDOC
## useTour(steps, options?)

### Description
Initializes a guided tour with a list of steps and optional configuration. It returns reactive state and methods to control the tour's progression and appearance.

### Parameters

#### steps
- **Type**: `MaybeRefOrGetter<TourStep[]>`
- **Required**: Yes
- **Description**: The list of tour steps. Can be a static array, a `ref`, or a getter for reactive steps.
  - **target**: `MaybeRefOrGetter<string | ReferenceElement | null | undefined>` - The element the step anchors to. Accepts a CSS selector (`'#id'`, `'.class'`, or a bare id resolved as `#id`), an element, a virtual element, or a ref/getter returning one. Use `null` to center the step in the viewport.
  - **[key: string]**: `any` - Any additional fields (`title`, `body`, `side`, …) are passed through and available via `current`.

#### options
- **Type**: `UseTourOptions`
- **Description**: Configuration options for the tour.
  - **initialStep**: `number` - The step index the tour starts on. (Default: `0`)
  - **loop**: `boolean` - Loop back to the first step after the last one. (Default: `false`)
  - **scrollIntoView**: `boolean | ScrollIntoViewOptions` - Scroll the target into view when a step becomes active. (Default: `true`)

### Return

- **open**: `Ref<boolean>` - Whether the tour is currently open.
- **index**: `Ref<number>` - The current step index, clamped to the steps range.
- **current**: `ComputedRef<TourStep | undefined>` - The current step object, or `undefined` when there are no steps.
- **reference**: `ComputedRef<ReferenceElement | undefined>` - The resolved anchor for the current step, to pass to `<UPopover :reference>`.
- **total**: `ComputedRef<number>` - The total number of steps.
- **hasNext**: `ComputedRef<boolean>` - Whether a next step exists.
- **hasPrev**: `ComputedRef<boolean>` - Whether a previous step exists.
- **start**: `(index?: number) => void` - Open the tour, optionally at a given index.
- **next**: `() => void` - Go to the next step. Loops or finishes at the end depending on the `loop` option.
- **prev**: `() => void` - Go to the previous step.
- **goTo**: `(index: number) => void` - Jump to a specific step and open the tour.
- **finish**: `() => void` - Close the tour.
```

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

### CommandPalette Groups Configuration Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/command-palette.md

Example configuration showing a CommandPalette component with a users group containing items with avatars, labels, and suffixes.

```yaml
modelValue: {}
autofocus: false
groups:
  - id: 'users'
    label: 'Users'
    items:
      - label: 'Benjamin Canac'
        suffix: 'benjamincanac'
        avatar:
          src: 'https://github.com/benjamincanac.png'
          loading: lazy
      - label: 'Romain Hamel'
        suffix: 'romhml'
        avatar:
          src: 'https://github.com/romhml.png'
          loading: lazy
      - label: 'Sébastien Chopin'
        suffix: 'atinux'
        avatar:
          src: 'https://github.com/atinux.png'
          loading: lazy
      - label: 'Hugo Richard'
        suffix: 'HugoRCD'
        avatar:
          src: 'https://github.com/HugoRCD.png'
          loading: lazy
      - label: 'Sandro Circi'
        suffix: 'sandros94'
        avatar:
          src: 'https://github.com/sandros94.png'
          loading: lazy
      - label: 'Daniel Roe'
        suffix: 'danielroe'
        avatar:
          src: 'https://github.com/danielroe.png'
          loading: lazy
      - label: 'Jakub Michálek'
        suffix: 'J-Michalek'
        avatar:
          src: 'https://github.com/J-Michalek.png'
          loading: lazy
      - label: 'Eugen Istoc'
        suffix: 'genu'
        avatar:
          src: 'https://github.com/genu.png'
          loading: lazy
class: 'flex-1'
```

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

### Create New Components with CLI

Source: https://github.com/nuxt/ui/blob/v4/AGENTS.md

Command to scaffold new components using the Nuxt UI CLI.

```bash
nuxt-ui make component <name> [options]
```

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

### Basic PricingTable Example

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/pricing-table.md

Displays a responsive pricing table with multiple tiers, features, and call-to-action buttons. The layout automatically adjusts for desktop and mobile views.

```vue
<script setup lang="ts">
const tiers = [
  {
    id: 'solo',
    title: 'Solo',
    description: 'For indie hackers.',
    price: '$249',
    billingCycle: '/month',
    billingPeriod: 'billed annually',
    badge: 'Most popular',
    button: {
      label: 'Buy now',
      variant: 'subtle'
    }
  },
  {
    id: 'team',
    title: 'Team',
    description: 'For growing teams.',
    price: '$499',
    billingCycle: '/month',
    billingPeriod: 'billed annually',
    button: {
      label: 'Buy now'
    },
    highlight: true
  },
  {
    id: 'enterprise',
    title: 'Enterprise',
    description: 'For large organizations.',
    price: 'Custom',
    button: {
      label: 'Contact sales',
      color: 'neutral'
    }
  }
]

const sections = [
  {
    title: 'Features',
    features: [
      {
        title: 'Number of developers',
        tiers: {
          solo: '1',
          team: '5',
          enterprise: 'Unlimited'
        }
      },
      {
        title: 'Projects',
        tiers: {
          solo: true,
          team: true,
          enterprise: true
        }
      },
      {
        title: 'GitHub repository access',
        tiers: {
          solo: true,
          team: true,
          enterprise: true
        }
      },
      {
        title: 'Updates',
        tiers: {
          solo: 'Patch & minor',
          team: 'All updates',
          enterprise: 'All updates'
        }
      },
      {
        title: 'Support',
        tiers: {
          solo: 'Community',
          team: 'Priority',
          enterprise: '24/7'
        }
      }
    ]
  },
  {
    title: 'Security',
    features: [
      {
        title: 'SSO',
        tiers: {
          solo: false,
          team: true,
          enterprise: true
        }
      },
      {
        title: 'Audit logs',
        tiers: {
          solo: false,
          team: true,
          enterprise: true
        }
      },
      {
        title: 'Custom security review',
        tiers: {
          solo: false,
          team: false,
          enterprise: true
        }
      }
    ]
  }
]
</script>

<template>
  <UPricingTable :tiers="tiers" :sections="sections" />
</template>
```

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

### Create Nuxt Project with Portfolio Template

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Use this command to create a new Nuxt project with the UI Portfolio template.

```bash
npm create nuxt@latest -- -t ui/portfolio
```

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

### Install Nuxt UI v3 with package managers

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/1.getting-started/3.migration/2.v3.md

Install the latest version of @nuxt/ui using your preferred package manager (pnpm, yarn, npm, or bun).

```bash
pnpm add @nuxt/ui
```

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

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

```bash
bun add @nuxt/ui
```

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

### Define multiple keyboard shortcuts for common actions

Source: https://github.com/nuxt/ui/blob/v4/docs/content/docs/3.composables/define-shortcuts.md

This example shows how to define multiple shortcuts for different actions, including single keys, key combinations, and key sequences.

```vue
<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>
```