mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
135 lines
2.4 KiB
Markdown
135 lines
2.4 KiB
Markdown
---
|
|
title: Installation
|
|
description: 'Learn how to install and configure Nuxt UI v3 in your application.'
|
|
---
|
|
|
|
## Setup
|
|
|
|
1. Install the Nuxt UI v3 alpha package:
|
|
|
|
::code-group
|
|
|
|
```bash [pnpm]
|
|
pnpm add @nuxt/ui@next
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @nuxt/ui@next
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @nuxt/ui@next
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add @nuxt/ui@next
|
|
```
|
|
|
|
::
|
|
|
|
::warning
|
|
Make sure you have `typescript` installed in your dev dependencies.
|
|
::
|
|
|
|
2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui']
|
|
})
|
|
```
|
|
|
|
3. Import Tailwind and Nuxt UI in your `app.vue`{lang="ts-type"} or in your [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
|
|
|
|
::code-group
|
|
|
|
```vue [app.vue]
|
|
<style>
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
</style>
|
|
```
|
|
|
|
```css [main.css]
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
```
|
|
|
|
::
|
|
|
|
## Options
|
|
|
|
You can customize Nuxt UI by providing options in your `nuxt.config.ts`:
|
|
|
|
### `prefix`
|
|
|
|
Use the `prefix` option to change the prefix of the components.
|
|
|
|
- Default: `U`{lang="ts-type"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
prefix: 'Nuxt'
|
|
}
|
|
})
|
|
```
|
|
|
|
### `fonts`
|
|
|
|
Use the `fonts` option to enable or disable the `@nuxt/fonts` module.
|
|
|
|
- Default: `true`{lang="ts-type"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
fonts: false
|
|
}
|
|
})
|
|
```
|
|
|
|
### `theme.colors`
|
|
|
|
Use the `theme.colors` option to choose which Tailwind CSS colors are used to generate classes for components.
|
|
|
|
- Default: `['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']`{lang="ts-type" class="inline"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
theme: {
|
|
colors: ['blue', 'green', 'red']
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::note{to="/getting-started/colors#build-colors"}
|
|
This can help reduce the number of CSS classes generated in your bundle.
|
|
::
|
|
|
|
### `theme.transitions`
|
|
|
|
Use the `theme.transitions` option to disable all transitions on components.
|
|
|
|
- Default: `true`{lang="ts-type"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
theme: {
|
|
transitions: false
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::note
|
|
This option adds the `transition-colors` class on components with hover or active states.
|
|
::
|