### README Markdown

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

Provides setup, development, and production instructions for a Nuxt 3 starter project. Includes commands for dependency installation, running the development server, and building for production.

```markdown
# Nuxt 3 Minimal Starter

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

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

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

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

```

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

### Start Nuxt development server

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

Navigate into your project directory and run this command to start the Nuxt development server.

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

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

### Nuxt Configuration Example

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

Example of how to configure the code component's styles within your Nuxt application.

```APIDOC
## Nuxt Configuration Example

### Description

This example demonstrates how to integrate and configure the code component's styling within your `nuxt.config.ts` file.

### File
`nuxt.config.ts`

### Code
```typescript
export default defineAppConfig({
  uiPro: {
    prose: {
      code: {
        base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
        variants: {
          color: {
            primary: 'border border-primary/25 bg-primary/10 text-primary',
            secondary: 'border border-secondary/25 bg-secondary/10 text-secondary',
            success: 'border border-success/25 bg-success/10 text-success',
            info: 'border border-info/25 bg-info/10 text-info',
            warning: 'border border-warning/25 bg-warning/10 text-warning',
            error: 'border border-error/25 bg-error/10 text-error',
            neutral: 'border border-muted text-highlighted bg-muted'
          }
        },
        defaultVariants: {
          color: 'neutral'
        }
      }
    }
  }
})
```
```

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

### Installation using Package Managers

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

Instructions for installing the Nuxt UI package using pnpm, yarn, npm, and bun.

```APIDOC
## Installation

### Add to a Nuxt project

#### Install the Nuxt UI package

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

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

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

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

If you're using **pnpm**, ensure that you either set `shamefully-hoist=true` in your `.npmrc` file or install `tailwindcss` in your project's root directory.
```

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

### Implement PageColumns with PageCard

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

Example showing the setup of a data-driven list of testimonials rendered within a UPageColumns layout using UPageCard components.

