Nuxt UI

https://ui.nuxt.com/docs
Admin
Nuxt UI is a comprehensive Vue UI component library offering 125+ accessible, production-ready...
Tokens:678,274
Snippets:4,769
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Setup steps for Nuxt UI

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

Steps to set up Nuxt UI: add the module to nuxt.config.ts, import Tailwind CSS, and start the development server. These are the three steps used in the Steps component example.

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

```

```css
@import "tailwindcss";

```

```bash
npm run dev

```

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

### Install AI SDK Dependencies

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

Installation commands for the AI completion example. Requires the 'ai' and '@ai-sdk/vue' packages, which are needed to use the Vercel AI SDK's useCompletion composable.

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

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

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

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

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

### useTour with template refs and UPopover

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

Complete example of a guided tour using useTour with three steps targeting template refs. The composable owns step state and provides open, reference, current, index, total, hasPrev, hasNext, start, prev, and next. The popover is bound to tour.open.value and tour.reference.value, and content is rendered manually with navigation buttons.

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

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

### PricingPlan full usage example

Source: https://ui.nuxt.com/docs/components/pricing-plan

Complete example of the PricingPlan component with all main props: title, description, price, discount, badge, billing-cycle, features, and button. Use this as a starting point for a full pricing plan display.

```vue
<template>
  <u-pricing-plan :button="{
    label: 'Buy now'
  }" :features="[
    'One developer',
    'Unlimited projects',
    'Access to GitHub repository',
    'Unlimited patch & minor updates',
    'Lifetime access'
  ]" badge="Most popular" billing-cycle="/month" class="w-96" description="For bootstrappers and indie hackers." discount="$199" price="$249" title="Solo" />
</template>
```

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

### Install @nuxt/content with bun

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

Install the Nuxt Content module using bun.

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

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

### Install dependencies for Vue with bun

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

Install the required packages for Vue: ai, @ai-sdk/vue, and @comark/vue using bun.

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

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

### Install Iconify collection with npm

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

Installs an Iconify collection locally using npm.

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

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

### Manual setup URL for Cursor

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

URL to enter in Cursor's 'Add skill' field for manual setup.

```text
https://github.com/nuxt/ui/tree/v4/skills/nuxt-ui
```

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

### Install @nuxt/content with yarn

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

Install the Nuxt Content module 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 module using npm.

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

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

### Install dependencies

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

Installs project dependencies using pnpm.

```bash
pnpm install
```

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

### Install Iconify collection with yarn

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

Installs an Iconify collection locally using yarn.

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

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

### Install dependencies for Vue with npm

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

Install the required packages for Vue: ai, @ai-sdk/vue, and @comark/vue using npm.

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

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

### Install @nuxt/content with pnpm

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

Install the Nuxt Content module using pnpm.

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

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

### Install dependencies for Nuxt with bun

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

Install the required packages for Nuxt: ai, @ai-sdk/vue, and @comark/nuxt using bun.

```bash
bun add ai @ai-sdk/vue @comark/nuxt
```

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

### Image toolbar example

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

Example of using the `should-show` prop to create a context-specific toolbar for images.

```APIDOC
## [EXAMPLE] Image toolbar with should-show

### Description
Example of a `bubble` toolbar with download and delete actions that only appears when an image is selected.

### Component
`UEditorToolbar`

### Props
- **editor** (Editor) - The editor instance.
- **items** (EditorToolbarItem[][]) - The toolbar items.
- **layout** (string) - Set to `'bubble'`.
- **should-show** (function) - Returns `true` when the editor is active on an image and the view has focus.

### Example
```vue
<script setup lang="ts">
import type { Editor } from '@tiptap/vue-3'
import type { EditorToolbarItem } from '@nuxt/ui'

const value = ref(`Click on the image below to see the image-specific toolbar:

