Web devlopment, Nuxt·
I tested Nuxt UI
Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI
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
- Install
@nuxt/uidependency to your project:
pnpm add @nuxt/ui
- Add it to your
modulessection in yournuxt.config:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
Automatically installed modules
Nuxt UI will automatically install the @nuxtjs/tailwindcss, @nuxtjs/color-mode and nuxt-icon modules for you.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:<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 extension to get autocompletion for the classes.You can read more on how to set it up on the @nuxtjs/tailwindcss 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 injected by the module. |
nuxt.config.ts as such:nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
ui: {
global: true,
icons: ['mdi', 'simple-icons']
}
})
🎨 Theming
Colors
Configuration
Components are based on aprimary and a gray color. You can change them in your app.config.ts.app.config.ts
export default defineAppConfig({
ui: {
primary: 'green',
gray: 'cool'
}
})
primary color is green and the gray color is cool.When using custom colors or 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. You can generate your 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 file. You can override those in your own app.config.ts.app.config.ts
export default defineAppConfig({
ui: {
container: {
constrained: 'max-w-5xl'
}
}
})
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.<template>
<UContainer :ui="{ constrained: 'max-w-2xl' }">
<slot />
</UContainer>
</template>
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.Icons
You can use any icon (100,000+) from Iconify.Some components have anicon prop that allows you to add an icon to the component.<template>
<UButton icon="i-heroicons-magnifying-glass" />
</template>