Vite + Vue

Vite as Vue Tooling

Vite is the standard bundler/dev server for Vue 3, with first-class SFC support.

HMR updates components quickly while preserving state when possible.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ plugins: [vue()] })

Minimal Vite Vue plugin config.

Commands

dev, build, preview

• Prefer Vue 3 + Composition API.
• Use script setup for SFCs.
• Keep components focused.
• Lean on official docs.

Vite + Vue Cheatsheet

Quick reference for patterns covered in this lesson.

Env Vars

Client-exposed vars use VITE_ prefix.

Common Mistakes

• Expecting process.env.VUE_APP_* in Vite.
• Huge non-aliased relative imports.

Key Takeaways

• Vite + Vue is a core Vue skill.
• Practice in a Vite app.
• Prefer clarity.
• Revisit docs for edge cases.