### Start Development Server with Bun

Source: https://ui.nuxt.com/docs/typography/code-tree

Use this command to start the Nuxt.js development server using Bun. Ensure Bun is installed and the project has a 'dev' script defined in its package.json.

```bash
bun run dev
```

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

### Start Development Server with Yarn

Source: https://ui.nuxt.com/docs/typography/code-tree

Use this command to start the Nuxt.js development server using Yarn. Ensure Yarn is installed and the project has a 'dev' script defined in its package.json.

```bash
yarn dev
```

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

### Start Development Server with pnpm

Source: https://ui.nuxt.com/docs/typography/code-tree

Use this command to start the Nuxt.js development server using pnpm. Ensure pnpm is installed and the project has a 'dev' script defined in its package.json.

```bash
pnpm run dev
```

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

### Start Development Server with npm

Source: https://ui.nuxt.com/docs/typography/steps

Use this command to start your development server.

```bash
npm run dev
```

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

### Install @nuxt/content with bun

Source: https://ui.nuxt.com/docs/getting-started/integrations/content

Install the @nuxt/content package using bun.

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

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

### Example Tools

Source: https://ui.nuxt.com/docs/getting-started/ai/mcp

Tools for listing and retrieving Nuxt UI examples and code demonstrations.

```APIDOC
## Example Tools

- **list_examples**: Lists all available UI examples and code demonstrations
- **get_example**: Retrieves specific UI example implementation code and details
```

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

### Start Development Servers

Source: https://ui.nuxt.com/docs/getting-started/contribution

Commands to start development servers for documentation, Nuxt components (playground), and Vue components (playground).

```sh
pnpm run docs
```

```sh
pnpm run dev
```

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

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

### Install @nuxt/content with yarn

Source: https://ui.nuxt.com/docs/getting-started/integrations/content

Install the @nuxt/content package using yarn.

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

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

### Install @nuxt/content with npm

Source: https://ui.nuxt.com/docs/getting-started/integrations/content

Install the @nuxt/content package using npm.

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

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

### Install @nuxt/content with pnpm

Source: https://ui.nuxt.com/docs/getting-started/integrations/content

Install the @nuxt/content package using pnpm.

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

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

### Install Dependencies with npm, pnpm, yarn, or bun

Source: https://ui.nuxt.com/docs/typography/code-tree

Use the appropriate command for your package manager to install project dependencies.

```bash
# npm
npm install
```

```bash
# pnpm
pnpm install
```

```bash
# yarn
yarn install
```

```bash
# bun
bun install
```

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

### Start Nuxt Development Server

Source: https://ui.nuxt.com/docs/typography/code-tree

Use these commands to start the development server on http://localhost:3000. Available for npm, pnpm, yarn, and bun.

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn dev
```

```bash
bun run dev
```

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

### Install Dependencies

Source: https://ui.nuxt.com/docs/getting-started/contribution

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

```sh
pnpm install
```

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

### Install Nuxt UI Skill Directly from Website

Source: https://ui.nuxt.com/docs/getting-started/ai/skills

Install the Nuxt UI skill directly from the website URL if cloning from GitHub is slow on your network.

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

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

### Install MCP Client with npm

Source: https://ui.nuxt.com/docs/components/chat

Install the MCP package using npm. This is the first step to enable tool-calling features in your chatbot.

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

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

### Install Dependencies with npm, pnpm, yarn, or bun

Source: https://ui.nuxt.com/docs/typography/code-tree

Install project dependencies using your preferred package manager.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

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

### Start Nuxt 4 Development Server

Source: https://ui.nuxt.com/docs/typography/code-tree

Start the Nuxt 4 development server on http://localhost:3000.

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

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

### Start Nuxt 4 Development Server

Source: https://ui.nuxt.com/docs/typography/code-tree

Commands to start the Nuxt 4 development server using npm, pnpm, yarn, or bun.

```bash
# npm
npm run dev
```

```bash
# pnpm
pnpm run dev
```

```bash
# yarn
yarn dev
```

```bash
# bun
bun run dev
```

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

### Install Nuxt UI Skill Globally

Source: https://ui.nuxt.com/docs/getting-started/ai/skills

Install the Nuxt UI skill globally so it is available across all your projects.

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

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

### Install Iconify Collection with pnpm

Source: https://ui.nuxt.com/docs/getting-started/integrations

Install icon data locally for a specific collection using pnpm. This improves performance and reliability.

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

```

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

