### Install Nuxt UI Pro dependency

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

Installs the @nuxt/ui-pro package using pnpm. This automatically includes @nuxt/ui as a dependency, so there's no need to install it separately.

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

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

### Nuxt Project Setup Commands (Bash)

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

These bash commands handle dependency installation, development server startup, production build, and preview for a Nuxt 3 project. They rely on npm or yarn/pnpm and assume Node.js is installed. Inputs are package managers; outputs are installed dependencies or built artifacts. Limitations include requiring a compatible Node version and no custom build options specified.

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

npm run dev

npm run build

npm run preview
```

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

### Use Nuxt UI Pro continuous preview releases

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

Replaces the stable Nuxt UI Pro version with a preview release from pkg.pr.new using a specific commit hash. Preview releases provide early access to features and fixes.

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

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

### Enable Nuxt UI Pro content integration

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

Forces loading of Nuxt UI Pro content-related components, composables, and utilities regardless of @nuxt/content module detection in the project.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    content: true
  }
})
```

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

### Set Nuxt UI Pro license key

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

Configures the Nuxt UI Pro license key directly in the nuxt.config.ts file, eliminating the need for environment variables or .nuxtrc configuration.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    license: 'your-license'
  }
})
```

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

### Install Nuxt UI v4 with CodeGroup

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

Demonstrates how to install Nuxt UI v4 using different package managers (pnpm, yarn, npm) within a CodeGroup component. This component allows users to switch between code examples for each manager.

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

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

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

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

### Configure Nuxt UI Pro in nuxt.config.ts

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

Extends the Nuxt configuration to include @nuxt/ui-pro layer and register the @nuxt/ui module. This enables all Nuxt UI Pro components and utilities.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: ['@nuxt/ui']
})
```

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

### Nuxt UI Config Example

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

Provides a configuration example for the Nuxt UI component, demonstrating how to style the wrapper using CSS classes.

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

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

### Install Icon Collections Locally

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

This snippet provides the command to install icon collections locally using package managers like pnpm, yarn, or npm. Installing collections locally ensures icons are served efficiently, improving performance for both server-side rendering (SSR) and client-side applications. Replace `{collection_name}` with the desired icon set (e.g., `uil`).

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

```

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

### Use Nuxt UI Pro TypeScript types

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

Demonstrates how to import and use Nuxt UI Pro types in Vue components. This example shows typing for HeaderLink props in a TypeScript component.

```vue
<template>
  <UHeader :links="links" />
</template>

<script setup lang="ts">
import type { HeaderLink } from '#ui-pro/types'

defineProps<{
  links: HeaderLink[]
}>()
</script>
```

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

### Install Nuxt UI

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

Installs the Nuxt UI package using npm, pnpm, or yarn. This is the first step to integrate Nuxt UI into your project.

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

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

### Install Project Dependencies

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

Installs all necessary project dependencies using pnpm, a fast and efficient package manager. This command should be run after cloning the repository and enabling Corepack.

```shell
pnpm install
```

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

### Nuxt UI Configuration Example

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

Provides an example of how to configure Nuxt UI in the nuxt.config.ts file. This specific configuration sets a 'Nuxt' prefix for UI components.

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

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

### Blog Page Structure with Nuxt UI Pro Components

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

Example of a blog page using Nuxt UI Pro components. It demonstrates UContainer, UPageHeader, UPageBody, UBlogList, and UBlogPost for displaying articles.

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

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

```

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

### Run Nuxt UI Documentation Locally

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

Starts the Nuxt UI documentation development server. This command is used to view and work on the documentation files located in the 'docs' folder.

```shell
pnpm run dev
```

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

### Basic App Configuration Example

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

This is a basic configuration example for `app.vue` using Nuxt UI components like `UHeader`, `UMain`, `ULandingHero`, `ULandingSection`, `UPageGrid`, `ULandingCard`, and `UFooter`. It sets up a simple landing page structure.

