mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
6da0db0113
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
---
|
|
title: 'nuxthq/ui'
|
|
description: 'Components library as a Nuxt3 module using TailwindCSS based on TailwindUI.'
|
|
navigation:
|
|
title: Installation
|
|
---
|
|
|
|
## Installation
|
|
|
|
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']
|
|
})
|
|
```
|
|
|
|
::alert
|
|
That's it! You can now use all the components and composables in your Nuxt app ✨
|
|
::
|
|
|
|
## Options
|
|
|
|
| Key | Default | Description |
|
|
| ------------------------ | ---------------------- | ------------------------------------------------ |
|
|
| `prefix` | `u` | Define the prefix of the imported components. |
|
|
| `global` | `false` | Expose components globally. |
|
|
| `icons` | `['heroicons']` | Icon collections to load. |
|
|
|
|
## Edge channel
|
|
|
|
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`.
|