Nuxt UI

https://ui2.nuxt.com/
Admin
Nuxt UI is a comprehensive UI component library for Nuxt that provides fully styled, customizable,...
Tokens:72,992
Snippets:919
Trust Score:9.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://ui2.nuxt.com/getting-started/contributing

Install project dependencies using pnpm.

```bash
pnpm install
```

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

### Start Development Server

Source: https://ui2.nuxt.com/playground

Command to launch the development server.

```bash
npm run dev
```

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

### Commit Examples

Source: https://ui2.nuxt.com/getting-started/contributing

Examples of conventional commit messages with component scopes.

```text
feat(Alert): new component
chore(Table): improve accessibility
```

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

### Toggle Component Usage Examples

Source: https://ui2.nuxt.com/components/toggle

A collection of configuration examples for the Toggle component, including basic usage, styling, sizing, icons, loading states, disabled states, and general configuration.

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

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

### Install v-calendar and date-fns dependencies

Source: https://ui2.nuxt.com/components/date-picker

Run this command to install the required packages for the DatePicker component.

```bash
pnpm add v-calendar@next date-fns
```

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

### Run Development Environments

Source: https://ui2.nuxt.com/getting-started/contributing

Commands to start the documentation site or the component playground.

```bash
pnpm run dev
```

```bash
pnpm run play
```

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

### Install Nuxt Content

Source: https://ui2.nuxt.com/pro/getting-started/content

Command to install the @nuxt/content module.

```bash
pnpm i @nuxt/content@2
```

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

### Install Dependencies

Source: https://ui2.nuxt.com/playground

Commands to install project dependencies using various package managers.

```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
```

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

### Install Icon Collections

Source: https://ui2.nuxt.com/getting-started/theming

Install specific icon collections locally to improve performance and reliability.

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

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

### PageGrid Configuration Example

Source: https://ui2.nuxt.com/pro/components/page-grid

Default configuration object defining the grid layout classes.

```javascript
{
  wrapper: 'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8'
}
```

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

### YAML Content Configuration

Source: https://ui2.nuxt.com/pro/components/landing-section

Example YAML configuration for sections with custom slots and feature lists.

```yaml
sections:
  - title: 'The power of<br><span class="text-primary">Vue Components</span>'
    description: 'We love Vue Single-File Components as much as you do.'
    class: 'dark bg-gray-900'
    align: left
    slot: code
    code: |
      ```vue [app.vue]
      <template>
        <NuxtPage />
      </template>
      ```
  - title: 'Compose with<br><span class="text-primary">everything you need.</span>'
    slot: features
    features:
      - title: 'Routing & Layouts'
        description: 'File based routing system to build complex views and interfaces with a powerful and conventional approach.'
        icon: 'i-ph-signpost-duotone'
      - title: 'Data Fetching'
        description: 'Composables that run on the server to fetch data for your components and enable you to render content in different ways.'
        icon: 'i-ph-plugs-connected-duotone'
      - title: 'Assets & Style'
        description: 'Image, Font and Script optizations with a built-in support for CSS Modules, Sass, PostCSS, CSS-in-JS and more.'
        icon: 'i-ph-image-duotone'
```

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

### Install Nuxt UI Pro dependency

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

Install the required package using pnpm. Note that @nuxt/ui is included as a dependency.

```bash
pnpm i @nuxt/ui-pro@1
```

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

### Configure Nuxt UI

Source: https://ui2.nuxt.com/pro/prose/code-group

Example configuration for Nuxt UI within the nuxt.config.ts file.

```typescript
export default defineNuxtConfig({
  ui: {
    prefix: 'Nuxt'
  }
})
```

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

### Define Pricing Data in YAML

Source: https://ui2.nuxt.com/pro/components/pricing-grid

Example YAML configuration for pricing plans to be fetched by @nuxt/content.

