Nuxt UI

https://ui3.nuxt.com/
Admin
Nuxt UI is an open-source Vue UI library offering 50+ customizable, responsive, accessible, and...
Tokens:597,517
Snippets:4,096
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Navigate into project and start dev server

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

Navigate into your project directory and start the development server.

```bash
cd <my-app>
npm run dev
```

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

### Install dependencies with pnpm install

Source: https://ui3.nuxt.com/getting-started/contribution

Installs project dependencies.

```bash
pnpm install

```

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

### Install @nuxt/ui-pro@3

Source: https://ui3.nuxt.com/getting-started/migration

Install Nuxt UI Pro v3 using your preferred package manager. These commands are equivalent alternatives.

```bash
pnpm add @nuxt/ui-pro@3
```

```bash
yarn add @nuxt/ui-pro@3
```

```bash
npm install @nuxt/ui-pro@3
```

```bash
bun add @nuxt/ui-pro@3
```

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

### Terms prop example

Source: https://ui3.nuxt.com/components/pricing-plan

Use the `terms` prop to display terms below the price. The example sets terms to 'Invoices and receipts available.'.

```html
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    tagline="Pay once, own it forever"
    terms="Invoices and receipts available."
  />
</template>

```

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

### Highlight prop example

Source: https://ui3.nuxt.com/components/pricing-plan

Use the `highlight` prop to display a highlighted border around the PricingPlan. The example uses the `highlight` boolean prop.

```html
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    highlight
  />
</template>

```

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

### UPageLogos with items from script setup

Source: https://ui3.nuxt.com/components/page-logos

Defines the logo list in a script setup block and passes it to the `items` prop. This separates the data from the template for better maintainability.

```html
<script setup lang="ts">
const items = [
  'i-simple-icons-github',
  'i-simple-icons-discord',
  'i-simple-icons-x',
  'i-simple-icons-instagram',
  'i-simple-icons-linkedin',
  'i-simple-icons-facebook'
]
</script>

<template>
  <UPageLogos title="Trusted by the best front-end teams" :items="items" />
</template>

```

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

### Install vue-i18n with bun

Source: https://ui3.nuxt.com/getting-started/i18n/vue

Installs the Vue I18n plugin version 11 using bun. Alternative to pnpm, yarn, or npm.

```bash
bun add vue-i18n@11

```

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

### Button prop example

Source: https://ui3.nuxt.com/components/pricing-plan

Use the `button` prop with any property from the Button component to display a button at the bottom of the PricingPlan. The example shows a button with label 'Buy now'.

```html
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
  />
</template>

```

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

### Install @nuxt/ui@3 with pnpm, yarn, npm, or bun

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

Install the Nuxt UI package using your preferred package manager. If using pnpm, set shamefully-hoist=true in .npmrc or install tailwindcss in the project root.

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

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

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

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

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

### Full ContentSearch example in app.vue

Source: https://ui3.nuxt.com/components/content-search

Complete example showing how to fetch navigation and search sections using @nuxt/content composables, define links, and use the ContentSearch component with all props.

```ts
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
  server: false
})

const links = [{
  label: 'Docs',
  icon: 'i-lucide-book',
  to: '/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/components'
}, {
  label: 'Roadmap',
  icon: 'i-lucide-chart-no-axes-gantt',
  to: '/roadmap'
}]

const searchTerm = ref('')
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</template>

```

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

### Add to calendar toast example

Source: https://ui3.nuxt.com/components/toast

Shows a toast with a dynamic date description. Used in the global position example to demonstrate the configured position.

```Vue
<script setup lang="ts">
const toast = useToast()

function addToCalendar() {
  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
  const formattedDate = eventDate.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  })

  toast.add({
    title: 'Event added to calendar',
    description: `This event is scheduled for ${formattedDate}.`,
    icon: 'i-lucide-calendar-days'
  })
}
</script>

<template>
  <UButton
    label="Add to calendar"
    color="neutral"
    variant="outline"
    icon="i-lucide-plus"
    @click="addToCalendar"
  />
</template>
```

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

### ChatPrompt as starting point in pages/index.vue

Source: https://ui3.nuxt.com/components/chat-prompt

Use the ChatPrompt component as a starting point for a chat interface. This example shows a simple page that submits the input to an API endpoint and navigates to the created chat.

```vue
<script setup lang="ts">
const input = ref('')
const loading = ref(false)

async function onSubmit() {
  loading.value = true

  const chat = await $fetch('/api/chats', {
    method: 'POST',
    body: { input }
  })

  navigateTo(`/chat/${chat.id}`)
}
</script>

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

        <UChatPrompt v-model="input" :status="loading ? 'streaming' : 'ready'" @submit="onSubmit">
          <UChatPromptSubmit />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>

```

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

### Run documentation development server