### Install Iconify Collection with npm

Source: https://ui.nuxt.com/docs/getting-started/integrations

Install icon data locally for a specific collection using npm. This improves performance and reliability.

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

```

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

### Install Iconify Dataset Locally

Source: https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt

Install icon data locally using your package manager to improve performance and reliability. Replace '{collection_name}' with the desired Iconify collection.

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

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

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

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

### Install Nuxt UI Package

Source: https://ui.nuxt.com/docs/getting-started/installation/nuxt

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

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

### Install Iconify Collections with PNPM

Source: https://ui.nuxt.com/docs/getting-started/integrations/icons

Install icon data locally using PNPM for faster and more reliable icon serving, especially in SSR and client-side applications.

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

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

### Install Iconify Collections with NPM

Source: https://ui.nuxt.com/docs/getting-started/integrations/icons

Install icon data locally using NPM for faster and more reliable icon serving, especially in SSR and client-side applications.

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

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

### Install Iconify Collection with yarn

Source: https://ui.nuxt.com/docs/getting-started/integrations

Install icon data locally for a specific collection using yarn. This improves performance and reliability.

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

```

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

### Install AI SDK Dependencies

Source: https://ui.nuxt.com/docs/components/editor

Installs the necessary packages for AI-powered features in your project. Ensure you have these dependencies before implementing AI completion or other AI functionalities.

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

```bash
yarn add ai @ai-sdk/gateway @ai-sdk/vue
```

```bash
npm install ai @ai-sdk/gateway @ai-sdk/vue
```

```bash
bun add ai @ai-sdk/gateway @ai-sdk/vue
```

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

### Install Nuxt UI Skill with Skills CLI

Source: https://ui.nuxt.com/docs/getting-started/ai/skills

Use the Skills CLI to add the Nuxt UI skill to your projects. This command installs the skill for all agents.

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

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

### Install Iconify Collections with Yarn

Source: https://ui.nuxt.com/docs/getting-started/integrations/icons

Install icon data locally using Yarn for faster and more reliable icon serving, especially in SSR and client-side applications.

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

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

### Group Code Examples with ProseCodeGroup

Source: https://ui.nuxt.com/docs/typography/code-group

Wrap your code blocks within the `code-group` component to render them as tabs. This example shows how to group different package manager installation commands.

```vue
<template>
  <__flatten>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=pnpm add @nuxt/ui
   filename=pnpm language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  pnpm</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=yarn add @nuxt/ui
   filename=yarn language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  yarn</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=npm install @nuxt/ui
   filename=npm language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   install</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=bun add @nuxt/ui
   filename=bun language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  bun</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span></code></pre></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::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
  ```
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  code-group
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [pnpm]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  pnpm</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [yarn]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  yarn</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [npm]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   install</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash [bun]
  </span></span>
  <span class=line>
  <span class=sBMFI>
  bun</span>
  <span class=sfazB>
   add</span>
  <span class=sfazB>
   @nuxt/ui
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

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

### Configuring Starter Kit Options

Source: https://ui.nuxt.com/docs/components/editor

Shows how to customize the built-in TipTap StarterKit extension using the 'starter-kit' prop. This example disables blockquotes and configures heading levels and dropcursor.

```vue
<script setup lang="ts">
const value = ref('<h1>Hello World</h1>\n')
</script>

<template>
  <UEditor
    v-model="value"
    :starter-kit="{
      blockquote: false,
      headings: {
        levels: [1, 2, 3, 4]
      },
      dropcursor: {
        color: 'var(--ui-primary)',
        width: 2
      },
      link: {
        openOnClick: false
      }
    }"
  />
</template>
```

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

### Basic Usage Example

Source: https://ui.nuxt.com/docs/composables/define-shortcuts