```vue
<script setup lang="ts">
const testimonials = ref([
  {
    user: {
      name: 'Evan You',
      description: 'Author of Vue.js and Vite',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/499550?v=4',
        alt: 'Evan You'
      }
    },
    quote: 'Nuxt on Cloudflare infra with minimal effort - this is huge!'
  },
  {
    user: {
      name: 'Igor Minar',
      description: 'Software Engineer at Cloudflare',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/216296?v=4',
        alt: 'Igor Minar'
      }
    },
    quote: 'I love the polish and the batteries-included approach. NuxtHub takes web framework and hosting integration to a new level!'
  },
  {
    user: {
      name: 'Charlie Hield',
      description: 'Senior Creative Technologist',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/527849?v=4',
        alt: 'Charlie Hield'
      }
    },
    quote: 'NuxtHub is hands down the easiest way to get a project from zero to production on the Cloudflare stack!'
  },
  {
    user: {
      name: 'Israel Ortuño',
      description: 'Co-founder of VueJobs',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/1769417?v=4',
        alt: 'Israel Ortuño'
      }
    },
    quote: 'I can\'t find an excuse to not go full-stack with Nuxt from now on. Ship fast the Nuxt way, zero config. Just plug & deploy.'
  },
  {
    user: {
      name: 'Fayaz Ahmed',
      description: 'Indie Hacker',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/15716057?v=4',
        alt: 'Fayaz Ahmed'
      }
    },
    quote: 'Took me less than 90 seconds to deploy an app with DB, KV, File storage and Caching, all on the edge with just a single command.'
  },
  {
    user: {
      name: 'Tommy J. Vedvik',
      description: 'UX Developer',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/48070?v=4',
        alt: 'Tommy J. Vedvik'
      }
    },
    quote: 'Nuxt is becoming the best framework for bootstrappers imo. NuxtHub is a layer on top of Cloudflare services for cheap & fast full-stack edge hosting.'
  },
  {
    user: {
      name: 'Dario Piotrowicz',
      description: 'Web Developer at Cloudflare',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/61631103?v=4',
        alt: 'Dario Piotrowicz'
      }
    },
    quote: 'I love how NuxtHub combines, amplifies and simplifies the Cloudflare tooling with the wide and mature Nuxt ecosystem. I cannot wait to see how it will evolve and expand in the future!'
  },
  {
    user: {
      name: 'Markus Oberlehner',
      description: 'Web Developer',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/6883314?v=4',
        alt: 'Markus Oberlehner'
      }
    },
    quote: 'Just deployed my first site to Cloudflare using NuxtHub. Very sleek experience!'
  },
  {
    user: {
      name: 'Anthony Fu',
      description: 'Core team Vue.js, Vite & Nuxt',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/11247099?v=4',
        alt: 'Anthony Fu'
      }
    },
    quote: 'It\'s amazing to be able to run a single command and get existing Nuxt project deployed on edge within minutes! It felt like unlocking the missing infrastructure and UI for Cloudflare, enhancing the developer experience in such an extraordinary way.'
  },
  {
    user: {
      name: 'Jonathan Beckman',
      description: 'Founder of GuaranTee Time',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/90707158?v=4',
        alt: 'Jonathan Beckman'
      }
    },
    quote: 'NuxtHub and Cloudflare are my go to for full stack apps. The DX is joyous and far superior to any other platform I\'ve used. My team is able to iterate quickly, and build beautiful, performant apps with ease.'
  },
  {
    user: {
      name: 'Eckhardt Dreyer',
      description: 'Lead Developer at YG',
      avatar: {
        src: 'https://avatars.githubusercontent.com/u/37825447?v=4',
        alt: 'Eckhardt Dreyer'
      }
    },
    quote: 'At YG, our team recently grew and that meant more seats on all the tools we use. Migrating our hosting workflow to NuxtHub not only took just a few minutes but saved us money from our previous provider. NuxtHub provides an excellent management layer on top of our infrastructure and we\'re super happy about the move!'
  }
])
</script>

<template>
  <UPageColumns>
    <UPageCard
      variant="solid"
      to="https://cloudflare.com"
      icon="i-logos-cloudflare-icon"
      title="Cloudflare's Workers LaunchPad"
      description="NuxtHub is part of the Cloudflare's Workers Launchpad Cohort to make sure you get a first-class experience on top of Cloudflare's network."
```

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

### Install Dependencies with PNPM

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

Install project dependencies using PNPM after cloning the repository.

```bash
pnpm install

```

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

### Install Nuxt UI preview release via package.json

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

Replace the standard package version with the specific pkg.pr.new URL to install a preview build from a commit or PR.

```json
{
  "dependencies": {
-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}
```

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

### Initialize project with starter

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

Commands to create a new project and start the development server.

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

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

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

### Start Documentation Development Server

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

Run the development server for the Nuxt UI documentation.

```bash
pnpm run docs

```

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

### Badge Usage Examples

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

Examples demonstrating how to use the Nuxt UI Badge component with various props and configurations.

```APIDOC
## Badge Usage Examples

### Default Usage

Use the default slot to set the label of the Badge.

```html
<template>
  <UBadge>Badge</UBadge>
</template>
```

### Using `label` prop

You can achieve the same result by using the `label` prop.

```html
<template>
  <UBadge label="Badge" />
</template>
```

### Color Customization

Use the `color` prop to change the color of the Badge.

```html
<template>
  <UBadge color="neutral">Badge</UBadge>
</template>
```

### Variant Customization

Use the `variant` props to change the variant of the Badge.

```html
<template>
  <UBadge color="neutral" variant="outline">Badge</UBadge>
</template>
```

### Size Customization

Use the `size` prop to change the size of the Badge.

```html
<template>
  <UBadge size="xl">Badge</UBadge>
