Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt
Use this file to discover all available pages before exploring further.
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.Add the Nuxt UI module to your nuxt.config.ts:export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
@import "tailwindcss";
@import "@nuxt/ui";
Add the Nuxt UI Vite plugin to your 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()
]
})
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 "tailwindcss";
@import "@nuxt/ui";
Use Your First Component
Start using Nuxt UI components in your application.<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.