Skip to content

Commit e2ff415

Browse files
imrim12imrim12
committed
docs: add blog 6
1 parent 81ea99f commit e2ff415

1 file changed

Lines changed: 260 additions & 0 deletions

File tree

‎content/3.blog/7.nuxt-ui.md‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
---
2+
title: 'I tested Nuxt UI'
3+
description: "Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI"
4+
image:
5+
src: https://ui.nuxt.com/social-card.png
6+
authors:
7+
- name: Kevin browski
8+
to: https://twitter.com/benjamincanac
9+
avatar:
10+
src: https://i.pravatar.cc/128?u=6
11+
date: 2023-10-19
12+
badge:
13+
label: Web devlopment, Nuxt
14+
---
15+
16+
## Introduction
17+
18+
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.
19+
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.
20+
21+
### ✨ Awesome Features
22+
23+
- Built with Headless UI and Tailwind CSS
24+
- HMR support through Nuxt App Config
25+
- Dark mode support
26+
- Support for LTR and RTL languages
27+
- Keyboard shortcuts
28+
- Bundled icons
29+
- Fully typed
30+
- Figma Kit
31+
32+
## 😌 Easy and quick installation
33+
34+
### Setup
35+
36+
1. Install `@nuxt/ui` dependency to your project:
37+
38+
::code-group
39+
40+
```bash [pnpm]
41+
pnpm add @nuxt/ui
42+
```
43+
44+
```bash [yarn]
45+
yarn add @nuxt/ui
46+
```
47+
48+
```bash [npm]
49+
npm install @nuxt/ui
50+
```
51+
52+
```bash [bun]
53+
bun add @nuxt/ui
54+
```
55+
56+
::
57+
58+
2. Add it to your `modules` section in your `nuxt.config`:
59+
60+
```ts [nuxt.config.ts]
61+
export default defineNuxtConfig({
62+
modules: ['@nuxt/ui']
63+
})
64+
```
65+
66+
That's it! You can now use all the components and composables in your Nuxt app 🤩
67+
68+
### Automatically installed modules
69+
70+
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.
71+
72+
::callout{icon="i-heroicons-exclamation-triangle"}
73+
You should remove them from your `modules` and `dependencies` if you've previously installed them.
74+
::
75+
76+
### ...And all in Typescript !
77+
78+
This module is written in TypeScript and provides typings for all the components and composables.
79+
80+
You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
81+
82+
```vue
83+
<template>
84+
<UBreadcrumb :links="links">
85+
<template #icon="{ link }">
86+
<UIcon :name="link.icon" />
87+
</template>
88+
</UBreadcrumb>
89+
</template>
90+
91+
<script setup lang="ts">
92+
import type { BreadcrumbLink } from '#ui/types'
93+
94+
export interface Props {
95+
links: BreadcrumbLink[]
96+
}
97+
98+
defineProps<Props>()
99+
</script>
100+
```
101+
102+
### The power of IntelliSense
103+
104+
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.
105+
106+
You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/tailwind/editor-support) module documentation.
107+
108+
### Many options
109+
110+
| Key | Default | Description |
111+
|-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
112+
| `prefix` | `u` | Define the prefix of the imported components. |
113+
| `global` | `false` | Expose components globally. |
114+
| `icons` | `['heroicons']` | Icon collections to load. |
115+
| `safelistColors` | `['primary']` | Force safelisting of colors to need be purged. |
116+
| `disableGlobalStyles` | `false` | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
117+
118+
Configure options in your `nuxt.config.ts` as such:
119+
120+
```ts [nuxt.config.ts]
121+
export default defineNuxtConfig({
122+
modules: ['@nuxt/ui'],
123+
ui: {
124+
global: true,
125+
icons: ['mdi', 'simple-icons']
126+
}
127+
})
128+
```
129+
130+
## 🎨 Theming
131+
132+
### Colors
133+
134+
#### Configuration
135+
136+
Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
137+
138+
```ts [app.config.ts]
139+
export default defineAppConfig({
140+
ui: {
141+
primary: 'green',
142+
gray: 'cool'
143+
}
144+
})
145+
```
146+
147+
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`.
148+
149+
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.
150+
151+
### Components
152+
153+
#### `app.config.ts`
154+
155+
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`.
156+
157+
```ts [app.config.ts]
158+
export default defineAppConfig({
159+
ui: {
160+
container: {
161+
constrained: 'max-w-5xl'
162+
}
163+
}
164+
})
165+
```
166+
167+
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.
168+
169+
#### `ui` prop
170+
171+
Each component has a `ui` prop that allows you to customize everything specifically.
172+
173+
```vue
174+
<template>
175+
<UContainer :ui="{ constrained: 'max-w-2xl' }">
176+
<slot />
177+
</UContainer>
178+
</template>
179+
```
180+
181+
::callout{icon="i-heroicons-light-bulb"}
182+
You can find the default classes for each component under the `Config` section.
183+
::
184+
185+
### Dark mode
186+
187+
All the components are styled with dark mode in mind.
188+
189+
:color-mode-button
190+
191+
### Icons
192+
193+
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
194+
195+
Some components have an `icon` prop that allows you to add an icon to the component.
196+
197+
```vue
198+
<template>
199+
<UButton icon="i-heroicons-magnifying-glass" />
200+
</template>
201+
```
202+
203+
## Here are some components you can use... but there are many others !
204+
205+
::card-group
206+
::card
207+
---
208+
title: Accordion
209+
to: https://ui.nuxt.com/components/accordion
210+
target: _blank
211+
---
212+
Display togglable accordion panels.
213+
::
214+
::card
215+
---
216+
title: Carousel
217+
to: https://ui.nuxt.com/components/carousel
218+
target: _blank
219+
---
220+
Display images or content in a scrollable area.
221+
::
222+
::card
223+
---
224+
title: Command Palette
225+
to: https://ui.nuxt.com/components/command-palette
226+
target: _blank
227+
---
228+
Add a customizable command palette to your app.
229+
::
230+
::card
231+
---
232+
title: Popover
233+
to: https://ui.nuxt.com/components/popover
234+
target: _blank
235+
---
236+
Display a non-modal dialog that floats around a trigger element.
237+
::
238+
::card
239+
---
240+
title: Range
241+
to: https://ui.nuxt.com/components/range
242+
target: _blank
243+
---
244+
Display a range field
245+
::
246+
::card
247+
---
248+
title: Table
249+
to: https://ui.nuxt.com/components/table
250+
target: _blank
251+
---
252+
Display data in a table.
253+
::
254+
::
255+
256+
## Conclusion
257+
258+
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!)
259+
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.
260+
It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.

0 commit comments

Comments
 (0)