Image

lightning-fast-builds-with-vite

1 min read
Last update: December 19, 2021

Getting Vite working with Vue

It’s pretty easy to get Vite working with Vue, and if you start a project with $ npm init @vitejs/app you can choose to have it setup automatically. However, it’s super easy to add framework support to a Vite project, and Evan demonstrates this in the video. Once this is working, the hot-module replacement should make it lightning fast to see changes.

Aside from running npm run build to build your Vue project before you deploy it, Vite also comes with the npm run serve command. This will run the Vite preview command which starts a production preview server. This is emulates a normal http server that serves only static assets from your /dist directory. The output and behavior should be the same between development and production.

Vite performs a great deal of build optimizations to get your application running fast in production. For more information on these, check out the documentation. One of them is CSS code splitting, which Evan demonstrates in this video.