```vue
<template>
  <UHeader :links="links" />

  <UMain>
    <ULandingHero title="Hello World" />

    <ULandingSection title="Features">
      <UPageGrid>
        <ULandingCard title="First Card" />
        <ULandingCard title="Second Card" />
        <ULandingCard title="Third Card" />
      </UPageGrid>
    </ULandingSection>
  </UMain>

  <UFooter />
</template>

```

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

### Install Nuxt Content Module (pnpm)

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

Installs the Nuxt Content module version 2 using pnpm. This is a prerequisite for integrating Nuxt UI Pro with content management.

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

```

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

### Landing Page Structure with Nuxt UI Pro Components

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

Example of a landing page using various Nuxt UI Pro components. It demonstrates ULandingHero, ULandingSection, ULandingGrid, ULandingCard, ULandingTestimonial, ULandingCTA, and ULandingFAQ for building marketing pages.

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

```

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

### Example Vue SFC with IntelliSense for UI Components

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

Illustrates the usage of the /*ui*/ prefix in a Vue Single File Component (SFC) to enable IntelliSense for UI components, including those using the `ref()` function.

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

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

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

### Install @nuxt/ui Dependency (CLI)

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

This command installs the @nuxt/ui dependency into your Nuxt project using the Nuxt CLI. Ensure you have nuxi installed and updated to the latest version.

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

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

### Provide JSON example for ColorModeToggle usage

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

This JSON snippet demonstrates how to configure the ColorModeToggle component by passing a message and other properties. It can be used as a prop payload when integrating the toggle into a Nuxt UI documentation page. The example is language-agnostic and works with any JSON-compatible setup.

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

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

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

This command installs the necessary v-calendar and date-fns libraries for the DatePicker component. These libraries are used for calendar functionality and date formatting, respectively. The installation can be done using pnpm, yarn, or npm.

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

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

### TypeScript Component Configuration Example

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

Illustrates how to configure Nuxt UI component variants and colors using `app.config.ts` for TypeScript-based prop validation and autocompletion. This example shows custom configuration for the Button component.

```typescript
export default defineAppConfig({
  ui: {
    button: {
      color: {
        custom: {
          subtle: '...'
        }
      }
    }
  }
})
```

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

### Input Menu Props Configuration (Object Example)

Source: https://ui2.nuxt.com/components/input-menu

This example demonstrates the structure of the configuration object for input menu props, showing default values and types for various settings like size, color, and variant.

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

```

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

### BlogPost Component Usage Example

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

Demonstrates how to use the BlogPost component with its various props for title, description, and image. It shows how to customize the article display.

```vue
<template>
  <BlogPost
    title="Nuxt 3.9 Release"
    description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more."
    date="Dec 25, 2023"
    image="/images/nuxt-3-9.jpg"
    orientation="horizontal"
  />
</template>

<script setup>
import BlogPost from '#ui/components/BlogPost.vue'
</script>
```

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

### Pricing Page Structure with Nuxt UI Pro Components

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

Example of a pricing page using Nuxt UI Pro components. It features ULandingHero with UPricingToggle, ULandingSection with UPricingGrid and UPricingCard, and includes ULandingLogos and ULandingFAQ.

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

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

  <ULandingSection>
    <ULandingLogos />
  </ULandingSection>

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

```

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

### Configure Nuxt UI Pro router options

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

Disables Nuxt UI Pro's default scroll behavior override, allowing custom router.options.ts configurations. Set to true to suppress multiple router options warnings.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    routerOptions: false
  }
})
```

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

### Defining Simple Keyboard Shortcuts

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

Provides a simplified syntax for defining shortcuts that don't require complex configurations. In this example, a single question mark key press triggers the `openHelpModal` function.

```vue
defineShortcuts({
  '?': () => openHelpModal()
})

