ui/docs/content/1.getting-started/2.installation.md

title, description, navigation

title	description	navigation
Installation	Learn how to install and configure Nuxt UI in your application.	badge label Todo

Setup

Add to a Nuxt project

1. Add @nuxt/ui module to your project:

npx nuxi@latest module add ui

2. Add it to the modules section in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

That's it! You can now use all the components and composables in your Nuxt app ✨

Use Nuxt starter

Nuxt Starter template makes it easy to get started with Nuxt UI. The Nuxt Starter template is available from the nuxi init command.

npx nuxi@latest init -t ui

Please check nuxt/starter for details.

Options

You can customize Nuxt UI by providing options in your nuxt.config:

prefix

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prefix: 'Nuxt'
  }
})

colors

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colors: ['blue', 'green', 'red']
  }
})

transitions

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    transitions: false
  }
})

Edge

To use the latest updates pushed on the dev branch, you can use @nuxt/ui-edge.

Update your package.json to the following:

{
  "devDependencies": {
-   "@nuxt/ui": "^2.11.0"
+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}

Then run pnpm install, yarn install or npm install.