![Image Placeholder](/placeholder.jpeg)`)

const items = (editor: Editor): EditorToolbarItem[][] => {
  const node = editor.state.doc.nodeAt(editor.state.selection.from)

  return [[{
    icon: 'i-lucide-download',
    to: node?.attrs?.src,
    download: true,
    tooltip: { text: 'Download' }
  }], [{
    icon: 'i-lucide-trash',
    tooltip: { text: 'Delete' },
    onClick: () => {
      const { state } = editor
      const { selection } = state

      const pos = selection.from
      const node = state.doc.nodeAt(pos)

      if (node && node.type.name === 'image') {
        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run()
      }
    }
  }]]
}
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    class="w-full min-h-113"
  >
    <UEditorToolbar
      :editor="editor"
      :items="items(editor)"
      layout="bubble"
      :should-show="({ editor, view }) => {
        return editor.isActive('image') && view.hasFocus()
      }"
    />
  </UEditor>
</template>
```
```

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

### Install Iconify collection with pnpm

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

Installs an Iconify collection locally using pnpm. Recommended for faster and more reliable icon serving.

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

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

### Install Nuxt UI skill directly from website

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

Installs the Nuxt UI skill directly from the website, useful if cloning from GitHub is slow on your network.

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

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

### Install dependencies for Nuxt with npm

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

Install the required packages for Nuxt: ai, @ai-sdk/vue, and @comark/nuxt using npm.

```bash
npm install ai @ai-sdk/vue @comark/nuxt
```

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

### Install dependencies for Vue with pnpm

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

Install the required packages for Vue: ai, @ai-sdk/vue, and @comark/vue using pnpm.

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

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

### Install @ai-sdk/mcp with npm, pnpm, or yarn

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

Install the @ai-sdk/mcp package using npm, pnpm, or yarn. Choose the command that matches your package manager.

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

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

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

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

### Install dependencies for Vue with yarn

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

Install the required packages for Vue: ai, @ai-sdk/vue, and @comark/vue using yarn.

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

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

### Install @nuxt/ui and tailwindcss

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

Install the Nuxt UI package and Tailwind CSS using your preferred package manager. Choose the command that matches your environment.

```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 dependencies for Nuxt with pnpm

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

Install the required packages for Nuxt: ai, @ai-sdk/vue, and @comark/nuxt using pnpm.

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

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

### Install dependencies for Nuxt with yarn

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

Install the required packages for Nuxt: ai, @ai-sdk/vue, and @comark/nuxt using yarn.

```bash
yarn add ai @ai-sdk/vue @comark/nuxt
```

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

### Install Nuxt UI skill globally with --global flag

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

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

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

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

### Run documentation development server

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

Starts the development server for the documentation located in the docs folder.

```bash
pnpm run docs
```

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

### Component generation examples

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

Shows various ways to use the `pnpm cli make component` command: basic component, prose component, content component, and generating only the documentation template.

```bash
# Create a basic component
pnpm cli make component my-component

# Create a prose component
pnpm cli make component heading --prose

# Create a content component
pnpm cli make component block --content

# Generate only documentation template
pnpm cli make component my-component --template=docs
```

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

### list-examples

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

Tool to list all available Nuxt UI examples.

```APIDOC
## list-examples

### Description
Lists the names of all available UI examples.

### Returns
List of example names.
```

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

### PricingTable with slots example

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

Example of using the UPricingTable component with slot customization. The script setup defines tiers and sections data, while the template uses named slots to customize specific tier titles, section titles, and feature values. The slots are named using patterns like #team-title, #section-security-title, and #feature-developers-value.

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