```

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

### DashboardToolbar Usage Example in Vue

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

This Vue.js template demonstrates basic usage of the DashboardToolbar component within a DashboardPage and DashboardPanel. It depends on Nuxt UI components like UDashboardPage, UDashboardPanel, UDashboardNavbar, UDashboardToolbar, and USelectMenu. The input is the component props and slots, outputting a rendered toolbar with selectable menus for status, location, and display. Limitations include requiring Nuxt UI setup and potential styling conflicts in custom themes.

```vue
<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Users" />

      <UDashboardToolbar>
        <template #left>
          <USelectMenu icon="i-heroicons-check" placeholder="Status" multiple />
          <USelectMenu icon="i-heroicons-map-pin" placeholder="Location" multiple />
        </template>

        <template #right>
          <USelectMenu label="Display" icon="i-heroicons-computer-desktop" multiple />
        </template>
      </UDashboardToolbar>
    </UDashboardPanel>
  </UDashboardPage>
</template>

```

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

### Configure Nuxt UI Options in nuxt.config.ts

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

This example shows how to configure the Nuxt UI module options, such as global component exposure and safelisting colors, within the nuxt.config.ts file.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    global: true
  }
})
```

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

### LandingSection Component Usage Example

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

Demonstrates the basic usage of the LandingSection component, including how to customize content using headline, title, and description props. It also shows how to add an icon using the 'icon' prop.

```vue
<template>
  <LandingSection
    headline="Nuxt UI Pro"
    title="The freedom to build anything"
    description="Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases."
    icon="i-heroicons-star"
  />
</template>

<script setup lang="ts">
import { LandingSection } from '#ui/landing'
</script>
```

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

### Enable Corepack for Package Management

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

Enables Corepack, a tool for managing package manager versions across projects, ensuring consistent dependency management. This is a prerequisite for installing project dependencies.

```shell
corepack enable
```

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

### Tooltip Basic Usage Example (Nuxt UI)

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

Demonstrates the basic usage of the Nuxt UI Tooltip component. It shows how to trigger the tooltip content on hover. This component relies on Nuxt UI's styling and JavaScript.

```html
<template>
  <button v-tooltip="'Hover me'">
    Hover me
  </button>
</template>

<script setup>
import { vTooltip } from '#ui/directives'
</script>
```

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

### Defining Keyboard Shortcuts with defineShortcuts Composable (Basic)

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

Illustrates the basic usage of the `defineShortcuts` composable to map keyboard combinations to specific actions. This example toggles a modal's visibility when 'Meta + K' is pressed.

```vue
<template>
  <UModal v-model="isOpen" />
</template>

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

defineShortcuts({
  meta_k: {
    usingInput: true,
    handler: () => {
      isOpen.value = !isOpen.value
    }
  }
})
</script>

```

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

### PageHero Configuration in Nuxt Content YAML

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

Provides an example of configuring PageHero content using a YAML file with `@nuxt/content`. It demonstrates how to define title, description, and alignment settings within the YAML structure.

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


```

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

### Basic CommandPalette Usage with v-model (Vue)

Source: https://ui2.nuxt.com/components/command-palette

Demonstrates the fundamental usage of the CommandPalette component using a v-model to manage the displayed commands. This setup allows for a searchable and selectable list of commands within your application.

```vue
<template>
  <UCommandPalette
    v-model="selectedCommand"
    :items="commands"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedCommand = ref()