```yaml
pricing:
  title: Pricing
  description: Choose the plan that works for you.
  plans:
    - title: Free
      description: Get started for free in development.
    - title: Solo
      description: For bootstrappers and indie hackers.
      price: $199
      scale: true
      highlight: true
    - title: Team
      description: Unlimited license for growing teams.
      price: $699
```

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

### Install Nuxt UI Module

Source: https://ui2.nuxt.com/components/accordion

Command to add the @nuxt/ui dependency to a Nuxt project.

```bash
$ npx nuxi@latest module add ui
```

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

### Define FAQ Data in YAML

Source: https://ui2.nuxt.com/pro/components/landing-faq

Example YAML configuration for FAQ items to be used with @nuxt/content.

```yaml
faq:
  title: Frequently Asked Questions
  description: If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
  items:
    - label: Do you have a free trial?
      content: We have much better than a free trial, you can use Nuxt UI Pro for free in development mode. Once you are ready to deploy your application, you can purchase a license.
      defaultOpen: true
    - label: Can I use Nuxt UI Pro for Open Source projects?
      content: Yes, you can use Nuxt UI Pro for your open source projects as well as your commercial projects as long as you don't sell Nuxt UI Pro as a product and that you don't share your license key.
    - label: What does “Unlimited minor & patch updates” include?
      content: We add new components and improvements to Nuxt UI Pro as we get new ideas and feedback, you will receive these updates for the major version you purchased. :br **Your license key will work forever for the major version.** We may release a major version including more advanced components and features in the future, you will be able to upgrade to this version with a generous discount.
    - label: Do you offer technical support?
      content: Once you sign up you get access to our private GitHub repository, where you can ask questions, report bugs or feature requests and get help from other customers. If you require more specialised support or consultancy, contact us at ui-pro@nuxt.com.
```

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

### Install Nuxt UI preview releases

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

Replace the standard package version in package.json with a pkg.pr.new URL to use continuous preview builds.

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

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

### BlogList Implementation in Vue

Source: https://ui2.nuxt.com/pro/components/blog-list

Example of fetching content and rendering the BlogList component within a LandingSection.

```vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.blog.title" :description="page.blog.description">
    <UBlogList>
      <UBlogPost v-for="(post, index) in page.blog.posts" :key="index" v-bind="post" />
    </UBlogList>
  </ULandingSection>
</template>
```

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

### UTable row data example

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

Example of the data structure provided to the row slot prop.

```json
{
  "id": 2,
  "name": "Courtney Henry",
  "title": "Designer",
  "email": "courtney.henry@example.com",
  "role": "Admin",
  "hasExpand": true
}
```

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

### LandingTestimonial Implementation

Source: https://ui2.nuxt.com/pro/components/landing-testimonial

Example Vue component implementation using ULandingTestimonial within a UPageColumns layout.

```vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.testimonials.title" :description="page.testimonials.description">
    <UPageColumns>
      <!-- Hack for Safari -->
      <div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
        <ULandingTestimonial v-bind="testimonial" />
      </div>
    </UPageColumns>
  </ULandingSection>
</template>
```

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

### Basic ContentSurround Usage

Source: https://ui2.nuxt.com/pro/components/content-surround

Demonstrates the basic setup for fetching surround data and rendering the UContentSurround component.

```vue
<script setup lang="ts">
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryContent()
    .where({ _extension: 'md', navigation: { $ne: false } })
    .only(['title', 'description', '_path'])
    .findSurround(withoutTrailingSlash(route.path))
}, { default: () => [] })
</script>

<template>
  <UContentSurround :surround="surround" />
</template>
```

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

### Alert Usage Examples

Source: https://ui2.nuxt.com/components/alert

Various configurations for the Alert component including basic usage, icons, avatars, styling, close buttons, and actions.

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

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

### Testimonial Data Structure

Source: https://ui2.nuxt.com/pro/components/landing-testimonial

Example YAML configuration for testimonial items to be used with @nuxt/content.

