Vite’s magic isn’t in its speed, but in how it makes you forget speed is even a concern.
Let’s get a project off the ground. We’ll use Vue, because it’s the default and a great way to see Vite’s reactivity in action.
First, you need Node.js installed. If you don’t have it, grab it from nodejs.org. Once that’s sorted, open your terminal.
To create a new Vite project, we use the create-vite scaffolding tool. Run this command:
npm create vite@latest my-vue-app --template vue
This command does a few things. npm create vite@latest tells npm to download and run the latest version of the create-vite package. my-vue-app is the name of the directory it will create for your project. --template vue specifies that we want to use the Vue template. You could also use --template react or --template vanilla for other frameworks.
After running that, you’ll see output like this:
Scaffolding project in /path/to/your/directory/my-vue-app...
Done. Now run:
cd my-vue-app
npm install
npm run dev
Follow those instructions. Navigate into your new project directory:
cd my-vue-app
Then, install the project dependencies:
npm install
This fetches all the necessary libraries that your Vue project needs to run, as defined in package.json.
Finally, start the development server:
npm run dev
Vite will spin up a development server, and you’ll see output similar to this:
VITE v5.0.0 ready in 313 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
Open your browser and go to http://localhost:5173/. You should see the default Vite + Vue starter page.
The core problem Vite solves is the slow, build-heavy development experience of traditional frontend tooling. Instead of bundling your entire application before the browser can even see it, Vite leverages native ES Modules (ESM) in the browser. When you request a module, Vite serves it directly. If the module has dependencies, Vite serves those too, on demand. This means your development server starts almost instantly, and hot module replacement (HMR) updates are lightning fast because only the changed module and its direct dependents need to be re-evaluated, not the entire bundle.
This on-demand serving is managed by Vite’s development server, which is built on top of esbuild for dependency pre-bundling and Rollup for production builds. During development, esbuild is used for its incredible speed in pre-bundling dependencies. This is a one-time cost per dependency, converting them to ESM. Once pre-bundled, Vite serves your source code modules directly over native ESM.
When you save a file, say src/App.vue, Vite doesn’t rebuild everything. It detects the change, sends an update signal to the browser, and the browser re-fetches only the App.vue module and any modules that directly import it. The browser’s native ESM loader handles the rest, updating the UI in milliseconds.
The configuration for Vite is surprisingly minimal, residing in a vite.config.js (or .ts) file at the root of your project. For a basic Vue setup, you often don’t need to touch it. However, if you wanted to add a plugin, for example, to handle SVG imports, you would modify it like this:
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader'; // Assuming you've installed this
export default defineConfig({
plugins: [vue(), svgLoader()],
});
This svgLoader plugin intercepts .svg file imports and transforms them into Vue components, seamlessly integrating them into your project without explicit configuration in your application code.
The true power of Vite’s dev server is its understanding of the dependency graph. It doesn’t just serve files; it understands their relationships. When a change occurs, it intelligently invalidates only the necessary parts of the cache and pushes updates. This means that even with hundreds or thousands of modules, the HMR experience remains instantaneous, a stark contrast to the minutes-long rebuilds that plagued older build tools.
The most significant departure from traditional bundlers is Vite’s approach to dependencies. Instead of bundling them upfront, Vite uses esbuild to pre-bundle them into CommonJS or ESM modules during the initial server start. This pre-bundling step is crucial because many libraries are not distributed in ESM format, and browsers don’t handle require() calls. By pre-bundling, Vite ensures that these dependencies are compatible and efficiently served, while still allowing your application code to be served as native ESM.
Once you’ve got your project running and are comfortable with the development workflow, the next logical step is to explore how Vite handles production builds and its plugin ecosystem.