Introduction to Vite for Vue Developers

Vite is a modern, lean, and lightning fast development tool made with the developer experience as top priority. Also, according to Evan You, the official recommendation for Vue 3 tooling will be switching from Vue CLI to Vite (reference One Year Into Vue 3 Talk [9:00 - 10:20]) meaning in 2022 Vue CLI will be yesterday's tool. Thus, now is definitely the time for you to start using Vite!

But where do you start? No worries! We've got you covered, with a brand new course all about Vite. Checkout the introductory lesson now for free and read on to get a glimpse into some of the material we cover during the course.

So does learning Vite from top to bottom sound exciting? Of course it does! So here's a sneak peek into some of the material you can expect to learn.

Starting a Vue.js Project with Vite

When starting a Vue.js project with Vite there are a number of options depending on your needs. Here are 3 methods that we cover in the course.

1. npm init vite@latest - documented in the official Vite docs, provides bare bones Vue.js project
2. npm init vue@next - provides an interactive CL setup similar to Vue CLI
3. Vite templates - can jump start projects really quickly with opinionated defaults

Vite Basics

As a modern day build tool Vite has a variety of different responsibilities ranging from how to work with styles to handling ES modules and everything in between. In the course, we cover all such topics including:

• Working with Styles
  • CSS in SFCs
  • CSS stylesheets
  • CSS pre-processors
  • and CSS modules
• Static Assets
  • Importing images
  • Using new URL to get public paths
  • In-lining small images with base64 encoding
• JSON
  • Importing JSON as JavaScript objects
  • Importing a root field as a named export
• Glob Imports
  • Dynamically importing files based on a glob pattern
  • Importing asynchronously with a dynamic imports
  • Importing synchronously with static imports
• TypeScript
  • Adding TypeScript to an existing Vite/Vue project
  • Using Typescript in SFC's
• Vite Config
  • Setting up an @ import alias
  • And a sampling of other Vite config options

This may seem like a lot to learn but really it's fairly straightforward as Vite does much of the heavy lifting for us, allowing you to stay focused on your actual application.

Production Builds in Vite

While Vite shines the most during development with it's super fast cold starts and HMR, it wouldn't be a complete build tool without being able to bundle for production. This is done in a Vite project with the following command.

npm run build

On build, Vite uses the bundler Rollup under the hood to bundle your ES modules into a single main JavaScript file as well as split your async modules into their own chunks ready for use only when they're needed. This is not necessary in development as Vite utilizes native browser support for ES modules, however shipping unbundled ESM in production is still inefficient so Vite performs this traditional bundle step for you.

Environment Variables

Environment variables are another useful feature often used for supporting different data sources depending on your application environment and for keeping secrets safe. Vite, of course, supports them as well.

You can access environment variables in Vite projects with

import.meta.env

You can set environment variables like you would in a typical node environment, hosting platform interface, or in any of the special files supported by Vite.

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Vite also helps protect you from accidentally exposing secret environment variables to the client by requiring a prefix VITE_ on any variable to be included in the bundled application.

Migrating from Vue CLI to Vite

Next, since Vue CLI has been the official recommendation for Vue for quite some time, there are many folks with projects that began with Vue CLI, are managed with Vue CLI, and are built/developed with Webpack. To get up to snuff with the latest tooling and benefit from the super fast development experience of Vite many will want to migrate their Vue CLI powered projects to Vite.

While each Vue CLI project is different depending on the included dependencies and chosen approaches there are some standard steps that all developers will need to take to migrate their projects. These 9 steps will get you a long way into the migration and might even be all you need.

1. Update Dependencies
2. Provide Support only For Modern Browsers
3. Add Vite Config
4. Move the index.html
5. Update the Scripts
6. Update Environment Variables
7. Add .vue extension to SFC imports
8. Clean Up Magic Comments
9. Enjoy a Faster and More Seamless Development Experience

In the course, as well as this dedicated blog post, we go into the details of each step.

Make Vite More Reusable Across Projects

Finally, depending on how often you're jumping between projects or spinning up new ones, there are some steps you can take to make Vite more reusable across those projects.

Strategies include:

1. using existing Vite project templates
2. creating your own Vite project templates
3. using existing Vite plugins
4. and creating your own Vite plugins

During the course, we go over each strategy in detail and by the end of it you'll have your own custom template wired up with TailwindCSS, ESLint, Prettier, Vue Router, and the @ import alias as well as a custom simple markdown to Vue component plugin.

Conclusion

Vite is the future of tooling for Vue development. As such, you should be prepared to use it. Not only that though, I guarantee you that within just a few short days of using Vite you'll find yourself waiting less and coding more, with less mental jolts and an overall better development flow. Let us help you get started with Vite with a Vue School Subscription today and access to the comprehensive course: Rapid Development with Vite!