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"}

IntelliSense

If you're using VSCode, you can install the Tailwind CSS IntelliSense extension to get autocompletion for the classes.

You can read more on how to set it up on the @nuxtjs/tailwindcss module documentation, but to summarize, you'll need to add the following to your settings.json:

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  }
}

You can write your tailwind.config in TypeScript as such:

import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}

If you do so, you'll need to add the following to your settings.json:

{
  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
}

Also, the extension won't work when writing classes in your app.config.ts by default. You can add the following to your settings.json to fix this:

{
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

You can also add the following to your settings.json to enable IntelliSense when using the ui prop:

{
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "ui"
  ]
}

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 to need be purged.

Configure options in your nuxt.config.ts as such:

export default defineNuxtConfig({
  modules: ['@nuxthq/ui'],
  ui: {
    global: true,
    icons: ['mdi', 'simple-icons']
  }
})

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.