v3.0.0-alpha.9

Install in a Vue app

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

Setup

Install the Nuxt UI v3 alpha package

pnpm add @nuxt/ui@next
If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss@next, 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 ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

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 ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

app.use(ui)

app.mount('#app')
It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:
"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

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.

In the rest of the docs, there are references to the app.config.ts file (which is a Nuxt feature). When using Nuxt UI in a project without Nuxt, this configuration is passed in this ui option instead.
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 v3 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.

Preview releases are automatically generated for every commit to the v3 branch and pull requests targeting the v3 branch. To use it into your project, use the installation command below by replacing 5385f84 with any commit hash or pull request number.

pnpm add https://pkg.pr.new/@nuxt/ui@5385f84
pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Install in a Nuxt app

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

Theme

Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.