const commands = [
  {
    label: 'Go to page...',
    commands: [
      { label: 'Pricing', suffix: '/pricing' },
      { label: 'About Us', suffix: '/about' },
    ]
  },
  {
    label: 'Actions',
    commands: [
      { label: 'Add new file', icon: 'i-heroicons-document-plus', suffix: '/new-file' },
      { label: 'Add new folder', icon: 'i-heroicons-folder-plus', suffix: '/new-folder' },
    ]
  }
]
</script>
```

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

### Initialize Nuxt UI Pro Dashboard Template

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

Command to initialize a new Nuxt project using the Nuxt UI Pro Dashboard template. This command fetches the template from GitHub and sets up a new project in the specified directory.

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

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

### Nuxt Package Configuration (JSON)

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

This package.json defines scripts for building, developing, generating, previewing, and preparing a Nuxt 3 application. It includes devDependencies like Nuxt and Nuxt UI, with StackBlitz integration for online editing. Inputs are npm run commands; outputs are built or served applications. Limitations: Private package, no production dependencies listed.

```json
{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/ui": "^2.21.1",
    "nuxt": "^3.16.1"
  },
  "stackblitz": {
    "installDependencies": false,
    "startCommand": "pnpm install && pnpm run dev"
  }
}
```

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

### Disable Nuxt UI Pro custom scrollbars

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

Disables the custom scrollbar styling that Nuxt UI Pro applies to Windows systems by setting the customScrollbars option to false.

```typescript
export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  uiPro: {
    customScrollbars: false
  }
})
```

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

### Configure safelisted colors in Nuxt configuration

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

Manually safelist colors that cannot be automatically detected by the module. This is required when setting default component colors or using dynamic color binding. The example shows safelisting the 'orange' color.

```typescript
export default defineNuxtConfig({
  ui: {
    safelistColors: ['orange']
  }
})
```

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

### Set default component color in app config

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

Override default component colors in app.config.ts. This example sets the default button color to orange. Note that such custom defaults may require manual safelisting in nuxt.config.ts.

```typescript
export default defineAppConfig({
  ui: {
    button: {
      default: {
        color: 'orange'
      }
    }
  }
})
```

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

### Create Nuxt UI Welcome Page

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

Builds a responsive welcome page using Nuxt UI components. The template features a full-height container with a centered card component, supporting both light and dark themes through Tailwind CSS. The card includes custom styling for backgrounds, rings, and dividers with a bold header section.

```Vue
<template>
<UContainer class="min-h-screen flex items-center">
<UCard
class="flex-1"
:ui="{
background: 'bg-gray-50 dark:bg-gray-800/50',
ring: 'ring-1 ring-gray-300 dark:ring-gray-700',
divide: 'divide-y divide-gray-300 dark:divide-gray-700',
header: { base: 'font-bold' },
}"
>
<template #header> Welcome to the playground! </template>
<p class="text-gray-500 dark:text-gray-400">Try your components here!</p>
</UCard>
</UContainer>
</template>
<script setup></script>
<style>
body {
@apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;
}
</style>
```

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

### Implement a Color Mode Toggle Button

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

Build a UI component to toggle between light and dark modes using the `useColorMode` composable from `@nuxtjs/color-mode`. This example shows how to bind a button's icon and click event to the color mode preference.

```vue
<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
      color="gray"
      variant="ghost"
      aria-label="Theme"
      @click="isDark = !isDark"
    />
    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>
```

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

### Extend Tailwind CSS colors configuration

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

Define custom color palettes in tailwind.config.ts. When using custom colors, ensure all shades from 50 to 950 are defined as they are used in component configurations. This example shows a custom green color palette.

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

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        green: {
          50: '#EFFDF5',
          100: '#D9FBE8',
          200: '#B3F5D1',
          300: '#75EDAE',
          400: '#00DC82',
          500: '#00C16A',
          600: '#00A155',
          700: '#007F45',
          800: '#016538',
          900: '#0A5331',
          950: '#052e16'
        }
      }
    }
  }
}
```

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

### Display Icon with UButton Component

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

This snippet demonstrates how to display an icon within a `UButton` component in a Nuxt application. It uses the `icon` prop to specify the icon name, leveraging the `@nuxt/icon` module for icon management. No external dependencies are required beyond the Nuxt UI setup.

```html
<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>

```

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

### Simple Landing Page in Nuxt UI Pro

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

This code snippet demonstrates a simple landing page using Nuxt UI Pro components like `ULandingHero` and `ULandingSection`. It shows how to structure content with titles, descriptions, and alignment options for a basic landing page layout.

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

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

### AppFooter Vue Template Usage