Source: https://ui3.nuxt.com/getting-started/contribution

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

```bash
pnpm run docs

```

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

### Basic UInput with v-model

Source: https://ui3.nuxt.com/components/input

Use the v-model directive to control the value of the Input. The example shows a script setup with a ref and a UInput component bound to it.

```vue
<script setup lang="ts">
const value = ref('')
</script>

<template>
  <UInput v-model="value" />
</template>

```

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

### Error component in error.vue

Source: https://ui3.nuxt.com/components/error

Example of using the Error component in error.vue, including the script setup with NuxtError type and a template with UApp, UHeader, UError, and UFooter.

```vue
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <UApp>
    <UHeader />

    <UError :error="error" />

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

```

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

### Create Nuxt project with UI starter template

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

Create a new Nuxt project using the nuxt/starter#ui template with Nuxt UI pre-configured.

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

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

### Create components with nuxt-ui make component examples

Source: https://ui3.nuxt.com/getting-started/contribution

Examples of creating components with various options. The CLI automatically generates all necessary files like the component itself, theme, tests, and documentation.

```bash
# Create a basic component
nuxt-ui make component my-component

# Create a pro component
nuxt-ui make component page-section --pro

# Create a pro prose component
nuxt-ui make component heading --pro --prose

# Create a pro content component
nuxt-ui make component block --pro --content

# Generate only documentation template
nuxt-ui make component my-component --template=docs

```

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

### Using the messages prop

Source: https://ui3.nuxt.com/components/chat-messages

Displays a list of chat messages by passing an array of message objects to the messages prop. The example includes a script setup with a ref containing sample messages.

```vue
<script setup lang="ts">
const messages = ref([
  {
    id: '6045235a-a435-46b8-989d-2df38ca2eb47',
    role: 'user',
    content: 'Hello, how are you?'
  },
  {
    id: '7a92b3c1-d5f8-4e76-b8a9-3c1e5fb2e0d8',
    role: 'assistant',
    content: 'I am doing well, thank you for asking! How can I assist you today?'
  },
  {
    id: '9c84d6a7-8b23-4f12-a1d5-e7f3b9c05e2a',
    role: 'user',
    content: 'What is the current weather in Tokyo?'
  },
  {
    id: 'b2e5f8c3-a1d9-4e67-b3f2-c9d8e7a6b5f4',
    role: 'assistant',
    content:
      "Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies."
  }
])
</script>

<template>
  <UChatMessages :messages="messages" />
</template>
```

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

### Define shortcuts with single keys, combinations, and sequences

Source: https://ui3.nuxt.com/composables

Basic usage example showing single keys, key combinations with underscore, and key sequences with hyphen. The '?' key opens a help modal, 'meta_k' opens a command palette, and 'g-d' navigates to the dashboard.

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

```

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

### Checkbox with Indicator Position

Source: https://ui3.nuxt.com/components/checkbox

Use the indicator prop to change the position or hide the indicator. Defaults to start. Example uses indicator="end" and variant="card".

```vue
<template>
  <UCheckbox indicator="end" variant="card" default-value label="Check me" />
</template>
```

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

### Basic usage example with multiple shortcuts

Source: https://ui3.nuxt.com/composables/define-shortcuts

Defines shortcuts for '?', 'meta_k', and 'g-d' to trigger various actions. The 'g-d' is a key sequence.

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

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

### Change indicator position with UCheckboxGroup

Source: https://ui3.nuxt.com/components/checkbox-group

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`. This example sets `indicator="end"` and `variant="card"`.

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

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

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

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

### Configure Avatar theme in vite.config.ts with @nuxt/ui/vite

Source: https://ui3.nuxt.com/components/avatar