</template>
```

### Icon Integration

Use the `icon` prop to show an Icon inside the Badge.

```html
<template>
  <UBadge icon="i-lucide-rocket" size="md" color="primary" variant="solid">Badge</UBadge>
</template>
```

### Leading and Trailing Icons

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

```html
<template>
  <UBadge trailing-icon="i-lucide-arrow-right" size="md">Badge</UBadge>
</template>
```

### Avatar Integration

Use the `avatar` prop to show an Avatar inside the Badge.

```html
<template>
  <UBadge
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    size="md"
    color="neutral"
    variant="outline"
  >
    Badge
  </UBadge>
</template>
```

### `class` prop

Use the `class` prop to override the base styles of the Badge.

```html
<template>
  <UBadge class="font-bold rounded-full">Badge</UBadge>
</template>
```
```

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

### Complete Example with Multiple Overlays and Awaiting Results

Source: https://ui3.nuxt.com/composables/use-overlay

This example demonstrates creating and managing multiple modals and slideovers. It also shows how to await a result from one overlay (modalB) and pass it to another (slideoverA) upon its closure.

```javascript
<script setup lang="ts">
import { ModalA, ModalB, SlideoverA } from '#components'

const overlay = useOverlay()

// Create with default props
const modalA = overlay.create(ModalA, { title: 'Welcome' })
const modalB = overlay.create(ModalB)

const slideoverA = overlay.create(SlideoverA)

const openModalA = () => {
  // Open modalA, but override the title prop
  modalA.open({ title: 'Hello' })
}

const openModalB = async () => {
  // Open modalB, and wait for its result
  const modalBInstance = modalB.open()

  const input = await modalBInstance

  // Pass the result from modalB to the slideover, and open it
  slideoverA.open({ input })
}
</script>

<template>
  <button @click="openModalA">Open Modal</button>
</template>

```

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

### Install Iconify Collection with npm

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

Install icon data locally using npm for faster and more reliable icon serving. Replace {collection_name} with the desired Iconify collection.

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

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

### Install Iconify Collection with pnpm

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

Install icon data locally using pnpm for faster and more reliable icon serving. Replace {collection_name} with the desired Iconify collection.

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

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

### Install Iconify Collection with yarn

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

Install icon data locally using yarn for faster and more reliable icon serving. Replace {collection_name} with the desired Iconify collection.

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

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

### Install Nuxt UI package

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

Commands to install the @nuxt/ui package using various package managers.

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

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

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

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

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

### CodeGroup Installation

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

Install the @nuxt/ui-pro package using your preferred package manager.

```APIDOC
## CodeGroup Installation

Wrap your code-blocks around a `code-group` component to group them together in tabs.

### Installation using package managers

::code-group

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

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

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

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

::

Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
```

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

### Install @nuxt/content

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

Commands to add the @nuxt/content package using various package managers.

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

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

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

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

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

### Start Playground Development Server

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

Run the development server for the Nuxt UI playground to test components.

```bash
pnpm run dev

```

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

### App Component Setup

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

How to wrap your Nuxt application with the `UApp` component for global configurations.

```APIDOC
#### Wrap your app with App component

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

The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**.
```

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

### Skeleton Theming

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

Configuration examples for theming the Skeleton component in Nuxt.

```APIDOC
## Skeleton Theming

### `app.config.ts`
```typescript
export default defineAppConfig({
  ui: {
    skeleton: {
      base: 'animate-pulse rounded-md bg-elevated'
    }
  }
})
```

### `vite.config.ts` (Nuxt UI)
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        skeleton: {
          base: 'animate-pulse rounded-md bg-elevated'
        }
      }
    })
  ]
})
```

### `vite.config.ts` (Nuxt UI Pro)
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        skeleton: {
          base: 'animate-pulse rounded-md bg-elevated'
        }
      }
    })
  ]
})
```
```

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

### Install Iconify Collections with NPM

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

