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.
npm init [email protected]- documented in the official Vite docs, provides bare bones Vue.js project
npm init [email protected]- provides an interactive CL setup similar to Vue CLI
- Vite templates - can jump start projects really quickly with opinionated defaults
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
new URLto get public paths
- In-lining small images with base64 encoding
- 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
- Adding TypeScript to an existing Vite/Vue project
- Using Typescript in SFC's
- Vite Config
- Setting up an
- And a sampling of other Vite config options
- Setting up an
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
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
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.
- Update Dependencies
- Provide Support only For Modern Browsers
- Add Vite Config
- Move the index.html
- Update the Scripts
- Update Environment Variables
- Add .vue extension to SFC imports
- Clean Up Magic Comments
- 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.
- using existing Vite project templates
- creating your own Vite project templates
- using existing Vite plugins
- 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.
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!