vue-vite-setup - SKILL.md Agent Skill

name: vue-vite-setup description: 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.

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

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

// 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:

npm install -D @tailwindcss/vite tailwindcss

Setup: Import tailwind CSS from src/assets/main.css

@import 'tailwindcss';

3. Install Prettier Plugin for Tailwind

Install the Prettier plugin to automatically sort Tailwind classes. Setup .prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "plugins": ["prettier-plugin-tailwindcss"]
}

Installation:

npm install -D prettier-plugin-tailwindcss

4. TypeScript Configuration

Keep the configuration generated by Vue CLI.

5. Complete Vite Config Template

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:

{
  "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:

# 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+