```yaml
testimonials:
  title: What people are saying
  description: Hear from our customers about their experience.
  items:
    - quote: Nostrud tempor sunt fugiat.
      author:
        name: Rose Roberson
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=1
    - quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
      author:
        name: Chace Rodgers
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=7
    - quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor.
      author:
        name: Cornelius Sheppard
        description: CEO at Company
        avatar:
          src: https://i.pravatar.cc/120?img=3
```

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

### Define LandingCTA Content in YAML

Source: https://ui2.nuxt.com/pro/components/landing-cta

Example configuration for a LandingCTA component using a YAML file for @nuxt/content.

```yaml
cta:
  title: Trusted and supported by our amazing community
  description: We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
  links:
    - label: 'Get started'
      color: 'gray'
      size: 'md'
    - label: 'Learn more'
      variant: 'link'
      color: 'gray'
      size: 'md'
      trailingIcon: 'i-heroicons-arrow-right-20-solid'
```

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

### Blog Content YAML Schema

Source: https://ui2.nuxt.com/pro/components/blog-list

Example YAML structure for defining blog posts to be consumed by the component.

```yaml
blog:
  title: Blog
  description: Read the latest news from our blog.
  posts:
    - title: Nuxt 3.9
      description: Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
      image:
        src: https://picsum.photos/id/10/640/360
        alt: Nuxt 3.9
    - title: Nuxt DevTools 1.0
      description: Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
      image:
        src: https://picsum.photos/id/11/640/360
        alt: Nuxt DevTools 1.0
    - title: Nuxt 3.8
      description: Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
      image:
        src: https://picsum.photos/id/12/640/360
        alt: Nuxt 3.8
```

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

### Define Hero Content in YAML

Source: https://ui2.nuxt.com/pro/components/landing-hero

Configuration example for defining hero content using a YAML file, suitable for @nuxt/content.

```yaml
navigation: false
hero:
  title: The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
  description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
  links:
    - label: Get Started
      to: /pro/getting-starated
      size: lg
      icon: i-heroicons-rocket-launch
    - label: Buy now
      to: /pro/pricing
      color: gray
      icon: i-heroicons-ticket
      size: lg
```

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

### Customize Tabs with Slots

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

Examples of using default, icon, and item slots to customize Tabs component rendering.

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

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

### Implement LandingCTA in Nuxt Page

Source: https://ui2.nuxt.com/pro/components/landing-cta

Example of fetching content and binding it to the ULandingCTA component within a Vue template.

```vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection>
    <ULandingCTA v-bind="page.cta" card />
  </ULandingSection>
</template>
```

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

### Initialize a Nuxt UI Pro project

Source: https://ui2.nuxt.com/pro/getting-started

Use the Nuxt CLI to scaffold a new project using a specific template.

```bash
npx nuxi init -t github:nuxt-ui-templates/dashboard#v1 my-dashboard
```

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

### Preview Production Build

Source: https://ui2.nuxt.com/playground

Command to preview the production build locally.

```bash
npm run preview
```

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

### Build for Production

Source: https://ui2.nuxt.com/playground

Command to compile the application for production deployment.

```bash
npm run build
```

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

### DatePicker example data

Source: https://ui2.nuxt.com/components/date-picker

JSON representation of the DatePicker state.

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

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

### Expandable Row Data

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

Example data structure for an expandable row.

```json
{
  "id": 1,
  "name": "Lindsay Walton",
  "title": "Front-end Developer",
  "email": "lindsay.walton@example.com",
  "role": "Member"
}
```

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

### DashboardSection Implementation

Source: https://ui2.nuxt.com/pro/components/dashboard-section

Example usage of DashboardSection within a Nuxt page component.

```vue
<template>
  <UDashboardPanelContent>
    <UDashboardSection title="Theme">
      <template #links>
        <UColorModeSelect />
      </template>
    </UDashboardSection>

    <UDivider class="mb-4" />

    <UDashboardSection title="Profile">
      <template #links>
        <UButton type="submit" label="Save changes" color="black" />
      </template>

      <UFormGroup>
        <UInput />
      </UFormGroup>
    </UDashboardSection>
  </UDashboardPanelContent>
</template>
```

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

