# Vue Vite Setup

> Best practices for setting up VueJS 3 projects with Vite, including proper Tailwind CSS integration and essential plugins. Use when creating or configuring Vue.js projects. Use when this capability is needed.

- Skill: `tomevault-io/vue-vite-setup` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/vue-vite-setup`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/vue-vite-setup/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/vue-vite-setup

---


# Vue.js 3 + Vite Setup Best Practices

## Core Principles

When setting up or modifying a VueJs 3 + Vite project, follow these mandatory practices to ensure optimal development experience and build performance.
Alawys rely on official documentation and community best practices, from vuejs.org.
---

## 1. Install Vue
```bash
npm create vue@latest
```
Choose the following options:
- Add TypeScript: Yes
- Add JSX Support: No
- Add Vue Router: Yes
- Add Pinia: Yes
- Add Vitest: Yes
- Add E2E Testing: No
- Add ESLint: Yes
- Add Prettier: Yes

## 2. Tailwind CSS Integration

### ✅ CORRECT: Use Vite Plugin (Recommended)

**Use `@tailwindcss/vite` instead of PostCSS integration**

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ]
})
```

**Installation:**
```bash
npm install -D @tailwindcss/vite tailwindcss
```

**Setup:**
Import tailwind CSS from `src/assets/main.css`
```css
@import 'tailwindcss';
```

## 3. Install Prettier Plugin for Tailwind

Install the Prettier plugin to automatically sort Tailwind classes.
Setup `.prettierrc.json`
```json
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-tailwindcss"]
}
```

**Installation:**
```bash
npm install -D prettier-plugin-tailwindcss
```

## 4. TypeScript Configuration
Keep the configuration generated by Vue CLI.

---

## 5. Complete Vite Config Template

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import vueDevTools from 'vite-plugin-vue-devtools'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
    vueDevTools()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})
```

---

## 6. Required Dependencies Checklist

**Always verify these packages are installed:**

```json
{
  "dependencies": {
    "vue": "^3.5.0",
    "vue-router": "^4.0.0",
    "pinia": "^2.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^6.0.0",
    "vite-plugin-vue-devtools": "^7.0.0",
    "@tailwindcss/vite": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "~5.6.0",
    "vue-tsc": "^2.0.0",
    "prettier": "3.6.2",
    "prettier-plugin-tailwindcss": "^0.7.2"
  }
}
```

---

## 7. Common Mistakes to Avoid

---

## 8. Verification Steps

**After setup, verify:**

```bash
# 1. Check all dependencies installed
npm list @tailwindcss/vite vite-plugin-vue-devtools prettier-plugin-tailwindcss

# 5. Dev server starts with DevTools
npm run dev
# ✅ Should see "Vue DevTools" message in console
```

---

## Summary Checklist

When setting up a Vue.js 3 + Vite project:

- [ ] Use `@tailwindcss/vite` plugin (NOT PostCSS)
- [ ] Include `vite-plugin-vue-devtools`
- [ ] Verify all essential plugins are loaded
- [ ] Dev server

---

**Version:** 1.0.0
**Last Updated:** 2025-12-15
**Compatible with:** Vue 3.5+, Vite 6+, Tailwind CSS 4+

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/camptocamp) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->