Source: https://ui2.nuxt.com/pro/components/footer-columns

Example Vue template showing how to integrate the UFooterColumns component within a UFooter template slot for rendering footer links. Depends on Nuxt UI components like UFooter and UFooterColumns. Inputs include a 'links' prop array of link objects; outputs rendered HTML markup. Limited to Nuxt 3 setup with Vue composition API.

```vue
<template>
  <UFooter>
    <template #top>
      <UFooterColumns :links="links" />
    </template>
  </UFooter>
</template>
```

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

### Content Configuration: FAQ data in YAML format

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

This YAML snippet defines the structure and content for the FAQ section. It includes a title, description, and a list of FAQ items, each with a `label` for the question and `content` for the answer. The `defaultOpen` property can be used to pre-open specific items.

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

```

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

### Nuxt UI DashboardPanel - DashboardPage Example

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

Example using DashboardPanel within a DashboardPage with a navbar, content, and collapsible panel.

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

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

### Nuxt Module Configuration (TypeScript)

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

This nuxt.config.ts exports a configuration using defineNuxtConfig to include the @nuxt/ui module and set a compatibility date. It enables UI components in the Nuxt 3 project. Inputs are module names; outputs are configured Nuxt instance. Limitations: Minimal setup, no advanced routing or plugins defined.

```typescript
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  compatibilityDate: '2025-03-24',
});
```

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

### Nuxt UI DashboardPanel - DashboardLayout Example

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

Example using DashboardPanel within a DashboardLayout, including a sidebar and content slot.

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

      <UDashboardSidebar />
    </UDashboardPanel>

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

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

### Use Continuous Preview Releases in package.json

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

Demonstrates how to integrate continuous preview releases of Nuxt UI into your project by replacing the version in your package.json file with a commit hash or pull request number.

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

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

### Usage Example: Displaying FAQ with @nuxt/content in Vue

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

This Vue.js snippet demonstrates how to use the `ULandingFAQ` component with content fetched from `@nuxt/content`. It utilizes `useAsyncData` to query content and `MDC` to render the FAQ item content. The `multiple` prop is enabled to allow multiple FAQ items to be open simultaneously.

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

<template>
  <ULandingSection :title="page.faq.title" :description="page.faq.description">
    <ULandingFAQ :items="page.faq.items" multiple>
      <template #item="{ item }">
        <MDC :value="item.content" class="prose prose-primary dark:prose-invert max-w-none text-gray-500 dark:text-gray-400" />
      </template>
    </ULandingFAQ>
  </ULandingSection>
</template>

```

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

### Nuxt UI Popover: Basic Usage Example

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

Demonstrates the fundamental usage of the Nuxt UI Popover component. This snippet shows how to trigger the popover, typically by clicking an element. It utilizes default configurations and focuses on the basic display of the popover content.

```vue
<template>
  <div>
    <UPopover>
      <UButton color="gray" variant="ghost">Open</UButton>

      <template #panel>
        <div class="p-4">
          <p>Popover content goes here.</p>
        </div>
      </template>
    </UPopover>
  </div>
</template>
```

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

### Nuxt TypeScript Configuration (JSON)

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

This tsconfig.json extends the default Nuxt TypeScript configuration from .nuxt/tsconfig.json, enabling type checking and IntelliSense in the project. It relies on Nuxt's built-in TypeScript support. Inputs are project files; outputs are compiled TypeScript without additional custom rules. Limitations: No overrides, inherits all from Nuxt defaults.

```json
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}
```

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

### Nuxt UI Carousel Snap to Start

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

Configures the Nuxt UI Carousel to snap items to the start of the scrollable area using the `ui` prop with the `snap-start` class. This ensures each item aligns to the beginning when scrolling.

```vue
<template>
  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
    <img :src="item" width="200" height="300">
  </UCarousel>
</template>

<script setup>
const items = [
  '/images/carousel-1.jpg',
  '/images/carousel-2.jpg',
  '/images/carousel-3.jpg'
]
</script>
```

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