### Newsletter Content Configuration

Source: https://ui2.nuxt.com/pro/components/page-hero

Example YAML configuration for a newsletter page using @nuxt/content.

```yaml
title: The Nuxt Newsletter
head.title: Nuxt Newsletter
description: 'Get the latest releases and news about Nuxt and its ecosystem with our newsletter.'
navigation: false
hero:
  title: The <span class="text-primary">Nuxt</span> Newsletter
  align: 'center'
```

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

### Create a Dashboard Layout

Source: https://ui2.nuxt.com/pro/getting-started

Use UDashboardLayout and UDashboardPanel to build a responsive multi-column dashboard interface.

```vue
<template>
  <UDashboardLayout>
    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <template #header>
          <UDashboardSearchButton />
        </template>

        <UDashboardSidebarLinks />
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />

    <UDashboardSearch />
  </UDashboardLayout>
</template>

```

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

### Display a platform-aware shortcut

Source: https://ui2.nuxt.com/pro/prose/shortcut

Use the meta value to automatically render the appropriate command key for the user's platform.

```markdown
:shortcut{value="meta"} :shortcut{value="K"}
```

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

### Dashboard Layout Integration

Source: https://ui2.nuxt.com/pro/components/dashboard-panel

Examples of integrating DashboardPanel within layout and page components.

```vue
<template>
  <UDashboardLayout>
    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar />

      <UDashboardSidebar />
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>
```

```vue
<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <UDashboardPage>
    <UDashboardPanel id="inbox" :width="400" :resizable="{ min: 300, max: 500 }">
      <UDashboardNavbar title="Inbox" />

      <UDashboardPanelContent />
    </UDashboardPanel>

    <UDashboardPanel v-model="isOpen" collapsible grow side="right">
      <UDashboardNavbar />

      <UDashboardToolbar />

      <UDashboardPanelContent />
    </UDashboardPanel>
  </UDashboardPage>
</template>
```

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

### Customize Selectable Header

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

Usage and implementation examples for the select-header slot to customize the 'select all' checkbox.

```vue
<template>
  <UTable v-model="selectable">
    <template #select-header="{ checked, change, indeterminate }">
      <!-- Place your custom component here -->
    </template>
  </UTable>
</template>
```

```vue
<template>
  <UTable>
    <!-- Header checkbox customization -->
    <template #select-header="{ indeterminate, checked, change }">
      <input
        type="checkbox"
        :indeterminate="indeterminate"
        :checked="checked"
        @change="e => change(e.target.checked)"
      />
    </template>
  </UTable>
</template>
```

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

### Clone Repository

Source: https://ui2.nuxt.com/getting-started/contributing

Initial step to clone the nuxt/ui repository to your local machine.

```bash
git clone https://github.com/nuxt/ui.git
```

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

### Enable Corepack

Source: https://ui2.nuxt.com/getting-started/contributing

Enable Corepack to manage package manager versions.

```bash
corepack enable
```

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

### Create a pricing page

Source: https://ui2.nuxt.com/pro/getting-started

Implement a pricing page layout with plan toggles and grids using UPricing components.

```vue
<template>
  <ULandingHero>
    <template #links>
      <UPricingToggle />
    </template>
  </ULandingHero>

  <ULandingSection>
    <UPricingGrid>
      <UPricingCard />
      <UPricingCard />
      <UPricingCard />
    </UPricingGrid>
  </ULandingSection>

  <ULandingSection>
    <ULandingLogos />
  </ULandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </ULandingSection>
</template>
```

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

### Implement DashboardSidebarLinks in Layout

Source: https://ui2.nuxt.com/pro/components/dashboard-sidebar-links

Example of using multiple DashboardSidebarLinks instances within a UDashboardSidebar component.

