Installation

Learn how to install and configure Nuxt UI in your Vue application.

Setup

Add to a Vue project

Install the Nuxt UI package

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss, vue-router and @unhead/vue in your project's root directory.

Add the Nuxt UI Vite plugin in your `vite.config.ts`

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

Nuxt UI registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.

tsconfig.app.json

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}

.gitignore

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

Use the Nuxt UI Vue plugin in your `main.ts`

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

Import Tailwind CSS and Nuxt UI in your CSS

assets/main.css

@import "tailwindcss";
@import "@nuxt/ui";

Import the CSS file in your main.ts.

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:

.vscode/settings.json

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

Wrap your app with App component

App.vue

<template>
  <UApp>
    <RouterView />
  </UApp>
</template>

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

Use our Vue starter

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

Create a new project locally by running the following command:

Terminal

npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>

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:

Terminal

cd <my-app>
npm run dev

Options

You can customize Nuxt UI by providing options in your vite.config.ts.

`prefix`

Use the prefix option to change the prefix of the components.

Default: U

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      prefix: 'Nuxt'
    })
  ]
})

`ui`

Use the ui option to provide configuration for Nuxt UI.

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'green',
          neutral: 'slate'
        }
      }
    })
  ]
})

`colorMode`

Use the colorMode option to enable or disable the color mode integration from @vueuse/core.

Default: true

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      colorMode: false
    })
  ]
})

`theme.colors`

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      theme: {
        colors: ['primary', 'error']
      }
    })
  ]
})

Learn more about color customization and theming in the Theme section.

`theme.transitions`

Use the theme.transitions option to enable or disable transitions on components.

Default: true

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      theme: {
        transitions: false
      }
    })
  ]
})

This option adds the transition-colors class on components with hover or active states.

Continuous Releases

Nuxt UI uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Automatic preview releases are created for all commits and PRs to the v3 branch. Use them by replacing your package version with the specific commit hash or PR number.

package.json

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

pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Introduction

Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Migration

A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.