Demonstrates how to define simple keyboard shortcuts using the defineShortcuts composable.

```APIDOC
## Basic usage

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

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

### Form with Regle Validation

Source: https://ui.nuxt.com/docs/components/form

This example shows how to use Regle for form validation. It requires installing Regle and defining rules using its API.

```vue
<script setup lang="ts">
import { useRegle, type InferInput } from '@regle/core'
import { required, email, minLength, withMessage } from '@regle/rules'
import type { FormSubmitEvent } from '@nuxt/ui'

const { r$ } = useRegle({ email: '', password: '' }, {
  email: { required, email: withMessage(email, 'Invalid email') },
  password: { required, minLength: withMessage(minLength(8), 'Must be at least 8 characters') }
})

type Schema = InferInput<typeof r$>

const toast = useToast()
async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="r$" :state="r$.$value" class="space-y-4" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="r$.$value.email" />
    </UFormField>

    <UFormField label="Password" name="password">
      <UInput v-model="r$.$value.password" type="password" />
    </UFormField>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
```

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

### CheckboxGroup with Indicator Position

Source: https://ui.nuxt.com/docs/components/checkbox-group

Change the position of the indicator or hide it using the `indicator` prop. Defaults to `start`. This example places the indicator at the `end`.

```vue
<script setup lang="ts">
const items = ref([
  "System",
  "Light",
  "Dark"
])
</script>

<template>
  <UCheckboxGroup indicator="end" variant="card" :default-value="[
  'System'
]" :items="items" />
</template>
```

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

### Create Nuxt App with Vue Starter Template

Source: https://ui.nuxt.com/docs/getting-started/installation/vue

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

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

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

### ScrollArea External Scroll Example

Source: https://ui.nuxt.com/docs/components/scroll-area

Pass a `getScrollElement` function in the `virtualize` prop to virtualize against an ancestor scroll container. Set `scrollMargin` to the list's offset from the scroll element's start. This example demonstrates virtualizing against an external container for shared scrollbars.

```vue
<script setup lang="ts">
const props = withDefaults(defineProps<{ 
  orientation?: 'vertical' | 'horizontal'
}>(), {
  orientation: 'vertical'
})

type User = {
  id: number
  firstName: string
  lastName: string
  email: string
  image: string
}

const { data: users } = useLazyFetch('https://dummyjson.com/users?limit=100&select=firstName,lastName,email,image', {
  key: 'scroll-area-external-scroll-users',
  transform: (data?: { users: User[] }) => data?.users ?? [],
  default: () => [] as User[],
  server: false
})

const isHorizontal = computed(() => props.orientation === 'horizontal')

// The container owns the scroll; the list virtualizes against it so the header and cards share one scrollbar.
const container = useTemplateRef('container')
const title = useTemplateRef('title')
const toolbar = useTemplateRef('toolbar')
const scrollArea = useTemplateRef('scrollArea')

// Item size along the scroll axis: card width when horizontal, row height when vertical.
const itemSize = computed(() => isHorizontal.value ? 256 : 88)
const getScrollElement = () => container.value

// `scrollMargin` is the title's offset along the scroll axis: its width when it sits left of the cards, its height when it sits above them.
const { width: titleWidth, height: titleHeight } = useElementSize(title, undefined, { box: 'border-box' })
const { height: toolbarHeight } = useElementSize(toolbar, undefined, { box: 'border-box' })
const scrollMargin = computed(() => isHorizontal.value ? titleWidth.value : toolbarHeight.value + titleHeight.value)

</script>


```

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

### Basic useTour Example

Source: https://ui.nuxt.com/docs/composables/use-tour

Demonstrates how to set up a guided tour with multiple steps, each targeting a different element. The popover content and navigation buttons are fully customizable.

```vue
<script setup lang="ts">
const dashboard = useTemplateRef('dashboard')
const profile = useTemplateRef('profile')
const settings = useTemplateRef('settings')

