Getting Started
Installation
Learn how to install and configure Nuxt UI v3 in your application.
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
Make sure you have
typescript
installed in your dev dependencies.- Register the Nuxt UI module in your
nuxt.config.ts
:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
- Import Tailwind and Nuxt UI in your
app.vue
or in your CSS:
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>
@import "tailwindcss";
@import "@nuxt/ui";
Options
You can customize Nuxt UI by providing options in your nuxt.config.ts
:
prefix
Use the prefix
option to change the prefix of the components.
- Default:
U
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
prefix: 'Nuxt'
}
})
fonts
Use the fonts
option to enable or disable the @nuxt/fonts
module.
- Default:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
fonts: false
}
})
theme.colors
Use the theme.colors
option to choose which Tailwind CSS colors are used to generate classes for components.
- Default:
['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
theme: {
colors: ['blue', 'green', 'red']
}
}
})
theme.transitions
Use the theme.transitions
option to disable all transitions on components.
- Default:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
theme: {
transitions: false
}
}
})
This option adds the
transition-colors
class on components with hover or active states.