```vue
<template>
  <UDashboardLayout>
    <UDashboardPanel>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <UDashboardSidebarLinks />

        <UDivider />

        <UDashboardSidebarLinks />

        <div class="flex-1" />

        <UDashboardSidebarLinks />

        <UDivider class="sticky bottom-0" />
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>
```

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

### Build a blog page

Source: https://ui2.nuxt.com/pro/getting-started

Display articles using UBlogList and UBlogPost components within a page body.

```vue
<template>
  <UContainer>
    <UPageHeader />

    <UPageBody>
      <UBlogList>
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
      </UBlogList>
    </UPageBody>
  </UContainer>
</template>
```

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

### Construct a landing page

Source: https://ui2.nuxt.com/pro/getting-started

Assemble a marketing page using landing components like ULandingHero, ULandingGrid, and ULandingSection.

```vue
<template>
  <ULandingHero>
    <ULandingLogos />
  </ULandingHero>

  <ULandingSection>
    <ULandingGrid>
      <ULandingCard />
      <ULandingCard />
      <ULandingCard />
    </ULandingGrid>
  </ULandingSection>

  <ULandingSection>
    <UPageColumns>
      <ULandingTestimonial />
      <ULandingTestimonial />
      <ULandingTestimonial />
    </UPageColumns>
  </ULandingSection>

  <ULandingSection>
    <ULandingCTA />
  </ULandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </ULandingSection>
</template>
```

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

### Create a landing page with Nuxt UI Pro components

Source: https://ui2.nuxt.com/pro/getting-started/structure

Uses ULandingHero and ULandingSection components to define the layout of the index page.

```vue
<template>
  <div>
    <ULandingHero description="Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.">
      <template #title>
        The <span class="text-primary block lg:inline-block">Building Blocks</span> for Modern Web apps
      </template>
    </ULandingHero>

    <ULandingSection title="The freedom to build anything" align="left" />

    <ULandingSection title="The flexibility to control your data" align="right" />
  </div>
</template>
```

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

### Defining Tailwind Configuration in TypeScript

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

Use a TypeScript file for tailwind.config to get better type support.

```typescript
import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}
```

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

### Using UI Prefix for IntelliSense

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

Prefix objects with /* ui */ in SFCs to trigger IntelliSense.

```vue
<template>
  <UCard :ui="ui" />
</template>

<script setup lang="ts">
const ui = /* ui */ {
  background: 'bg-white dark:bg-slate-900'
}
</script>
```

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

### Customize Selectable Data Row

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

Usage and implementation examples for the select-data slot to customize individual row selection checkboxes.

```vue
<template>
  <UTable v-model="selectable">
    <template #select-data="{ checked, change }">
      <!-- Place your custom component here -->
    </template>
  </UTable>
</template>
```

```vue
<template>
  <UTable>
    <!-- Row checkbox customization -->
    <template #select-data="{ checked, change }">
      <input
        type="checkbox"
        :checked="checked"
        @change="e => change(e.target.checked)"
      />
    </template>
  </UTable>
</template>
```

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

### Configure Shortcut component styles

Source: https://ui2.nuxt.com/pro/prose/shortcut

Define custom wrapper classes in the configuration object.

```javascript
{
  wrapper: '!my-0 align-text-top'
}
```

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

### Custom sort function

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

Example of a custom sort function for table columns, handling price parsing and direction-based comparison.

```javascript
(a, b, direction) => {
  if (!a || !b) return 0
  const aPrice = parseInt(a.replace(/[,$]/g, ""))
  const bPrice = parseInt(b.replace(/[,$]/g, ""))
  return direction === "asc" ? aPrice - bPrice : bPrice - aPrice
}
```

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

### Display a basic keyboard shortcut

Source: https://ui2.nuxt.com/pro/prose/shortcut

Use the shortcut component to render a single key character.

```markdown
:shortcut{value="K"}
```

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

### Configuring VSCode for Tailwind CSS

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

Add these settings to .vscode/settings.json to enable Tailwind CSS IntelliSense.

