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

description

description
Learn how to install and configure the module in your Nuxt app.

1. Install @nuxthq/ui dependency to your project:

::code-group

yarn add -D @nuxthq/ui

npm install -D @nuxthq/ui

pnpm i -D @nuxthq/ui

::

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

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

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

::alert{icon="i-heroicons-exclamation-triangle"} As this module installs @nuxtjs/tailwindcss and @nuxtjs/color-mode for you, you should remove them from your modules and dependencies if you've previously installed them manually. ::

Playground

:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}

Options

Key	Default	Description
prefix	u	Define the prefix of the imported components.
global	false	Expose components globally.
icons	['heroicons']	Icon collections to load.
safelistColors	['primary']	Force safelisting of colors.

Edge

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

Update your package.json to the following:

{
  "devDependencies": {
    "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
  }
}

Then run npm install or yarn install.