I tested Nuxt UI - Digital Docuverse

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/ui
dependency to your project:

pnpm add @nuxt/ui

Add it to your
modules
section in your
nuxt.config
:

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, @nuxtjs/color-mode and nuxt-icon modules for you.

...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.

Configure options in your

nuxt.config.ts

as such:

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

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 or your own custom colors. By default, the

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

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

export default defineAppConfig({
  ui: {
    container: {
      constrained: 'max-w-5xl'
    }
  }
})

Thanks to 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

prop that allows you to customize everything specifically.

<template>
  <UContainer :ui="{ constrained: 'max-w-2xl' }">
    <slot />
  </UContainer>
</template>

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 an

icon

prop that allows you to add an icon to the component.

<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>

Here are some components you can use... but there are many others !

Accordion

Carousel

Command Palette

Popover

Range

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.