```json
{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  }
}
```

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

### Tabs Component Usage

Source: https://ui2.nuxt.com/pro/prose/tabs

Example of implementing a Tabs component with Code and Preview sections. Wrap children in a div when using code blocks or to avoid prop pass-through.

```mdc
::tabs
  ::div
  ---
  label: Code
  icon: i-heroicons-code-bracket-square
  ---

  ```mdc
  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  ```
  ::

  ::div
  ---
  label: Preview
  icon: i-heroicons-magnifying-glass-circle
  ---

  ::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
  ::
::
```

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

### Use continuous preview releases

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

Update package.json to use a specific commit hash or PR number from pkg.pr.new.

```json
{
  "dependencies": {
-   "@nuxt/ui-pro": "^1.7.0",
+   "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@c1e46b5",
  }
}
```

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

### Configure VSCode IntelliSense for Link classes

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

Add these settings to .vscode/settings.json to enable autocompletion for active-class and inactive-class in Tailwind CSS.

```json
{
    "tailwindCSS.classAttributes": [
      "active-class",
      "inactive-class"
  ],
}
```

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

### Generate Type Stubs

Source: https://ui2.nuxt.com/getting-started/contributing

Prepare the environment by generating type stubs.

```bash
pnpm run dev:prepare
```

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

### BlogList Component Configuration

Source: https://ui2.nuxt.com/pro/components/blog-list

Default configuration object for the BlogList component wrapper.

```json
{
  "wrapper": "flex flex-col lg:grid lg:grid-cols-3 gap-x-8 gap-y-16"
}
```

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

### Displaying a loading state in UTable

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

Shows the JSON structure for a loading state and how to integrate UTable with the useLazyAsyncData composable.

```json
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
```

```vue
<script setup lang="ts">
const columns = [...]

const { status, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
</script>

<template>
  <UTable :rows="people" :columns="columns" :loading="status === 'pending'" />
</template>
```

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

### Manual ContentSearch Implementation

Source: https://ui2.nuxt.com/pro/components/content-search-button

Implementation of the search modal toggle using the useUIState composable.

```vue
<script setup lang="ts">
const { toggleDocsSearch, isDocsSearchModalOpen } = useUIState()
</script>

<template>
  <UButton label="Open" @click="toggleDocsSearch" />
</template>
```

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

### PricingToggle Configuration

Source: https://ui2.nuxt.com/pro/components/pricing-toggle

Default configuration object defining the styling and layout classes for the PricingToggle component.

```javascript
{
  wrapper: 'ring-1 ring-gray-300 dark:ring-gray-700 flex items-center relative h-8 w-auto flex-shrink-0 cursor-pointer rounded-full p-1 w-full focus:outline-none',
  marker: 'w-1/2 text-white dark:text-gray-900 pointer-events-none inline-block h-6 transform rounded-full bg-gray-900 dark:bg-white shadow transition duration-200 ease-in-out z-0 relative',
  active: 'text-white dark:text-gray-900',
  inactive: 'text-gray-500 dark:text-gray-400',
  base: 'absolute inset-y-0 w-1/2 flex items-center justify-center pointer-events-none z-[1] transition-colors duration-200 select-none text-xs font-semibold flex-shrink-0',
  left: 'left-0',
  right: 'right-0'
}
```

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

### BlogPost Configuration Object

Source: https://ui2.nuxt.com/pro/components/blog-post

Default configuration object for styling the BlogPost component's internal elements.

