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:

If you're using the JS template, jsconfig.json must exist for the CLI to run without errors.

# 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

If you're utilizing postcss.config.js, these changes will be inconsequential.

vite.config

import path from 'node:path'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'

import tailwind from 'tailwindcss'
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

npm install -D tailwindcss autoprefixer postcss

postcss.config.js

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

Edit tsconfig/jsconfig.json

If you're using TypeScript, the current version of Vite splits configuration into three files, requiring the same change for tsconfig.app.json.

Add the code below to the compilerOptions of your tsconfig.json or jsconfig.json so your app can resolve paths without error

{
  "compilerOptions": {
    // ...
    "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 'node:path'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'

import tailwind from 'tailwindcss'
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwind(), autoprefixer()],
    },
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Delete default Vite styles

Delete the default Vite stylesheet ./src/style.css

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 tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/assets/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
Write configuration to components.json. Proceed? > Y/n

Update main.ts

Remove import for style.css and add tailwind style import import './assets/index.css'

import { createApp } from 'vue'
- import './style.css'
import App from './App.vue'
+ import './assets/index.css'

createApp(App).mount('#app')

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>