const sections = [
  {
    id: 'features',
    title: 'Features',
    features: [
      {
        id: 'developers',
        title: 'Number of developers',
        tiers: { solo: '1', team: '5', enterprise: 'Unlimited' }
      },
      {
        id: 'projects',
        title: 'Projects',
        tiers: { solo: true, team: true, enterprise: true }
      }
    ]
  },
  {
    id: 'security',
    title: 'Security',
    features: [
      {
        title: 'SSO',
        tiers: { solo: false, team: true, enterprise: true }
      }
    ]
  }
]
</script>
```

```vue
<template>
  <UPricingTable :tiers="tiers" :sections="sections">
    <!-- Customize specific tier title -->
    <template #team-title="{ tier }">
      <div class="flex items-center gap-2">
        <UIcon name="i-lucide-crown" class="size-4 text-amber-500" />
        {{ tier.title }}
      </div>
    </template>

    <!-- Customize specific section title -->
    <template #section-security-title="{ section }">
      <div class="flex items-center gap-2">
        <UIcon name="i-lucide-shield-check" class="size-4 text-green-500" />
        <span class="font-semibold text-green-700">{{ section.title }}</span>
      </div>
    </template>

    <!-- Customize specific feature value -->
    <template #feature-developers-value="{ feature, tier }">
      <template v-if="feature.tiers?.[tier.id]">
        <UBadge :label="String(feature.tiers[tier.id])" color="primary" variant="soft" />
      </template>
      <UIcon v-else name="i-lucide-x" class="size-4 text-muted" />
    </template>
  </UPricingTable>
</template>
```

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

### Table example with columns and data

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

The provided code is a partial Vue component setup for a table example. It defines a Payment type, sample data, and column definitions using TableColumn from @nuxt/ui. The columns include a select checkbox column, an id column, a date column, and a status column with color mapping. The snippet is incomplete as it cuts off mid-definition.

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

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

const toast = useToast()
const { copy } = useClipboard()

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
}, {
  id: '4595',
  date: '2024-03-10T13:40:00',
  status: 'refunded',
  email: 'ava.thomas@example.com',
  amount: 428
}, {
  id: '4594',
  date: '2024-03-10T09:15:00',
  status: 'paid',
  email: 'michael.wilson@example.com',
  amount: 683
}, {
  id: '4593',
  date: '2024-03-10T20:25:00',
  status: 'failed',
  email: 'olivia.taylor@example.com',
  amount: 947
}, {
  id: '4592',
  date: '2024-03-09T18:45:00',
  status: 'paid',
  email: 'benjamin.jackson@example.com',
  amount: 851
}, {
  id: '4591',
  date: '2024-03-09T16:05:00',
  status: 'paid',
  email: 'sophia.miller@example.com',
  amount: 762
}, {
  id: '4590',
  date: '2024-03-09T14:20:00',
  status: 'paid',
  email: 'noah.clark@example.com',
  amount: 573
}, {
  id: '4589',
  date: '2024-03-09T11:35:00',
  status: 'failed',
  email: 'isabella.lee@example.com',
  amount: 389
}, {
  id: '4588',
  date: '2024-03-08T22:50:00',
  status: 'refunded',
  email: 'liam.walker@example.com',
  amount: 701
}, {
  id: '4587',
  date: '2024-03-08T20:15:00',
  status: 'paid',
  email: 'charlotte.hall@example.com',
  amount: 856
}, {
  id: '4586',
  date: '2024-03-08T17:40:00',
  status: 'paid',
  email: 'mason.young@example.com',
  amount: 492
}, {
  id: '4585',
  date: '2024-03-08T14:55:00',
  status: 'failed',
  email: 'amelia.king@example.com',
  amount: 637
}, {
  id: '4584',
  date: '2024-03-08T12:30:00',
  status: 'paid',
  email: 'elijah.wright@example.com',
  amount: 784
}, {
  id: '4583',
  date: '2024-03-08T09:45:00',
  status: 'refunded',
  email: 'harper.scott@example.com',
  amount: 345
}, {
  id: '4582',
  date: '2024-03-07T23:10:00',
  status: 'paid',
  email: 'evelyn.green@example.com',
  amount: 918
}, {
  id: '4581',
  date: '2024-03-07T20:25:00',
  status: 'paid',
  email: 'logan.baker@example.com',
  amount: 567
}])

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'
  }),
  enableSorting: false,
  enableHiding: false
}, {
  accessorKey: 'id',
  header: '#',
  cell: ({ row }) => `#${row.getValue('id')}`
}, {
  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]
```

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

### Language: Vue SFC with TypeScript

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

A Vue single-file component with a script setup block and template. The button click updates the message. This example is shown without a language tag and with a 'vue' language tag.

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

```

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