const tour = useTour([
  {
    target: () => dashboard.value,
    title: 'Welcome aboard',
    body: 'The popover re-anchors to each target as you step through the tour.'
  },
  {
    target: () => profile.value,
    title: 'Make it yours',
    body: 'You own the content and the buttons — no extra theme or locale to maintain.',
    side: 'right' as const
  },
  {
    target: () => settings.value,
    title: 'You\'re all set',
    body: 'Press Finish to close the tour.'
  }
])
</script>

<template>
  <div class="w-full space-y-4">
    <div class="flex justify-end">
      <UButton icon="i-lucide-wand-sparkles" @click="tour.start()">
        Start tour
      </UButton>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div ref="dashboard" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Dashboard
        </p>
        <p class="text-sm text-muted">
          Overview of your workspace.
        </p>
      </div>
      <div ref="profile" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Profile
        </p>
        <p class="text-sm text-muted">
          Manage your account.
        </p>
      </div>
      <div ref="settings" class="p-4 rounded-lg border border-default bg-elevated/50">
        <p class="font-medium text-highlighted">
          Settings
        </p>
        <p class="text-sm text-muted">
          Configure your preferences.
        </p>
      </div>
    </div>

    <UPopover
      :open="tour.open.value"
      :reference="tour.reference.value"
      :content="{ side: tour.current.value?.side, sideOffset: 8 }"
      :dismissible="false"
      arrow
    >
      <template #content>
        <div class="p-4 max-w-xs space-y-2">
          <div class="flex items-center justify-between gap-4">
            <p class="font-semibold text-highlighted">
              {{ tour.current.value?.title }}
            </p>
            <span class="text-xs text-muted tabular-nums">
              {{ tour.index.value + 1 }} / {{ tour.total.value }}
            </span>
          </div>
          <p class="text-sm text-muted">
            {{ tour.current.value?.body }}
          </p>
          <div class="flex items-center justify-between pt-2">
            <UButton
              color="neutral"
              variant="outline"
              size="sm"
              :disabled="!tour.hasPrev.value"
              @click="tour.prev()">
              Back
            </UButton>
            <UButton size="sm" @click="tour.next()">
              {{ tour.hasNext.value ? 'Next' : 'Finish' }}
            </UButton>
          </div>
        </div>
      </template>
    </UPopover>
  </div>
</template>

```

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

### Input with Masking

Source: https://ui.nuxt.com/docs/components/input

Applies input masking using the 'maska' library. Examples show credit card and date/CVC masking. Ensure the 'maska' library is installed and imported.

```vue
<script setup lang="ts">
import { vMaska } from 'maska/vue'
</script>

<template>
  <div class="flex flex-col gap-2">
    <UInput v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" icon="i-lucide-credit-card" />

    <div class="flex items-center gap-2">
      <UInput v-maska="'##/##'" placeholder="MM/YY" icon="i-lucide-calendar" />
      <UInput v-maska="'###'" placeholder="CVC" />
    </div>
  </div>
</template>

```

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

### Input Focus Handling Example

Source: https://ui.nuxt.com/docs/composables/define-shortcuts

Shows how to use the `usingInput` option to control shortcut behavior based on input focus.

```APIDOC
## With input focus handling

The `usingInput` option allows you to specify that a shortcut should only trigger when a specific input is focused.

```vue
<template>
  <UInput v-model="query" name="queryInput" />
</template>

<script setup lang="ts">
const query = ref('')

defineShortcuts({
  enter: {
    usingInput: 'queryInput',
    handler: () => performSearch()
  },
  escape: {
    usingInput: true,
    handler: () => clearSearch()
  }
})
</script>
```
```

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

### Using Editor Toolbar Items

Source: https://ui.nuxt.com/docs/components/editor

Example of integrating the Editor component with a toolbar. This setup allows users to apply various formatting and structural changes to the editor content.

```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>
  <UEditor v-slot="{ editor }" v-model="value">
    <UEditorToolbar :editor="editor" :items="items" />
  </UEditor>
</template>
```

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

### Dynamic LocaleSelect with Nuxt i18n

Source: https://ui.nuxt.com/docs/components/locale-select

Integrate the LocaleSelect component with Nuxt i18n for dynamic locale switching. This example uses `useI18n` to get the current locale and `setLocale` to change it.

```vue
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale, setLocale } = useI18n()
</script>

