how to use shadcn ui in vue 3

How to Use Shadcn UI in Vue 3

VueJS
19/09/23
Webvees

In this tutorial, I will show you how to install & setup shadcn ui in Vue 3. We will see how to use Vue 3 with Typescript shadcn/ui. Note shadcn-vue is an unofficial community-led Vue port of shadcn/ui.


Create Vue 3 Project

Run below command in terminal to install 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 tailwindcss 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 your app can resolve paths without error

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


Update vite.config.ts

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

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

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

<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>
add shadcn ui vue 3

add shadcn ui vue 3