mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
171 lines
3.5 KiB
Markdown
171 lines
3.5 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
|
|
```
|
|
|
|
::
|
|
|
|
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 CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
|
|
|
|
```vue [app.vue]
|
|
<style>
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
</style>
|
|
```
|
|
|
|
::warning
|
|
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory.
|
|
::
|
|
|
|
## 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
|
|
}
|
|
})
|
|
```
|
|
|
|
### `colorMode`
|
|
|
|
Use the `colorMode` option to enable or disable the `@nuxt/color-mode` module.
|
|
|
|
- Default: `true`{lang="ts-type"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
colorMode: false
|
|
}
|
|
})
|
|
```
|
|
|
|
### `theme.colors`
|
|
|
|
Use the `theme.colors` option to define the dynamic color aliases used to generate components theme.
|
|
|
|
- Default: `['primary', 'secondary', 'success', 'info', 'warning', 'error']`{lang="ts-type" class="inline"}
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
theme: {
|
|
colors: ['primary', 'error']
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
::tip{to="/getting-started/theme#colors"}
|
|
Learn more about color customization and theming in the Theme section.
|
|
::
|
|
|
|
### `theme.transitions`
|
|
|
|
Use the `theme.transitions` option to enable or disable 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.
|
|
::
|
|
|
|
## Continuous Releases
|
|
|
|
Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
|
|
|
|
Preview releases are automatically generated for every commit to the `v3` branch and pull requests targeting the `v3` branch. To use it into your project, use the installation command below by replacing `5385f84` with any commit hash or pull request number.
|
|
|
|
::code-group
|
|
|
|
```bash [pnpm]
|
|
pnpm add https://pkg.pr.new/@nuxt/ui@5385f84
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add https://pkg.pr.new/@nuxt/ui@5385f84
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install https://pkg.pr.new/@nuxt/ui@5385f84
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add https://pkg.pr.new/@nuxt/ui@5385f84
|
|
```
|
|
|
|
::
|
|
|
|
::note
|
|
**pkg.pr.new** will automatically comment on PRs with the installation URL, making it easy to test changes.
|
|
::
|