Install icon data locally using NPM to ensure faster and more reliable icon serving, especially for SSR and client-side rendering. Replace `{collection_name}` with the desired Iconify collection.

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

```

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

### Install Iconify Collections with PNPM

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

Install icon data locally using PNPM to ensure faster and more reliable icon serving, especially for SSR and client-side rendering. Replace `{collection_name}` with the desired Iconify collection.

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

```

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

### Install Iconify Collections with Yarn

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

Install icon data locally using Yarn to ensure faster and more reliable icon serving, especially for SSR and client-side rendering. Replace `{collection_name}` with the desired Iconify collection.

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

```

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

### Implement CodeGroup

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

Example of using the ::code-group syntax to create a tabbed interface for code blocks.

```bash
::code-group

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

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

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

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

::
```

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

### Container Theming

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

Configuration examples for theming the Container component in Nuxt UI.

```APIDOC
## Container Theming

### `app.config.ts` Configuration

```typescript
export default defineAppConfig({
  ui: {
    container: {
      base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
    }
  }
})
```

### `vite.config.ts` Configuration (Nuxt UI)

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        container: {
          base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
        }
      }
    })
  ]
})
```

### `vite.config.ts` Configuration (Nuxt UI Pro)

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

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        container: {
          base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
        }
      }
    })
  ]
})
```
```

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

### ButtonGroup Examples

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

Demonstrates various use cases of the ButtonGroup component with other UI elements.

```APIDOC
## ButtonGroup Examples

### With Input

```html
<template>
  <UButtonGroup>
    <UInput color="neutral" variant="outline" placeholder="Enter token" />
    <UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
  </UButtonGroup>
</template>
```

### With Tooltip

```html
<template>
  <UButtonGroup>
    <UInput color="neutral" variant="outline" placeholder="Enter token" />
    <UTooltip text="Copy to clipboard">
      <UButton
        color="neutral"
        variant="subtle"
        icon="i-lucide-clipboard"
      />
    </UTooltip>
  </UButtonGroup>
</template>
```

### With Dropdown

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

const items: DropdownMenuItem[] = [
  {
    label: 'Team',
    icon: 'i-lucide-users'
  },
  {
    label: 'Invite users',
    icon: 'i-lucide-user-plus',
    children: [
      {
        label: 'Invite by email',
        icon: 'i-lucide-send-horizontal'
      },
      {
        label: 'Invite by link',
        icon: 'i-lucide-link'
      }
    ]
  },
  {
    label: 'New team',
    icon: 'i-lucide-plus'
  }
]
</script>

<template>
  <UButtonGroup>
    <UButton color="neutral" variant="subtle" label="Settings" />
    <UDropdownMenu :items="items">
      <UButton
        color="neutral"
        variant="outline"
        icon="i-lucide-chevron-down"
      />
    </UDropdownMenu>
  </UButtonGroup>
</template>
```

### With Badge

```html
<template>
  <UButtonGroup>
    <UBadge color="neutral" variant="outline" size="lg" label="https://" />
    <UInput color="neutral" variant="outline" placeholder="www.example.com" />
  </UButtonGroup>
</template>
```
```

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

### Theme Configuration

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

Configuration examples for integrating UForm styling within Nuxt projects.

```APIDOC
## Theme Configuration

### app.config.ts

```typescript
export default defineAppConfig({
  ui: {
    form: {
      base: ''
    }
  }
})
```

### vite.config.ts (with @nuxt/ui)

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        form: {
          base: ''
        }
      }
    })
  ]
})
```

### vite.config.ts (with @nuxt/ui-pro)

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

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        form: {
          base: ''
        }
      }
    })
  ]
})
```
```

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

### Install Nuxt UI Pro v3

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

Add the latest version of Nuxt UI Pro to your project.

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

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

### Basic Link Usage

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

A basic example of the `ULink` component rendering a link with the `to` prop.

```vue
<template>
  <ULink to="/components/link">Link</ULink>
</template>

```

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