<template>
  <ULocaleSelect
    :model-value="locale"
    :locales="Object.values(locales)"
    @update:model-value="setLocale($event)"
  />
</template>
```

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

### Create Nuxt Project with UI Template

Source: https://ui.nuxt.com/docs/getting-started/installation/nuxt

Use the `create-nuxt-app` command with a specific template to quickly set up a Nuxt project with Nuxt UI pre-configured.

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

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

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

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

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

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

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

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

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

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

### Header Component in app.vue

Source: https://ui.nuxt.com/docs/components/header

Integrate the Header component into your application's main `app.vue` file or within a layout. This example shows a standard setup with navigation items and utility buttons.

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/docs/getting-started',
  active: route.path.startsWith('/docs/getting-started')
}, {
  label: 'Components',
  to: '/docs/components',
  active: route.path.startsWith('/docs/components')
}, {
  label: 'Figma',
  to: 'https://go.nuxt.com/figma-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

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

      <UNavigationMenu :items="items" />

      <template #right>
        <UColorModeButton />

        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </template>

      <template #body>
        <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
      </template>
    </UHeader>

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

    <UFooter />
  </UApp>
</template>

```

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

### Nuxt 4 README.md Overview

Source: https://ui.nuxt.com/docs/typography/code-tree

Basic README content for a Nuxt 4 minimal starter project, including links to documentation.

```markdown
# Nuxt 4 Minimal Starter

Look at the [Nuxt 4 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


```

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

### Vue Chat Component Setup

Source: https://ui.nuxt.com/docs/components/chat

Sets up the Chat component for a Vue application, including message handling and UI rendering for different message types. This example is similar to the Nuxt version but uses Vue-specific imports for Comark.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { isReasoningUIPart, isTextUIPart, isToolUIPart, getToolName } from 'ai'
import { Chat } from '@ai-sdk/vue'
import { isPartStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

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

  input.value = ''
}
</script>

<template>
  <UChatMessages
    :messages="chat.messages"
    :status="chat.status"
  >
    <template #content="{ message }">
      <template
        v-for="(part, index) in message.parts"
        :key="`${message.id}-${part.type}-${index}`"
      >
        <UChatReasoning
          v-if="isReasoningUIPart(part)"
          :text="part.text"
          :streaming="isPartStreaming(part)"
        >
          <Comark
            :markdown="part.text"
            :streaming="isPartStreaming(part)"
            :plugins="[highlight()]"
            class="*:first:mt-0 *:last:mb-0"
          />
        </UChatReasoning>

        <UChatTool
          v-else-if="isToolUIPart(part)"
          :text="getToolName(part)"
          :streaming="isToolStreaming(part)"
        />

        <template v-else-if="isTextUIPart(part)">
          <Comark
            v-if="message.role === 'assistant'"
            :markdown="part.text"
            :streaming="isPartStreaming(part)"
            :plugins="[highlight()]"
            class="*:first:mt-0 *:last:mb-0"
          />
          <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
            {{ part.text }}
          </p>
        </template>
      </template>
    </template>
  </UChatMessages>

  <UChatPrompt
    v-model="input"
    :error="chat.error"
    @submit="onSubmit"
  >
    <UChatPromptSubmit
      :status="chat.status"
      @stop="chat.stop()"
      @reload="chat.regenerate()"
    />
  </UChatPrompt>
</template>

```

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

### Using Chat Prompt as a Chat Interface Starting Point

Source: https://ui.nuxt.com/docs/components/chat-prompt

Integrate the UChatPrompt component into your Vue application to create a basic chat interface. This example shows how to handle user input and navigate to a chat page upon the first message submission.

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

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

### Header with Navigation and Utility Buttons

Source: https://ui.nuxt.com/docs/components/header

This example demonstrates a complete Header component setup with a logo in the title slot, navigation links using UNavigationMenu, and utility buttons (color mode, GitHub link) in the right slot. It's suitable for a typical application header.

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

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [{
  label: 'Docs',
  to: '/docs/getting-started',
  active: route.path.startsWith('/docs/getting-started')
}, {
  label: 'Components',
  to: '/docs/components',
  active: route.path.startsWith('/docs/components')
}, {
  label: 'Figma',
  to: 'https://go.nuxt.com/figma-ui',
  target: '_blank'
}, {
  label: 'Releases',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}])
</script>

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

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />

      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
        <UButton
          color="neutral"
          variant="ghost"
          to="https://github.com/nuxt/ui"
          target="_blank"
          icon="i-simple-icons-github"
          aria-label="GitHub"
        />
      </UTooltip>
    </template>
  </UHeader>
</template>
```

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