Configure the Avatar theme in a Vite project using the @nuxt/ui/vite plugin. This setup is for projects not using Nuxt, applying the same slots and size variants as the app.config.ts example.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        avatar: {
          slots: {
            root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated',
            image: 'h-full w-full rounded-[inherit] object-cover',
            fallback: 'font-medium leading-none text-muted truncate',
            icon: 'text-muted shrink-0'
          },
          variants: {
            size: {
              '3xs': {
                root: 'size-4 text-[8px]'
              },
              '2xs': {
                root: 'size-5 text-[10px]'
              },
              xs: {
                root: 'size-6 text-xs'
              },
              sm: {
                root: 'size-7 text-sm'
              },
              md: {
                root: 'size-8 text-base'
              },
              lg: {
                root: 'size-9 text-lg'
              },
              xl: {
                root: 'size-10 text-xl'
              },
              '2xl': {
                root: 'size-11 text-[22px]'
              },
              '3xl': {
                root: 'size-12 text-2xl'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})
```

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

### Configure header with @nuxt/ui/vite in vite.config.ts

Source: https://ui3.nuxt.com/components/header

Configure the header component in a Vite project using the @nuxt/ui/vite plugin. The ui() plugin receives the same uiPro.header configuration as the Nuxt app.config.ts example. This setup is for Vite-based projects that use the Nuxt UI plugin.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        header: {
          slots: {
            root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            left: 'lg:flex-1 flex items-center gap-1.5',
            center: 'hidden lg:flex',
            right: 'flex items-center justify-end lg:flex-1 gap-1.5',
            title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})
```

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

### Run Nuxt playground development server

Source: https://ui3.nuxt.com/getting-started/contribution

Starts development to test the Nuxt components using the playground.

```bash
pnpm run dev

```

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

### Configure header with @nuxt/ui-pro/vite in vite.config.ts

Source: https://ui3.nuxt.com/components/header

Configure the header component in a Vite project using the @nuxt/ui-pro/vite plugin. The uiPro() plugin receives the same uiPro.header configuration as the Nuxt app.config.ts example. This setup is for Vite-based projects that use the Nuxt UI Pro plugin.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        header: {
          slots: {
            root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
            container: 'flex items-center justify-between gap-3 h-full',
            left: 'lg:flex-1 flex items-center gap-1.5',
            center: 'hidden lg:flex',
            right: 'flex items-center justify-end lg:flex-1 gap-1.5',
            title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
            toggle: 'lg:hidden',
            content: 'lg:hidden',
            overlay: 'lg:hidden',
            header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
            body: 'p-4 sm:p-6 overflow-y-auto'
          },
          variants: {
            toggleSide: {
              left: {
                toggle: '-ms-1.5'
              },
              right: {
                toggle: '-me-1.5'
              }
            }
          }
        }
      }
    })
  ]
})
```

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

### Customize separator text with UAuthForm separator prop

Source: https://ui3.nuxt.com/components/auth-form

Customizes the separator text between providers and fields using the `separator` prop. The default separator is `or`; this example sets it to "Providers". Requires `providers` and `fields` arrays defined in the script setup.

```vue
<script setup lang="ts">
const providers = ref([
  {
    label: 'Google',
    icon: 'i-simple-icons-google',
    color: 'neutral',
    variant: 'subtle'
  },
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    color: 'neutral',
    variant: 'subtle'
  }
])
const fields = ref([
  {
    name: 'email',
    type: 'text',
    label: 'Email'
  },
  {
    name: 'password',
    type: 'password',
    label: 'Password'
  }
])
</script>

<template>
  <UAuthForm
    class="max-w-md"
    title="Login"
    description="Enter your credentials to access your account."
    icon="i-lucide-user"
    :providers="providers"
    :fields="fields"
    separator="Providers"
  />
</template>
```

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

### Run Vue playground development server

Source: https://ui3.nuxt.com/getting-started/contribution

Starts development to test the Vue components using the playground.

```bash
pnpm run dev:vue

```

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

### Define UTable columns with h() for custom cells

Source: https://ui3.nuxt.com/components/table

Example of a Vue script setup defining a typed columns array for a payments table. Uses resolveComponent to render UBadge in the status cell and h() for the amount header and cell. The template renders a UTable with the data and columns.

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

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>[] = [
  {
    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]

      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
        row.getValue('status')
      )
    }
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-medium' }, formatted)
    }
  }
]
</script>

<template>
  <UTable :data="data" :columns="columns" class="flex-1" />
</template>
```

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

### UTable with column filters using UInput and TanStack Table Column Filtering

Source: https://ui3.nuxt.com/components/table

Example of using the UTable component with column filters. It uses the TanStack Table Column Filtering APIs via the `column-filters` prop (bindable with `v-model`) and an `UInput` to filter the email column. The `tableApi` is accessed through a template ref to get and set the filter value.

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

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>[] = [
  {
    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]

      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
        row.getValue('status')
      )
    }
  },
  {
    accessorKey: 'email',
    header: 'Email'
  },
  {
    accessorKey: 'amount',
    header: () => h('div', { class: 'text-right' }, 'Amount'),
    cell: ({ row }) => {
      const amount = Number.parseFloat(row.getValue('amount'))

      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'EUR'
      }).format(amount)

      return h('div', { class: 'text-right font-medium' }, formatted)
    }
  }
]

const table = useTemplateRef('table')

const columnFilters = ref([
  {
    id: 'email',
    value: 'james'
  }
])
</script>

<template>
  <div class="flex flex-col flex-1 w-full">
    <div class="flex px-4 py-3.5 border-b border-accented">
      <UInput
        :model-value="table?.tableApi?.getColumn('email')?.getFilterValue() as string"
        class="max-w-sm"
        placeholder="Filter emails..."
        @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
      />
    </div>

    <UTable ref="table" v-model:column-filters="columnFilters" :data="data" :columns="columns" />
  </div>
