How to Use Shadcn-Vue with Nuxt 3: A Complete Guide

If you’re building a Nuxt 3 app and love the aesthetics and developer experience of the original shadcn/ui for React, you’re in luck — there's now a Vue 3 port that brings those exact vibes to your Vue ecosystem. Introducing Shadcn-Vue, the community-driven, Tailwind-based UI component library that mirrors the original Shadcn experience — and it works beautifully with Nuxt 3.

This post is your deep dive into everything Shadcn-Vue: how it works, why it’s different, how to integrate it into your Nuxt 3 project, and how to customize it like a pro.

💡 What is Shadcn-Vue?

Shadcn-Vue is the Vue 3 port of the increasingly popular shadcn/ui — a design system originally created for React. What made the original Shadcn special was its philosophy: instead of hiding components behind an opaque package, you generate the actual source code of each UI component into your own project using a CLI. This lets you fully customize your design system while still benefiting from accessible and elegant defaults.

Shadcn-Vue follows the same concept: each component you add becomes part of your project, editable and integrated with Tailwind CSS. It’s built on Vue 3 Composition API, is SSR-friendly, and is integrated cleanly into Nuxt 3 using the shadcn-nuxt module.

🚀 Why Shadcn-Vue Rocks (Especially in Nuxt 3)

• ✅ Based on Tailwind CSS – customizable and modern utility-first styling.
• ✅ Auto-imported with the Nuxt module – zero config headaches.
• ✅ Inspired by Shadcn React – almost 1:1 API and look.
• ✅ Code lives in your repo – no black box, no theme limitations.
• ✅ SSR-ready and optimized for Nuxt 3.

🛠️ Full Setup Guide for Nuxt 3

1. Install the Shadcn Nuxt Module

pnpm dlx nuxi@latest module add shadcn-nuxt

Or manually in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['shadcn-nuxt'],
  shadcn: {
    componentPath: './components/ui',
    prefix: ''
  }
})

2. Set Up Tailwind CSS (if you haven’t already)

npx nuxi@latest module add tailwindcss

Make sure your tailwind.config.ts has this:

export default {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './app.vue'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Import Tailwind in your nuxt.config.ts or app.vue:

css: ['@/assets/css/tailwind.css'],

3. Initialize Shadcn-Vue

npx shadcn-vue@latest init

You’ll be asked to choose a color palette and confirm the component folder path.

4. Add Components with the CLI

npx shadcn-vue@latest add button

This generates a fully editable Vue component like this:

<!-- components/ui/Button.vue -->
<template>
  <button :class="computedClass" v-bind="$attrs">
    <slot />
  </button>
</template>

<script setup>
const props = defineProps({ variant: String })
const computedClass = computed(() => `btn ${props.variant}`)
</script>

Now you can edit it however you like.

🧩 Component Composition Example

Here’s a simple layout using multiple Shadcn-Vue components:

<template>
  <div class="p-6">
    <Button variant="outline" @click="open = true">Open Modal</Button>
    <Dialog v-model:open="open">
      <DialogContent>
        <DialogHeader>Welcome</DialogHeader>
        <p>This is a Shadcn modal dialog!</p>
        <DialogFooter>
          <Button @click="open = false">Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

🎨 Theming & Dark Mode

Shadcn-Vue uses Tailwind CSS, so enabling dark mode is easy:

In tailwind.config.ts:

darkMode: 'class'

Then use conditional styling:

<div class="bg-white dark:bg-black text-gray-900 dark:text-white">
  <Button>Dark mode ready</Button>
</div>

📊 Comparison with Other UI Libraries

🧪 Production Tips

• ✅ Components are tree-shakable — only import what you use.
• ✅ You can lazy-load components for better performance.
• ✅ Compatible with Nuxt’s SSR and static generation.
• ✅ Use composables like useToast, useDialog to trigger UI logic programmatically.

🐞 Common Gotchas

• Make sure your Tailwind version matches the required version (v3 or v4).
• Don't forget to run shadcn-vue init before adding components.
• Custom paths or prefixes should be mirrored in nuxt.config.ts and components.json.

📚 Resources

• 🔗 Shadcn-Vue GitHub
• 📘 Official Docs
• 🎨 Component Gallery & Examples

🧠 Final Thoughts

Shadcn-Vue is a game-changer for Vue 3 and Nuxt developers who want full control over their UI, with modern, minimal, and accessible components that feel native to Tailwind CSS. Whether you're building a dashboard, SaaS app, or marketing site — you now have a design system that gives you power without compromise.

It’s fast, flexible, and production-ready.

If you’re using Nuxt 3 and Tailwind, there’s no better pairing right now.

Happy coding! ✨