Vite

Create project ​

Start by creating a new Vue project using 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"),
    },
  },
})

Run the CLI ​

Run the shadcn-vue init command to setup your project:

npx shadcn-vue@latest init

Configure components.json ​

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 / Nuxt / Laravel
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

That's it ​

You can now start adding components to your project.

npx shadcn-vue@latest add button

The command above will add the Button component to your project. You can then import it like this:

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

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>