</template>
```

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

### Vertical NavigationMenu with items array

Source: https://ui3.nuxt.com/components/navigation-menu

Use this example to render a vertical NavigationMenu. The items ref is a two-dimensional array where the first group contains a label and a Guide submenu with children, and the second group contains GitHub and Help links. The template sets orientation="vertical" and applies a width class. Groups are separated when orientation is vertical.

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

const items = ref<NavigationMenuItem[][]>([
  [
    {
      label: 'Links',
      type: 'label'
    },
    {
      label: 'Guide',
      icon: 'i-lucide-book-open',
      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',
      children: [
        {
          label: 'defineShortcuts',
          icon: 'i-lucide-file-text',
          description: 'Define shortcuts for your application.',
          to: '/composables/define-shortcuts'
        },
        {
          label: 'useOverlay',
          icon: 'i-lucide-file-text',
          description: 'Display a modal/slideover within your application.',
          to: '/composables/use-overlay'
        },
        {
          label: 'useToast',
          icon: 'i-lucide-file-text',
          description: 'Display a toast within your application.',
          to: '/composables/use-toast'
        }
      ]
    },
    {
      label: 'Components',
      icon: 'i-lucide-box',
      to: '/components',
      active: true,
      defaultOpen: true,
      children: [
        {
          label: 'Link',
          icon: 'i-lucide-file-text',
          description: 'Use NuxtLink with superpowers.',
          to: '/components/link'
        },
        {
          label: 'Modal',
          icon: 'i-lucide-file-text',
          description: 'Display a modal within your application.',
          to: '/components/modal'
        },
        {
          label: 'NavigationMenu',
          icon: 'i-lucide-file-text',
          description: 'Display a list of links.',
          to: '/components/navigation-menu'
        },
        {
          label: 'Pagination',
          icon: 'i-lucide-file-text',
          description: 'Display a list of pages.',
          to: '/components/pagination'
        },
        {
          label: 'Popover',
          icon: 'i-lucide-file-text',
          description: 'Display a non-modal dialog that floats around a trigger element.',
          to: '/components/popover'
        },
        {
          label: 'Progress',
          icon: 'i-lucide-file-text',
          description: 'Show a horizontal bar to indicate task progression.',
          to: '/components/progress'
        }
      ]
    }
  ],
  [
    {
      label: 'GitHub',
      icon: 'i-simple-icons-github',
      badge: '3.8k',
      to: 'https://github.com/nuxt/ui',
      target: '_blank'
    },
    {
      label: 'Help',
      icon: 'i-lucide-circle-help',
      disabled: true
    }
  ]
])
</script>

<template>
  <UNavigationMenu orientation="vertical" :items="items" class="data-[orientation=vertical]:w-48" />
</template>
```

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

### Create a component with nuxt-ui make component

Source: https://ui3.nuxt.com/getting-started/contribution

Creates a new component. Options include `--primitive`, `--pro`, `--prose` (requires `--pro`), `--content` (requires `--pro`), and `--template` (available templates: `playground`, `docs`, `test`, `theme`, `component`).

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

```

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

### Install Iconify dataset locally

Source: https://ui3.nuxt.com/getting-started/icons

Install icon data locally using pnpm, yarn, or npm. Replace {collection_name} with the actual collection name, e.g., uil for the i-uil-github icon.

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

```

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

```

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

```

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

### Install vue-i18n with yarn

Source: https://ui3.nuxt.com/getting-started/i18n/vue

Installs the Vue I18n plugin version 11 using yarn. Alternative to pnpm for installing the package.

```bash
yarn add vue-i18n@11

```

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

### Extract shortcuts from menu items with extractShortcuts

Source: https://ui3.nuxt.com/composables

Example showing how to use the extractShortcuts utility to automatically define shortcuts from menu items. Each item includes a kbds array with key combinations and an onSelect handler.

```html
<script setup lang="ts">
const items = [{
  label: 'Save',
  icon: 'i-lucide-file-down',
  kbds: ['meta', 'S'],
  onSelect() {
    save()
  }
}, {
  label: 'Copy',
  icon: 'i-lucide-copy',
  kbds: ['meta', 'C'],
  onSelect() {
    copy()
  }
}]

defineShortcuts(extractShortcuts(items))
</script>

```

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

### Variant prop example

Source: https://ui3.nuxt.com/components/pricing-plan

Use the `variant` prop to change the variant of the PricingPlan. The example sets variant to 'subtle'.

```html
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    variant="subtle"
  />
</template>

```

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

### Generate type stubs with pnpm run dev:prepare

Source: https://ui3.nuxt.com/getting-started/contribution

Generates type stubs for the project.

```bash
pnpm run dev:prepare

```
Tokens:
Raw