### AI Chat Sidebar Example

Source: https://ui.nuxt.com/docs/components/sidebar

This Vue component integrates AI chat capabilities into a right-aligned sidebar. It uses ChatMessages for displaying conversation history and ChatPrompt for user input, with AI SDK for Vue handling the chat logic. Ensure necessary AI and UI packages are installed.

```vue
<script setup lang="ts">
import type { UIMessage } from 'ai'
import { isTextUIPart } from 'ai'
import { Chat } from '@ai-sdk/vue'
import { isPartStreaming } from '@nuxt/ui/utils/ai'
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'

const open = ref(true)
const input = ref('')

const messages: UIMessage[] = [{
  id: '1',
  role: 'user',
  parts: [{ type: 'text', text: 'What is Nuxt UI?' }]
}, {
  id: '2',
  role: 'assistant',
  parts: [{ type: 'text', text: 'Nuxt UI is a Vue component library built on Reka UI, Tailwind CSS, and Tailwind Variants. It provides 125+ accessible components for building modern web apps.' }]
}]

const chat = new Chat({
  messages
})

function onSubmit() {
  if (!input.value.trim()) return

  chat.sendMessage({ text: input.value })

  input.value = ''
}

const ui = {
  prose: {
    p: { base: 'my-2 text-sm/6' },
    li: { base: 'my-0.5 text-sm/6' },
    ul: { base: 'my-2' },
    ol: { base: 'my-2' },
    h1: { base: 'text-xl mb-4' },
    h2: { base: 'text-lg mt-6 mb-3' },
    h3: { base: 'text-base mt-4 mb-2' },
    h4: { base: 'text-sm mt-3 mb-1.5' },
    code: { base: 'text-xs' },
    pre: { root: 'my-2', base: 'text-xs/5' },
    table: { root: 'my-2' },
    hr: { base: 'my-4' }
  }
}
</script>

<template>
  <div class="flex flex-1">
    <div class="flex-1 flex flex-col">
      <div class="h-(--ui-header-height) shrink-0 flex items-center justify-end px-4 border-b border-default">
        <UButton
          icon="i-lucide-panel-right"
          color="neutral"
          variant="ghost"
          aria-label="Toggle sidebar"
          @click="open = !open"
        />
      </div>

      <div class="flex-1 p-4">
        <Placeholder class="size-full" />
      </div>
    </div>

    <USidebar
      v-model:open="open"
      side="right"
      title="AI Chat"
      close
      :style="{ '--sidebar-width': '20rem' }"
      :ui="{ container: 'h-full' }"
    >
      <UTheme :ui="ui">
        <UChatMessages
          :messages="chat.messages"
          :status="chat.status"
          compact
          class="px-0"
        >
          <template #content="{ message }">
            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
              <template v-if="isTextUIPart(part)">
                <Comark
                  v-if="message.role === 'assistant'"
                  :markdown="part.text"
                  :streaming="isPartStreaming(part)"
                  :plugins="[highlight()]"
                  class="*:first:mt-0 *:last:mb-0"
                />
                <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap text-sm/6">
                  {{ part.text }}
                </p>
              </template>
            </template>
          </template>
        </UChatMessages>
      </UTheme>

      <template #footer>
        <UChatPrompt
          v-model="input"
          :error="chat.error"
          :autofocus="false"
          variant="subtle"
          size="sm"
          :ui="{ base: 'px-0' }"
          @submit="onSubmit"
        >
          <UChatPromptSubmit
            size="sm"
            :status="chat.status"
            @stop="chat.stop()"
            @reload="chat.regenerate()"
          />
        </UChatPrompt>
      </template>
    </USidebar>
  </div>
</template>

```

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