```javascript
{
  wrapper: 'relative group flex flex-col w-full gap-y-6',
  image: {
    wrapper: 'ring-1 ring-gray-200 dark:ring-gray-800 relative overflow-hidden aspect-[16/9] w-full rounded-lg pointer-events-none',
    base: 'object-cover object-top w-full h-full transform transition-transform duration-200 group-hover:scale-105'
  },
  container: 'flex flex-col justify-between flex-1',
  inner: 'flex-1',
  badge: {
    wrapper: 'mb-3',
    base: ''
  },
  title: 'text-gray-900 dark:text-white text-xl font-semibold truncate group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200',
  description: 'text-base text-gray-500 dark:text-gray-400 mt-1',
  date: 'text-sm text-gray-500 dark:text-gray-400 font-medium pointer-events-none',
  authors: {
    wrapper: 'relative flex items-center gap-x-3 mt-4',
    avatar: {
      base: 'relative ring-1 lg:hover:scale-105 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform',
      size: 'xs'
    }
  }
}
```

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

### Basic Callout Usage

Source: https://ui2.nuxt.com/pro/prose/callout

Displays a standard callout with markdown support.

```markdown
::callout
This is a `callout` with full **markdown** support. It can be used to link to [another page](/pro/prose/card).
::
```

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

### Enabling Class Regex for IntelliSense

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

Configure classRegex to support IntelliSense for UI objects and prefixed strings.

```json
{
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}
```

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

### defineShortcuts

Source: https://ui2.nuxt.com/getting-started/shortcuts

A composable to define global keyboard shortcuts with support for modifiers, input focus constraints, and conditional execution.

```APIDOC
## defineShortcuts(shortcuts)

### Description
Registers keyboard shortcuts globally. Shortcuts are defined as an object where keys represent the shortcut combination and values are either a handler function or a configuration object.

### Parameters
- **shortcuts** (Object) - Required - An object mapping shortcut strings (e.g., 'meta_k', 'escape') to handler functions or configuration objects.

### Configuration Object Properties
- **handler** (Function) - Required - The function to execute when the shortcut is triggered.
- **usingInput** (boolean | string) - Optional - If true, triggers even when an input is focused. If a string, triggers only when the input with that name is focused.
- **whenever** (Array) - Optional - An array of refs or functions that must evaluate to true for the shortcut to trigger.
```

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

### Basic Card Usage

Source: https://ui2.nuxt.com/pro/prose/card

Displays a card with a title and icon using the component syntax.

```markdown
::card{title="Components" icon="i-heroicons-cube-transparent"}
Discover all the components available in **Nuxt UI Pro**.
::
```

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

### Configure LandingFAQ Styles

Source: https://ui2.nuxt.com/pro/components/landing-faq

Configuration object for customizing the LandingFAQ component appearance.

```javascript
{
  wrapper: 'divide-y divide-gray-200 dark:divide-gray-800 -mt-6',
  item: {
    size: 'text-base',
    padding: 'py-6'
  },
  button: {
    base: 'text-left text-lg py-6',
    label: 'text-gray-900 dark:text-white',
    trailingIcon: {
      name: 'i-heroicons-chevron-down-20-solid',
      base: 'w-5 h-5 ms-auto transform transition-transform duration-200 flex-shrink-0 mr-1.5',
      active: '',
      inactive: '-rotate-90'
    }
  }
}
```

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

### Styling shortcuts with UKbd

Source: https://ui2.nuxt.com/getting-started/shortcuts

Wrap shortcut keys in UKbd components to apply consistent styling.

```vue
<template>
  <div class="flex items-center gap-0.5">
    <UKbd>⌘</UKbd>
    <UKbd>K</UKbd>
  </div>
</template>
```

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

### Configuring LandingLogos styles

Source: https://ui2.nuxt.com/pro/components/landing-logos

Default configuration object defining the CSS classes for the wrapper, title, and images container.

```javascript
{
  wrapper: 'text-center',
  title: 'text-lg font-semibold leading-8 text-gray-900 dark:text-white',
  images: 'mx-auto mt-10 flex flex-wrap items-center justify-between gap-8'
}
```

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

### Configure CardGroup Styles

Source: https://ui2.nuxt.com/pro/prose/card-group

Define the wrapper class to control the grid layout behavior.

```json
{
  wrapper: 'grid sm:grid-cols-2 gap-4'
}
```
Tokens:
Raw