```

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

### Run Nuxt playground

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

Starts the development server to test Nuxt components using the playground.

```bash
pnpm run dev
```

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

### Define tiers with PricingTableTier type and pass to UPricingTable

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

Defines the `tiers` prop as a typed array using `PricingTableTier` from `@nuxt/ui` and passes it to the component. This example shows the recommended approach for managing tier data in a script setup.

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

const tiers = ref<PricingTableTier[]>([
  {
    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"
    }
  }
])
</script>

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

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

### Sticky Table with UTable sticky prop

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

Use the sticky prop on UTable to make the header or footer sticky. The example includes a script setup with a data ref array and a template with a UTable that has a max height and flex-1 class.

```vue
<script setup lang="ts">
const data = ref([
  {
    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
  },
  {
    id: "4595",
    date: "2024-03-10T15:55:00",
    status: "paid",
    email: "ethan.harris@example.com",
    amount: 639
  },
  {
    id: "4594",
    date: "2024-03-10T15:55:00",
    status: "paid",
    email: "ethan.harris@example.com",
    amount: 639
  }
])
</script>

<template>
  <UTable sticky :data="data" class="flex-1 max-h-[312px]" />
</template>
```

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

### get-example

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

Tool to retrieve the source code of a specific Nuxt UI example.

```APIDOC
## get-example

### Description
Retrieves the source code of a UI example.

### Parameters
- **example** (string) - Required - Example name.

### Returns
Source code of the example.
```

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

### MDC syntax example with callout, tabs, and code-group

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

Shows how to use MDC syntax to embed Vue components like callout, tabs, and code-group directly in markdown. The code-group component contains four bash commands for installing @nuxt/ui with different package managers.

```mdc
Regular markdown with **bold** and *italic* text.

