---
title: Vite
description: Install and configure Vite.
---

<Steps>

### Create project

Start by creating a new Vue project using `vite`:

<Callout>

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

</Callout>

```bash
# 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

<TabsMarkdown>
  <TabMarkdown title="vite.config">

  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#89) dependency so you don't have to install it again in your package.json

  ```bash
  npm install -D tailwindcss autoprefixer
  ```

  <Callout>

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

  </Callout>

  #### `vite.config`

  ```typescript {5,6,9-13}
  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'),
      },
    },
  })
  ```

  </TabMarkdown>

  <TabMarkdown title="postcss.config.js">

  ```bash
  npm install -D tailwindcss autoprefixer postcss
  ```

#### `postcss.config.js`

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

  </TabMarkdown>
</TabsMarkdown>

### Edit tsconfig/jsconfig.json

<Callout>

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

</Callout>

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

```json {4-7}
{
  "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

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

```typescript {15-19}
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:

```bash
npx shadcn-vue@latest init
```

### Configure components.json

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

```txt:line-numbers
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'`

```diff typescript {2,4}
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.

```bash
npx shadcn-vue@latest add button
```

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

```vue {2,7}
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

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

</Steps>