Installation
Setup
Install the Nuxt UI v3 alpha package
pnpm add @nuxt/ui@next
yarn add @nuxt/ui@next
npm install @nuxt/ui@next
bun add @nuxt/ui@next
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
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui()
]
})
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
.{
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
}
# Auto-generated type declarations
auto-imports.d.ts
components.d.ts
Use the Nuxt UI Vue plugin in your 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
@import "tailwindcss";
@import "@nuxt/ui";
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')
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
}
Wrap your app with App component
<template>
<UApp>
<RouterView />
</UApp>
</template>
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
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.
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
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']
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']
}
})
]
})
theme.transitions
Use the theme.transitions
option to enable or disable transitions on components.
- Default:
true
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
}
})
]
})
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
yarn add https://pkg.pr.new/@nuxt/ui@5385f84
npm install https://pkg.pr.new/@nuxt/ui@5385f84
bun add https://pkg.pr.new/@nuxt/ui@5385f84