mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 13:38:07 +01:00
65 lines
1.9 KiB
Markdown
65 lines
1.9 KiB
Markdown
---
|
|
description: 'Learn how to install and configure the module in your Nuxt app.'
|
|
---
|
|
|
|
1. Install `@nuxthq/ui` dependency to your project:
|
|
|
|
::code-group
|
|
|
|
```bash [yarn]
|
|
yarn add -D @nuxthq/ui
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install -D @nuxthq/ui
|
|
```
|
|
|
|
```sh [pnpm]
|
|
pnpm i -D @nuxthq/ui
|
|
```
|
|
|
|
::
|
|
|
|
2. Add it to your `modules` section in your `nuxt.config`:
|
|
|
|
```ts [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](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) 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`](https://github.com/nuxtlabs/ui/tree/dev) branch, you can use `@nuxthq/ui-edge`.
|
|
|
|
Update your `package.json` to the following:
|
|
|
|
```json [package.json]
|
|
{
|
|
"devDependencies": {
|
|
"@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
|
|
}
|
|
}
|
|
```
|
|
|
|
Then run `npm install` or `yarn install`.
|