How to Use Shadcn UI in Vue 3

In this tutorial, I will show you how to install and set up Shadcn UI in Vue 3. We will explore how to use Vue 3 with TypeScript and Shadcn UI. Please note that Shadcn Vue is an unofficial community-led Vue port of Shadcn UI.

Create Vue 3 Project

1. Run the command below in the terminal to install a Vue 3 project with Vite.

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

Add Tailwind and its configuration

Install Tailwind CSS and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Edit tsconfig.json

Add the code below to the compilerOptions of your tsconfig.json so that your app can resolve paths without errors.

"baseUrl": ".",
"paths": {
 "@/*": ["./src/*"]
}

Update vite.config.ts

Add the code below to the vite.config.ts file so that your app can resolve paths without errors.

import path from "path"
import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite"

export default defineConfig({
 plugins: [vue()],
 resolve: {
  alias: {
   "@": path.resolve(__dirname, "./src"),
  },
 },
})

Install Shadcn UI in Vue 3 with CLI

Run below command to install shadcn ui.

npx shadcn-vue@latest init

You will be asked a few questions to configure components.json.

Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite + Vue / Nuxt
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes (no)

Import index.css file in main.ts

Remember you need to import index.css in main.ts.

// import './assets/main.css'
import './assets/index.css'


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

Now test shadcn-vue component.

npx shadcn-vue@latest add button

App.vue

Vue

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <div class="flex flex-col items-center">
    <h1 class="text-green-500 text-3xl">How to Use Sidebar in Vue 3 Vuetify 3</h1>
    <Button>Button</Button>
  </div>
</template>