Quick Start Guide

Get up and running with Nuxt UI in three simple steps.

Install Dependencies

Install Nuxt UI and Tailwind CSS in your project.

npm install @nuxt/ui tailwindcss

Configure Your Framework

Set up Nuxt UI for your framework of choice.

Nuxt
Vue

Add the Nuxt UI module to your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

Then import the CSS in your main stylesheet:

assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

Add the Nuxt UI Vite plugin to your vite.config.ts:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

Use the Vue plugin in your main.ts:

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

Import the CSS in your main stylesheet:

assets/main.css

@import "tailwindcss";
@import "@nuxt/ui";

Use Your First Component

Start using Nuxt UI components in your application.

App.vue

<template>
  <div>
    <UButton
      label="Click me"
      color="primary"
      variant="solid"
      @click="handleClick"
    />
    
    <UButton
      label="With Icon"
      icon="i-heroicons-rocket-launch"
      trailing
    />
    
    <UButton
      label="Loading"
      loading
    />
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('Button clicked!')
}
</script>

All components are auto-imported, so you can use them directly without explicit imports.

Next Steps

Nuxt Installation

Learn about advanced Nuxt configuration options.

Vue Installation

Learn about advanced Vue configuration options.

Component Library

Explore all available components.

Theming

Customize the look and feel of your components.

Check out our templates for complete project examples.

Introduction

Nuxt Installation

⌘I

Getting Started

Theme

Guides

Migration

Quickstart

Quick Start Guide

Next Steps

Nuxt Installation

Vue Installation

Component Library

Theming

Build docs developers (and LLMs) love

Getting Started

Theme

Guides

Migration

​Quick Start Guide

​Next Steps

Nuxt Installation

Vue Installation

Component Library

Theming

Build docs developers (and LLMs) love

Quick Start Guide

Next Steps