shadcn-vue/apps/www/src/content/docs/installation/vite.md

title	description
Vite	Install and configure Vite.

Create project

Start by creating a new Vue project using vite:

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

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

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and configure postcss plugins

Vite already has postcss dependency so you don't have to install it again in your package.json

npm install -D tailwindcss autoprefixer

vite.config

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

import tailwind from "tailwindcss"
import autoprefixer from "autoprefixer"

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  resolve: {...}
})

npm install -D tailwindcss autoprefixer postcss

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

# (so you can import "path" without error)
npm i -D @types/node

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>