### Vue Table with Row Selection Example

Source: https://ui.nuxt.com/docs/components/table

This snippet shows a complete Vue component for a table with row selection enabled. It includes setup for data, columns with custom cells for checkboxes, and integration with TanStack Table's row selection API. Use this as a base for tables where users need to select multiple rows.

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

const UCheckbox = resolveComponent('UCheckbox')
const UBadge = resolveComponent('UBadge')

type Payment = {
  id: string
  date: string
  status: 'paid' | 'failed' | 'refunded'
  email: string
  amount: number
}

const data = ref<Payment[]>([{
  id: '4600',
  date: '2024-03-11T15:30:00',
  status: 'paid',
  email: 'james.anderson@example.com',
  amount: 594
}, {
  id: '4599',
  date: '2024-03-11T10:10:00',
  status: 'failed',
  email: 'mia.white@example.com',
  amount: 276
}, {
  id: '4598',
  date: '2024-03-11T08:50:00',
  status: 'refunded',
  email: 'william.brown@example.com',
  amount: 315
}, {
  id: '4597',
  date: '2024-03-10T19:45:00',
  status: 'paid',
  email: 'emma.davis@example.com',
  amount: 529
}, {
  id: '4596',
  date: '2024-03-10T15:55:00',
  status: 'paid',
  email: 'ethan.harris@example.com',
  amount: 639
}])

const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(UCheckbox, {
    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
    'aria-label': 'Select all'
  }),
  cell: ({ row }) => h(UCheckbox, {
    'modelValue': row.getIsSelected(),
    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
    'aria-label': 'Select row'
  })
}, {
  accessorKey: 'date',
  header: 'Date',
  cell: ({ row }) => {
    return new Date(row.getValue('date')).toLocaleString('en-US', {
      day: 'numeric',
      month: 'short',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    })
  }
}, {
  accessorKey: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const color = ({
      paid: 'success' as const,
      failed: 'error' as const,
      refunded: 'neutral' as const
    })[row.getValue('status') as string]

    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
  }
}, {
  accessorKey: 'email',
  header: 'Email'
}, {
  accessorKey: 'amount',
  header: 'Amount',
  meta: {
    class: {
      th: 'text-right',
      td: 'text-right font-medium'
    }
  },
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount)
  }
}]

const table = useTemplateRef('table')

const rowSelection = ref({ 1: true })
</script>

<template>
  <div class="flex-1 w-full">
    <UTable
      ref="table"
      v-model:row-selection="rowSelection"
      :data="data"
      :columns="columns"
    />

    <div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
      {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
      {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
    </div>
  </div>
</template>
```

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

### Install MCP Client with pnpm

Source: https://ui.nuxt.com/docs/components/chat

Install the MCP package using pnpm. This is an alternative package manager for installing the MCP library.

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

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

### Install MCP Client with yarn

Source: https://ui.nuxt.com/docs/components/chat

Install the MCP package using yarn. This is another package manager option for installing the MCP library.

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

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

### Install @nuxt/ui with bun

Source: https://ui.nuxt.com/docs/typography

Use this command to add the @nuxt/ui package to your project using bun.

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

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

### Markdown Heading Example

Source: https://ui.nuxt.com/docs/typography/headers-and-text

Example of a Level 1 heading in Markdown format.

```markdown
# Nuxt UI
```

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

### create()

Source: https://ui.nuxt.com/docs/composables/use-overlay

Creates an overlay and returns a factory instance. This instance can then be used to control the lifecycle of the created overlay.

```APIDOC
## create(component: T, options?: OverlayOptions): OverlayInstance

### Description
Create an overlay, and return a factory instance.

### Parameters
#### component (`T`)
* required: The overlay component to render.

#### options (`OverlayOptions`)
* Optional: Configuration options for the overlay.
  * `open`: Open the overlay immediately after being created. Defaults to false.
  * `props`: An optional object of props to pass to the rendered component.
  * `persistent`: Removes the overlay from memory when closed. Defaults to false.
```