### Configure Code Component Props

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

Examples of using color and language props for code blocks.

```text
`inline code`
```

```text
`inline code`{color="error"}
```

```text
`nuxt.config.ts`{lang="ts-type"}
```

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

### Display Logos with Script Setup and Items

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

This example demonstrates using a script setup block to define the `items` array before passing it to the `UPageLogos` component. This is useful for dynamic lists.

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

```

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

### Basic FileUpload Usage

Source: https://ui3.nuxt.com/components/file-upload

Use the `v-model` directive to control the value of the FileUpload. This example shows a basic setup.

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

<template>
  <UFileUpload v-model="value" class="w-96 min-h-48" />
</template>

```

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

### Create Nuxt project with Nuxt UI starter

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

Use this command to create a new Nuxt project with Nuxt UI pre-configured using the official starter template.

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

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

### Integrate Nuxt UI Vite Plugin

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

Configure Vite to use the Nuxt UI plugin for theme integration. This example shows the setup for `@nuxt/ui/vite`.

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        banner: {
          slots: {
            root: [
              'relative z-50 w-full',
              'transition-colors'
            ],
            container: 'flex items-center justify-between gap-3 h-12',
            left: 'hidden lg:flex-1 lg:flex lg:items-center',
            center: 'flex items-center gap-1.5 min-w-0',
            right: 'lg:flex-1 flex items-center justify-end',
            icon: 'size-5 shrink-0 text-inverted pointer-events-none',
            title: 'text-sm text-inverted font-medium truncate',
            actions: 'flex gap-1.5 shrink-0 isolate',
            close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
          },
          variants: {
            color: {
              primary: {
                root: 'bg-primary'
              },
              secondary: {
                root: 'bg-secondary'
              },
              success: {
                root: 'bg-success'
              },
              info: {
                root: 'bg-info'
              },
              warning: {
                root: 'bg-warning'
              },
              error: {
                root: 'bg-error'
              },
              neutral: {
                root: 'bg-inverted'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              to: true,
              class: {
                root: 'hover:bg-primary/90'
              }
            },
            {
              color: 'neutral',
              to: true,
              class: {
                root: 'hover:bg-inverted/90'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})
```

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

### Using Nuxt Starter Template

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

Command to create a new Nuxt project with Nuxt UI pre-configured using the starter template.

```APIDOC
### Use our Nuxt Starter

Start your project using the `nuxt/starter#ui` template with Nuxt UI pre-configured.

Create a new project locally by running the following command:

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

The `<my-app>` argument is the name of the directory where the project will be created, replace it with your project name.

Once the installation is complete, navigate into your project and start the development server:

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

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

### Tabs with Content Slot

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

Use the `#content` slot to customize the content displayed within each tab item. This example shows basic tab setup with labels and icons.

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

const items: TabsItem[] = [
  {
    label: 'Account',
    icon: 'i-lucide-user'
  },
  {
    label: 'Password',
    icon: 'i-lucide-lock'
  }
]
</script>

<template>
  <UTabs :items="items" class="w-full">
    <template #content="{ item }">
      <p>This is the {{ item.label }} tab.</p>
    </template>
  </UTabs>
</template>

```

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

### Integrate Nuxt UI Pro Vite Plugin

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

Configure Vite to use the Nuxt UI Pro plugin for theme integration. This example shows the setup for `@nuxt/ui-pro/vite`.

```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: {
        banner: {
          slots: {
            root: [
              'relative z-50 w-full',
              'transition-colors'
            ],
            container: 'flex items-center justify-between gap-3 h-12',
            left: 'hidden lg:flex-1 lg:flex lg:items-center',
            center: 'flex items-center gap-1.5 min-w-0',
            right: 'lg:flex-1 flex items-center justify-end',
            icon: 'size-5 shrink-0 text-inverted pointer-events-none',
            title: 'text-sm text-inverted font-medium truncate',
            actions: 'flex gap-1.5 shrink-0 isolate',
            close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
          },
          variants: {
            color: {
              primary: {
                root: 'bg-primary'
              },
              secondary: {
                root: 'bg-secondary'
              },
              success: {
                root: 'bg-success'
              },
              info: {
                root: 'bg-info'
              },
              warning: {
                root: 'bg-warning'
              },
              error: {
                root: 'bg-error'
              },
              neutral: {
                root: 'bg-inverted'
              }
            },
            to: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              to: true,
              class: {
                root: 'hover:bg-primary/90'
              }
            },
            {
              color: 'neutral',
              to: true,
              class: {
                root: 'hover:bg-inverted/90'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})
```

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

### Error Handling in error.vue with UError Component

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

Integrate the UError component within your `error.vue` file to display errors. This example shows a typical setup including UApp, UHeader, and UFooter for a full-height layout.

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

```

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

### Markdown H1 example

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

Example of an H1 heading in markdown.

```markdown
# Nuxt UI
```

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

### Start Vue Playground Development Server

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

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

```bash
pnpm run dev:vue

```

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

### PageBody Component Example with Nuxt Content

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

An example of integrating the PageBody component with Nuxt Content to render page content, including navigation and table of contents.

```APIDOC
## Examples

While these examples use Nuxt Content, the components can be integrated with any content management system.

### Within a page

Use the PageBody component in a page to display the content of the page:

`pages/[...slug].vue`

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

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})
</script>

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

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

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

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>
```

In this example, we use the `ContentRenderer` component from `@nuxt/content` to render the content of the page.
```

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

### Example: Blog Page Integration

Source: https://ui3.nuxt.com/components/blog-posts

Illustrates how to integrate the UBlogPosts component within a Nuxt page to create a blog listing page, fetching posts using Nuxt Content.

```APIDOC
## Example: Blog Page Integration

### Description
Demonstrates how to use the `UBlogPosts` component within a Nuxt page to display a list of blog posts, fetching data using `@nuxt/content`.

### Method
Page Integration

### Endpoint
N/A (Page Component)

### Parameters
#### Props (UBlogPosts)
- **posts** (BlogPostProps[]) - Populated by `useAsyncData` and `queryCollection`.

### Request Example
```html
<!-- pages/blog/index.vue -->
<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => queryCollection('posts').all())
</script>

<template>
  <UPage>
    <UPageHero title="Blog" />

    <UPageBody>
      <UContainer>
        <UBlogPosts>
          <UBlogPost
            v-for="(post, index) in posts"
            :key="index"
            v-bind="post"
            :to="post.path" 
          />
        </UBlogPosts>
      </UContainer>
    </UPageBody>
  </UPage>
</template>
```

### Response
#### Success Response (Rendered Page)
- A blog page displaying a list of posts fetched from Nuxt Content.

#### Response Example
(No direct response example, as it's a rendered page)

### Note
In this example, the `to` prop of `UBlogPost` is overridden with `post.path` because `@nuxt/content` uses the `path` property for routing.
```

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

### Create and Open Modal with useOverlay

Source: https://ui3.nuxt.com/composables/use-overlay

Use the auto-imported `useOverlay` composable to create and open a modal. The `overlay.create` method returns an instance that can be used to control the modal's lifecycle.

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

const overlay = useOverlay()

const modal = overlay.create(LazyModalExample)

async function openModal() {
  modal.open()
}
</script>

```

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

### Install Nuxt UI Plugin in TemPad Dev

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

Install the `@nuxt` or `@nuxt/pro` package within TemPad Dev's plugins section to inspect Nuxt UI components.

```bash
npm install @nuxt
# or
npm install @nuxt/pro
```

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

### App Setup with Navigation Data

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

Provides navigation data to the application. This is typically done in the main `app.vue` file.

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

provide('navigation', navigation)
</script>

```

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

### UChatMessages Component - Examples

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

These chat components are designed to be used with the `useChat` composable from Vercel AI SDK. Check out the source code of our AI Chat template on GitHub for a real-life example.

```APIDOC
## Examples

These chat components are designed to be used with the `useChat` composable from **Vercel AI SDK**.

Check out the source code of our **AI Chat template** on GitHub for a real-life example.
```

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

### Install Nuxt UI with bun

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

Use this command to add the Nuxt UI package to your project using bun.

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

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

### Configure VSCode settings

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

Recommended settings for Tailwind CSS IntelliSense.

```json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}
```

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

### Iterator Method

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

Method to get an iterator for the string.

```APIDOC
## __@iterator@420

### Description
Iterator for the string.

### Method
`[Symbol.iterator]`

### Response
#### Success Response (200)
- **StringIterator<string>** (object) - An iterator for the string.
```

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

### Integration Example

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

Shows how to integrate the UPageLinks component within a page, specifically in the `bottom` slot of a UContentToc component.

```APIDOC
## Integrating UPageLinks in a Page

### Description
This example demonstrates using the `UPageLinks` component within the `bottom` slot of `UContentToc` to display community links below the table of contents.

### Usage Example
```vue
<script setup lang="ts">
import type { PageLink } from '@nuxt/ui-pro'

const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})

const links = computed<PageLink[]>(() => [{
  icon: 'i-lucide-file-pen',
  label: 'Edit this page',
  to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?.stem}.md`,
  target: '_blank'
}, {
  icon: 'i-lucide-star',
  label: 'Star on GitHub',
  to: 'https://github.com/nuxt/ui',
  target: '_blank'
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}])
</script>

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

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

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

    <template #right>
      <UContentToc :links="page.body.toc.links">
        <template #bottom>
          <USeparator type="dashed" />

          <UPageLinks title="Community" :links="links" />
        </template>
      </UContentToc>
    </template>
  </UPage>
</template>
```
```

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

### Vite Configuration Setup

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

Basic Vite configuration for a Vue project.

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

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

### Run Nuxt Project with Bun

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

Use this command to run your Nuxt project's preview build using Bun. Ensure Bun is installed and configured in your project.

```bash
bun run preview
```

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

### Skeleton Component Usage

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

Example of how to implement the Skeleton component in your Vue templates.

```APIDOC
## Skeleton Component Usage

### Description
This example demonstrates how to use the `USkeleton` component to create placeholder elements while content is loading.

### Request Example
```html
<template>
  <div class="flex items-center gap-4">
    <USkeleton class="h-12 w-12 rounded-full" />

    <div class="grid gap-2">
      <USkeleton class="h-4 w-[250px]" />
      <USkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>
```
```

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

### USelect Basic Usage

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

Demonstrates the basic usage of the USelect component with an array of strings.

```APIDOC
## USelect Basic Usage

### Description
This example shows how to use the `USelect` component with a simple array of strings for its options.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **v-model** (any) - Required - Binds the selected value.
- **items** (Array<string | number | boolean | object>) - Required - The list of options to display.
- **class** (string) - Optional - Custom CSS classes for the component.

### Request Example
```html
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <USelect v-model="value" :items="items" class="w-48" />
</template>
```

### Response
N/A (Component Usage)
```

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

### Install Nuxt I18n

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

Commands to add the Nuxt I18n module to your project.

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

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

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

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

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

### String Length and Substring

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

Methods for getting string length and extracting substrings.

```APIDOC
## length

### Description
Returns the length of a String object.

### Method
`length`

### Response
- **number** - The length of the string.
```

```APIDOC
## substr

### Description
Gets a substring beginning at the specified location and having the specified length.

### Method
`substr`

### Parameters
#### Query Parameters
- **from** (number) - Required - The starting position of the substring.
- **length** (number | undefined) - Optional - The length of the substring.

### Response
- **string** - The extracted substring.
```