vue-vite-setup

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. Use when this capability is needed.
metadata	{"author":"camptocamp"}

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+

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.