Vue · Tooling

Vue 3 + Vite — A Field Guide

Vite is the default build tool for Vue 3, and for good reason — its dev server starts instantly and hot-reloads without the slowdown older bundlers hit as projects grow.

John Kihiu12 min read

Vite is the recommended build tool for Vue 3, created by Vue's own author, and it has become the default because it solves the problem that made older bundler-based dev servers painful: they got slower as your project grew. Vite stays fast regardless of project size, which changes the day-to-day experience of building a Vue app more than any framework feature.

Why the dev server is instant

Traditional bundlers built your entire app before serving it, so startup time grew with the codebase. Vite takes a different approach in development: it serves your source over native ES modules, letting the browser request modules as needed, and only transforms what is actually requested. The result is a dev server that starts near-instantly even on a large app, and hot module replacement (HMR) that updates the changed module without rebuilding everything — the feedback loop stays tight no matter how big the project gets.

Production builds

For production, Vite switches strategies and bundles with Rollup, producing an optimised, tree-shaken, minified build with code-splitting. So you get the best of both: an unbundled, instant dev experience and a properly optimised production bundle. This split is deliberate — the fast-feedback approach that shines in development is not what you want for a final artifact, and Vite uses the right tool for each phase.

What you'll actually configure

Most Vue projects touch only a handful of Vite settings, and the scaffolded default is sensible out of the box:

Start from the official scaffold

Do not hand-build a Vite config. npm create vue@latest sets up Vue 3 with Vite, and optionally TypeScript, routing, Pinia, and testing, all wired correctly. You get a working, best-practice configuration to build on, and you only touch the config for the few project-specific needs above. Reinventing the setup is effort spent solving a problem the scaffold already solved.

Vite is the default for Vue 3 because its native-ESM dev server stays instant as projects grow and its Rollup-based production build is properly optimised — the fast feedback loop is the real win. Start from the official scaffold, adjust the handful of settings your project needs, and let Vite keep development fast without you having to think about the build tool at all.

John Kihiu
Acumatica ERP Developer · Laravel Engineer

Independent software engineer in Nairobi specialising in Acumatica customisations, Laravel backends, and tax fiscalisation integrations across East and Southern Africa.