::callout{icon="i-lucide-rocket" color="primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @nuxt/ui to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

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

::
```

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

### UEditor with custom handlers and markdown content

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

Example setup for the UEditor component with a rich markdown content value and custom handlers for image upload and AI completion. It imports TipTap extensions and Nuxt UI utilities, and defines custom handlers that satisfy EditorCustomHandlers.

```vue
<script setup lang="ts">
import type { EditorCustomHandlers, EditorToolbarItem, EditorSuggestionMenuItem, EditorMentionMenuItem, EditorEmojiMenuItem, DropdownMenuItem } from '@nuxt/ui'
import type { Editor, JSONContent } from '@tiptap/vue-3'
import { upperFirst } from 'scule'
import { mapEditorItems } from '@nuxt/ui/utils/editor'
import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
import { TextAlign } from '@tiptap/extension-text-align'
import { CodeBlockShiki } from 'tiptap-extension-code-block-shiki'
import { ImageUpload } from './EditorImageUploadExtension'
import { useEditorCompletion } from './EditorUseCompletion'
import EditorLinkPopover from './EditorLinkPopover.vue'

const editorRef = useTemplateRef('editorRef')

const value = ref(`# Building Modern Interfaces with Nuxt UI

Welcome to the **Nuxt UI Editor** — a powerful rich text editing experience built on [TipTap](https://tiptap.dev). This editor combines *flexibility* with ease of use, making content creation a breeze.

![Placeholder](/placeholder.jpeg)

## Rich Formatting Options

The editor supports all common text formatting including **bold**, *italic*, <u>underline</u>, ~~strikethrough~~, and \`inline code\`. You can also combine them for **_bold and italic_** text.

### Interactive Features

Try out these powerful capabilities:

- **Bubble Menu** — Select any text to see formatting options appear
- **Slash Commands** — Type \`/\` for quick access to blocks and formatting
- **Mentions** — Use \`@\` to tag people or entities
- **Emoji Picker** — Type \`:\` followed by an emoji name like :smile:
- **Drag & Drop** — Hover over any block to see the drag handle

> **Pro tip:** You can use keyboard shortcuts like Cmd/Ctrl + B for bold, Cmd/Ctrl + I for italic, and more!

### Advanced Capabilities

1. **Custom Extensions** — Add your own TipTap extensions seamlessly
2. **Multiple Content Types** — Support for JSON, HTML, and Markdown
3. **Customizable Toolbars** — Fixed, bubble, and floating layouts
4. **Theme Integration** — Fully styled with Nuxt UI theme system

#### Code Blocks

Perfect for technical documentation:

\`\`\`vue
<template>
  <UEditor v-model="value" content-type="markdown" />
</template>
\`\`\`

---

Whether you're building a blog, documentation site, or content management system, the Nuxt UI Editor provides everything you need for a professional editing experience. Visit [ui.nuxt.com](https://ui.nuxt.com) to explore more components.`)

const { extension: completionExtension, handlers: aiHandlers, isLoading: aiLoading } = useEditorCompletion(editorRef)

const customHandlers = {
  imageUpload: {
    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'imageUpload' }),
    execute: (editor: Editor) => editor.chain().focus().insertContent({ type: 'imageUpload' }),
    isActive: (editor: Editor) => editor.isActive('imageUpload'),
    isDisabled: undefined
  },
  ...aiHandlers
} satisfies EditorCustomHandlers
```

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

### Create project from Nuxt UI templates (Starter, Dashboard, Chat)

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

Use the CLI to create a new project from the official Nuxt UI templates. The Starter template is minimal, the Dashboard template provides a multi-column layout for admin interfaces, and the Chat template is an AI chatbot powered by Vercel AI SDK.

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

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

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

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

### UNavigationMenu with unmount-on-hide prop

Source: https://ui.nuxt.com/docs/components/navigation-menu

Example showing how to use the `unmount-on-hide` prop on `UNavigationMenu` to control content unmounting behavior. The prop defaults to `true`; setting it to `false` keeps content mounted when hidden. The script defines a `NavigationMenuItem[]` array with nested children for Guide, Composables, and Components sections.

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

const items = ref<NavigationMenuItem[]>([
  {
    label: "Guide",
    icon: "i-lucide-book-open",
    to: "/docs/getting-started",
    children: [
      {
        label: "Introduction",
        description: "Fully styled and customizable components for Nuxt.",
        icon: "i-lucide-house"
      },
      {
        label: "Installation",
        description: "Learn how to install and configure Nuxt UI in your application.",
        icon: "i-lucide-cloud-download"
      },
      {
        label: "Icons",
        icon: "i-lucide-smile",
        description: "You have nothing to do, @nuxt/icon will handle it automatically."
      },
      {
        label: "Colors",
        icon: "i-lucide-swatch-book",
        description: "Choose a primary and a neutral color from your Tailwind CSS theme."
      },
      {
        label: "Theme",
        icon: "i-lucide-cog",
        description: "You can customize components by using the `class` / `ui` props or in your app.config.ts."
      }
    ]
  },
  {
    label: "Composables",
    icon: "i-lucide-database",
    to: "/docs/composables",
    children: [
      {
        label: "defineShortcuts",
        icon: "i-lucide-file-text",
        description: "Define shortcuts for your application.",
        to: "/docs/composables/define-shortcuts"
      },
      {
        label: "useOverlay",
        icon: "i-lucide-file-text",
        description: "Display a modal/slideover within your application.",
        to: "/docs/composables/use-overlay"
      },
      {
        label: "useToast",
        icon: "i-lucide-file-text",
        description: "Display a toast within your application.",
        to: "/docs/composables/use-toast"
      }
    ]
  },
  {
    label: "Components",
    icon: "i-lucide-box",
    to: "/docs/components",
    active: true,
    children: [
      {
        label: "Link",
        icon: "i-lucide-file-text",
        description: "Use NuxtLink with superpowers.",
        to: "/docs/components/link"
      },
      {
        label: "Modal",
        icon: "i-lucide-file-text",
        description: "Display a modal within your application.",
        to: "/docs/components/modal"
      },
      {
        label: "NavigationMenu",
        icon: "i-lucide-file-text",
        description: "Display a list of links.",
        to: "/docs/components/navigation-menu"
      },
      {
        label: "Pagination",
        icon: "i-lucide-file-text",
        description: "Display a list of pages.",
        to: "/docs/components/pagination"
      },
      {
        label: "Popover",
        icon: "i-lucide-file-text",
        description: "Display a non-modal dialog that floats around a trigger element.",
        to: "/docs/components/popover"
      },
      {
        label: "Progress",
        icon: "i-lucide-file-text",
        description: "Show a horizontal bar to indicate task progression.",
        to: "/docs/components/progress"
      }
    ]
  }
])
</script>
```