### Nuxt App Setup with ContentSearch Component

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

This script sets up the main Nuxt application layout, fetching navigation and search data, defining navigation links, and integrating the UContentSearch component. It relies on server-side fetching for navigation and a local API endpoint for search files, ensuring the search component is client-side rendered.

```vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })

const links = [{
  label: 'Docs',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro'
}, {
  label: 'Pricing',
  to: '/pro/pricing',
  icon: 'i-heroicons-ticket'
}, {
  label: 'Templates',
  icon: 'i-heroicons-computer-desktop',
  to: '/pro/templates'
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: '/releases'
}]

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

<template>
  <Header :links="links" />

  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

  <Footer />

  <ClientOnly>
    <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
  </ClientOnly>

  <UNotifications />
</template>

```

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

### Setup Nuxt UI Modal programmatically

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

Configure your Nuxt application to support programmatic modal creation by adding the UModals component to your app layout. This setup enables dynamic modal management throughout your application.

```vue
<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UModals />
  </div>
</template>
```

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

### Rendering Page Structure with UPage Components in Vue

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

This snippet demonstrates building a basic page layout using UPageHero, UPageHeader, and UPageBody components from Nuxt UI Pro. It relies on Nuxt Content for rendering content via ContentRenderer. Inputs include slot content; outputs a responsive grid layout with prose support. Limitations: Requires Nuxt UI Pro installation and Content module.

```vue
<template>
  <UPageHero />

  <UPage>
    <UPageHeader />

    <UPageBody prose>
      <ContentRenderer />
    </UPageBody>
  </UPage>
</template>

```

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

### DashboardSection Usage Example (Vue)

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

Demonstrates how to use the DashboardSection component in a Vue template to organize theme settings and user profile information within a DashboardPanelContent. It includes examples of using slots for custom buttons and input fields.

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

```

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

### Vue Dashboard Config Example

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

Shows how to configure the `DashboardLayout` component using the `wrapper` property. This property can be used to customize the layout's styling and appearance.

```json
{\n  "wrapper": 'fixed inset-0 flex overflow-hidden'\n}
```

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

### TypeScript Breadcrumb Example

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

Demonstrates using the UBreadcrumb component with TypeScript typings for BreadcrumbLink. It shows how to define props and use UIcon for custom icons within the breadcrumbs.

```vue
<template>
  <UBreadcrumb :links="links">
    <template #icon ({ link })>
      <UIcon :name="link.icon" />
    </template>
  </UBreadcrumb>
</template>

<script setup lang="ts">
import type { BreadcrumbLink } from '#ui/types'

export interface Props {
  links: BreadcrumbLink[]
}

defineProps<Props>()
</script>
```

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

### Clone Nuxt UI Repository

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

Clones the official Nuxt UI repository from GitHub to your local machine, which is the first step for local development.

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

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

### Generate Type Stubs for Development

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

Generates type stubs required for development, which aids in type checking and improving the developer experience. This command is part of the local development setup.

```shell
pnpm run dev:prepare
```

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

### Add placeholder text to textarea

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

Use the placeholder prop to set placeholder text that appears when the Textarea is empty. This helps guide user input.

```vue
<template>
  <UTextarea placeholder="Enter your text here..." />
