261 lines
7.9 KiB
Markdown
261 lines
7.9 KiB
Markdown
---
|
|
title: 'I tested Nuxt UI'
|
|
description: "Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI"
|
|
image:
|
|
src: https://ui.nuxt.com/social-card.png
|
|
authors:
|
|
- name: Kevin browski
|
|
to: https://twitter.com/benjamincanac
|
|
avatar:
|
|
src: https://i.pravatar.cc/128?u=6
|
|
date: 2023-10-19
|
|
badge:
|
|
label: Web devlopment, Nuxt
|
|
---
|
|
|
|
## Introduction
|
|
|
|
Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.
|
|
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
|
|
|
|
### ✨ Awesome Features
|
|
|
|
- Built with Headless UI and Tailwind CSS
|
|
- HMR support through Nuxt App Config
|
|
- Dark mode support
|
|
- Support for LTR and RTL languages
|
|
- Keyboard shortcuts
|
|
- Bundled icons
|
|
- Fully typed
|
|
- Figma Kit
|
|
|
|
## 😌 Easy and quick installation
|
|
|
|
### Setup
|
|
|
|
1. Install `@nuxt/ui` dependency to your project:
|
|
|
|
::code-group
|
|
|
|
```bash [pnpm]
|
|
pnpm add @nuxt/ui
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @nuxt/ui
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @nuxt/ui
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add @nuxt/ui
|
|
```
|
|
|
|
::
|
|
|
|
2. Add it to your `modules` section in your `nuxt.config`:
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui']
|
|
})
|
|
```
|
|
|
|
That's it! You can now use all the components and composables in your Nuxt app 🤩
|
|
|
|
### Automatically installed modules
|
|
|
|
Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
|
|
|
|
::callout{icon="i-heroicons-exclamation-triangle"}
|
|
You should remove them from your `modules` and `dependencies` if you've previously installed them.
|
|
::
|
|
|
|
### ...And all in Typescript !
|
|
|
|
This module is written in TypeScript and provides typings for all the components and composables.
|
|
|
|
You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
|
|
|
|
```vue
|
|
<template>
|
|
<UBreadcrumb :links="links">
|
|
<template #icon="{ link }">
|
|
<UIcon :name="link.icon" />
|
|
</template>
|
|
</UBreadcrumb>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { BreadcrumbLink } from '#ui/types'
|
|
|
|
export interface Props {
|
|
links: BreadcrumbLink[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
```
|
|
|
|
### The power of 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.
|
|
|
|
### Many 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 to need be purged. |
|
|
| `disableGlobalStyles` | `false` | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
|
|
|
|
Configure options in your `nuxt.config.ts` as such:
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui'],
|
|
ui: {
|
|
global: true,
|
|
icons: ['mdi', 'simple-icons']
|
|
}
|
|
})
|
|
```
|
|
|
|
## 🎨 Theming
|
|
|
|
### Colors
|
|
|
|
#### Configuration
|
|
|
|
Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
primary: 'green',
|
|
gray: 'cool'
|
|
}
|
|
})
|
|
```
|
|
|
|
As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
|
|
|
|
When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config.ts`](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts). You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
|
|
|
|
### Components
|
|
|
|
#### `app.config.ts`
|
|
|
|
Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
container: {
|
|
constrained: 'max-w-5xl'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
|
|
|
|
#### `ui` prop
|
|
|
|
Each component has a `ui` prop that allows you to customize everything specifically.
|
|
|
|
```vue
|
|
<template>
|
|
<UContainer :ui="{ constrained: 'max-w-2xl' }">
|
|
<slot />
|
|
</UContainer>
|
|
</template>
|
|
```
|
|
|
|
::callout{icon="i-heroicons-light-bulb"}
|
|
You can find the default classes for each component under the `Config` section.
|
|
::
|
|
|
|
### Dark mode
|
|
|
|
All the components are styled with dark mode in mind.
|
|
|
|
:color-mode-button
|
|
|
|
### Icons
|
|
|
|
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
|
|
|
|
Some components have an `icon` prop that allows you to add an icon to the component.
|
|
|
|
```vue
|
|
<template>
|
|
<UButton icon="i-heroicons-magnifying-glass" />
|
|
</template>
|
|
```
|
|
|
|
## Here are some components you can use... but there are many others !
|
|
|
|
::card-group
|
|
::card
|
|
---
|
|
title: Accordion
|
|
to: https://ui.nuxt.com/components/accordion
|
|
target: _blank
|
|
---
|
|
Display togglable accordion panels.
|
|
::
|
|
::card
|
|
---
|
|
title: Carousel
|
|
to: https://ui.nuxt.com/components/carousel
|
|
target: _blank
|
|
---
|
|
Display images or content in a scrollable area.
|
|
::
|
|
::card
|
|
---
|
|
title: Command Palette
|
|
to: https://ui.nuxt.com/components/command-palette
|
|
target: _blank
|
|
---
|
|
Add a customizable command palette to your app.
|
|
::
|
|
::card
|
|
---
|
|
title: Popover
|
|
to: https://ui.nuxt.com/components/popover
|
|
target: _blank
|
|
---
|
|
Display a non-modal dialog that floats around a trigger element.
|
|
::
|
|
::card
|
|
---
|
|
title: Range
|
|
to: https://ui.nuxt.com/components/range
|
|
target: _blank
|
|
---
|
|
Display a range field
|
|
::
|
|
::card
|
|
---
|
|
title: Table
|
|
to: https://ui.nuxt.com/components/table
|
|
target: _blank
|
|
---
|
|
Display data in a table.
|
|
::
|
|
::
|
|
|
|
## Conclusion
|
|
|
|
Nuxt UI is the **perfect**, **modular** and **customizable** UI library for creating websites in Nuxt. it allows you to create a beautiful website with incredible components (more than 45!)
|
|
In addition, the Pro version allows you to expand the range of components, it's a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
|
|
It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
|