```vue
<template>
  <UNavigationMenu :unmount-on-hide="false" :items="items" class="w-full justify-center" />
</template>
```

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

### Run Vue playground

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

Starts the development server to test Vue components using the playground.

```bash
pnpm run dev:vue
```

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

### AuthForm within a page (AuthFormPageExample.vue)

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

Complete example of using the AuthForm component within a page, wrapped in a UPageCard. The script setup defines fields, providers, and a Zod schema for validation, while the template renders the form with slots for description, password hint, validation alert, and footer. The onSubmit handler logs the submitted payload.

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

const toast = useToast()

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: () => {
    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({
  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>) {
  console.log('Submitted', payload)
}
</script>
```

```vue
<template>
  <div class="flex flex-col items-center justify-center gap-4 p-4">
    <UPageCard class="w-full max-w-md">
      <UAuthForm
        :schema="schema"
        :fields="fields"
        :providers="providers"
        title="Welcome back!"
        icon="i-lucide-lock"
        @submit="onSubmit"
      >
        <template #description>
          Don't have an account? <ULink to="#" 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 #validation>
          <UAlert color="error" icon="i-lucide-info" title="Error signing in" />
        </template>
        <template #footer>
          By signing in, you agree to our <ULink to="#" class="text-primary font-medium">Terms of Service</ULink>.
        </template>
      </UAuthForm>
    </UPageCard>
  </div>
</template>
```

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

### H1 heading example

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

A simple H1 heading example in Markdown, shown as a preview.

```markdown
# Nuxt UI

```

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

### Sidebar variant prop example

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

Example for the `variant` prop of `USidebar`. It shows how to change the visual style of the sidebar, with the default value `sidebar`. The example includes a toggle button and uses the `variant`, `collapsible`, and `side` props passed from the parent.

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

// Ignore the props for the example
defineProps<Pick<SidebarProps, 'variant' | 'collapsible' | 'side'>>()

const open = ref(true)

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox',
  badge: '4'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]
</script>

<template>
  <div
    class="flex flex-1"
    :class="[
      variant === 'inset' && 'bg-neutral-50 dark:bg-neutral-950',
      side === 'right' && 'flex-row-reverse'
    ]"
  >
    <USidebar
      v-model:open="open"
      :variant="variant"
      :collapsible="collapsible"
      :side="side"
      :ui="{
        container: 'h-full'
      }"
    >
      <template #header>
        <UIcon name="i-logos-nuxt-icon" class="size-8" />
      </template>

      <UNavigationMenu
        :items="items"
        orientation="vertical"
        :ui="{ link: 'p-1.5 overflow-hidden' }"
      />
    </USidebar>

    <div class="flex-1 flex flex-col overflow-hidden lg:peer-data-[variant=floating]:my-4 peer-data-[variant=inset]:m-4 lg:peer-data-[variant=inset]:not-peer-data-[collapsible=offcanvas]:ms-0 peer-data-[variant=inset]:rounded-xl peer-data-[variant=inset]:shadow-sm peer-data-[variant=inset]:ring peer-data-[variant=inset]:ring-default bg-default">
      <div
        class="h-(--ui-header-height) shrink-0 flex items-center px-4"
        :class="[
          variant !== 'floating' && 'border-b border-default',
          side === 'right' && 'justify-end'
        ]"
      >
        <UButton
          :icon="side === 'left' ? 'i-lucide-panel-left' : '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>
  </div>
</template>
```

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

### resource://nuxt-ui/examples

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

Resource for browsing all available Nuxt UI code examples.

```APIDOC
## resource://nuxt-ui/examples

### Description
Browse all available code examples.

### Resource URI
`resource://nuxt-ui/examples`

### Usage
Access this resource with tools like Claude Code by using `@`.
```
Tokens:
Raw