</template>
```

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

### Run Nuxt UI Playground for Component Testing

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

Launches the Nuxt UI playground environment, which is used for testing and previewing UI components. This is essential for verifying component behavior during development.

```shell
pnpm run play
```

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

### Color Mode Configuration

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

Example of forcing color mode on a specific page using definePageMeta. This prevents the color mode switcher from appearing in the command palette for that page.

```vue
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>
```

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

### DashboardSlideover Configuration Example (JSON)

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

This JSON object illustrates the configuration for the DashboardSlideover component, defining styles for its header, body, and footer. It also specifies default properties for the close button.

```json
{
  "header": {
    "base": "flex items-center justify-between gap-x-1.5 flex-shrink-0 border-b border-gray-200 dark:border-gray-800 h-[--header-height]",
    "padding": "p-4"
  },
  "body": {
    "base": "flex-1 overflow-y-auto",
    "padding": "p-4"
  },
  "footer": {
    "base": "flex items-center gap-x-1.5 flex-shrink-0",
    "padding": "p-4"
  },
  "title": "text-gray-900 dark:text-white font-semibold flex items-center gap-x-1.5 min-w-0",
  "default": {
    "closeButton": {
      "icon": "i-heroicons-x-mark-20-solid",
      "color": "gray",
      "variant": "ghost",
      "size": "sm"
    }
  }
}
```

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

### BlogPost Configuration Object

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

Provides the default configuration object for the BlogPost component, detailing styling for various elements like wrapper, image, title, description, date, and authors.

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

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

### Building Dashboard Layout with UDashboard Components in Vue

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

This snippet constructs a dashboard using UDashboardLayout, UDashboardPanel, UDashboardNavbar, UDashboardSidebar, and related components. Supports resizable panels and collapsible sidebars; inputs include slot content and search functionality. Outputs a multi-column responsive dashboard. Limitations: Requires Nuxt UI Pro; customization via props like width and resizable options.

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

```

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

### DashboardPanelContent Usage Example (Vue)

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

Demonstrates how to use the DashboardPanelContent component within a Nuxt application's dashboard layout. It shows nesting inside UDashboardPage and UDashboardPanel, along with displaying UDashboardCard components.

```vue
<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Home" />

      <UDashboardPanelContent>
        <UDashboardCard />

        <div class="grid lg:grid-cols-2 gap-4 mt-4">
          <UDashboardCard />
          <UDashboardCard />
        </div>
      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardPage>
</template>

```

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

### Nuxt App UI Configuration (TypeScript)

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

This app.config.ts file configures the UI theme for a Nuxt application using defineAppConfig, setting primary color to green and gray to cool variant. It depends on Nuxt UI module and is used globally in the app. Inputs are color scheme options; outputs are themed UI components. Limitations: Basic theming only, no responsive or dark mode specifics.

```typescript
export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool',
  },
});
```

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

### Vue Dashboard Layout Example

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

Demonstrates the usage of the `DashboardLayout` component as a root layout. It includes `DashboardPanel`, `DashboardNavbar`, `DashboardSidebar`, and a `slot` for content. The component provides a consistent layout for dashboard elements.

```vue
<template>\n  &lt;UDashboardLayout&gt;\n    &lt;UDashboardPanel&gt;\n      &lt;UDashboardNavbar /&gt;\n\n      &lt;UDashboardSidebar /&gt;\n    &lt;/UDashboardPanel&gt;\n\n    &lt;slot /&gt;\n  &lt;/UDashboardLayout&gt;\n</template>
```

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

### YAML Configuration for LandingGrid Content

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

This YAML file defines the content for the LandingGrid component, including titles, descriptions, icons, and layout classes for individual cards. It showcases how to structure data for features displayed in a grid.

```yaml
features:
  title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
  cards:
    - title: Color Palette
      description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
      icon: i-heroicons-swatch
      to: /getting-started/theming#colors
      class: 'col-span-7 row-span-3'
    - title: Fully Customizable
      description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
      icon: i-heroicons-wrench-screwdriver
      to: /getting-started/theming#components
      class: 'col-span-5 row-span-5 lg:mb-10'
    - title: Icons
      description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
      icon: i-heroicons-face-smile
      to: /getting-started/theming#icons
      class: 'col-span-7 row-span-3'
    - title: Light & Dark
      description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
      to: /getting-started/theming#dark-mode
      icon: i-heroicons-moon
      class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
    - title: Keyboard Shortcuts
      description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
      icon: i-heroicons-computer-desktop
      to: /getting-started/shortcuts
      class: 'col-span-7 row-span-3'

```