mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
112 lines
3.2 KiB
Markdown
112 lines
3.2 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"}
|
|
|
|
## IntelliSense
|
|
|
|
If you're using VSCode, you can install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get autocompletion for the classes.
|
|
|
|
You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/tailwind/editor-support) module documentation, but to summarize, you'll need to add the following to your `settings.json`:
|
|
|
|
```json [settings.json]
|
|
{
|
|
"files.associations": {
|
|
"*.css": "tailwindcss"
|
|
},
|
|
"editor.quickSuggestions": {
|
|
"strings": true
|
|
}
|
|
}
|
|
```
|
|
|
|
You can write your `tailwind.config` in TypeScript as such:
|
|
|
|
```ts [tailwind.config.ts]
|
|
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`:
|
|
|
|
```json [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:
|
|
|
|
```json [settings.json]
|
|
{
|
|
"tailwindCSS.experimental.classRegex": [
|
|
["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
|
|
]
|
|
}
|
|
```
|
|
|
|
## 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`.
|