How Vite Changes the Game for Vue and Web Developers

Rate this content
Bookmark

In this talk you will learn what Vite is, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what Vitepress is and how to use it.

Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what it means for Nuxt, and many more.

Alex Kyriakidis
Alex Kyriakidis
22 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Vue School offers free training material, workshops, and consulting services. Vite is a game-changer for Vue and web development, significantly improving the development experience. It leverages the browser's native ES modules feature and uses ESBuild. Vite's dev server is much faster than other bundlers. Vite provides a blazing fast development environment for various frameworks and supports server-side rendering and static site generation. Vite is ready for production and likely to be used by Vue CLI in the future.

Available in Español

1. Introduction to Vue School and Vite

Short description:

Hello Vue London! I am Alex Kyriakides, the author of The Majesty of Vue.js. I have contributed to Vue.js and founded Vue School. We offer free training material, workshops, and consulting services to improve performance and fix bugs.

Hello Vue London! I hope you're enjoying the conference. I am Alex Kyriakides. I'm the author of the first book on Vue.js called The Majesty of Vue.js which I wrote when Vue.js was version 0.something. And over the years I have contributed to Vue.js and the ecosystem. And I'm the founder and teacher at Vue School. I'm based in Amsterdam and you can find me on Twitter and GitHub under the username of hoodlicks.

Vue School is the first training platform for Vue.js. We started back in 2016. And we have over 500 video lessons. And since we offer a lot of training material for free, we have all the fundamental courses for free. We have over 120,000 registered users. And these amazing people that you see here, they work with Vue School either as instructors and teachers or as contributors. At Vue School, besides video courses and tutorials, we do workshops, which are either in person or online in our virtual classroom. And workshops is a great form of training for learning something, a new technology or a new topic, very quickly, typically in a day or two. And all our workshops are live, intensive and hands-on. For companies, we help them by providing consulting and development services. And we are particularly good with helping improving performance and with fixing nasty bugs. So, if you need any help with that, feel free to let us know.

2. Vite: A Game-Changer for Vue and Web Development

Short description:

Today, I will talk about how Vite changes the game for Vue and web development. Vite is a new front-end build tool that significantly improves the development experience. It consists of a dev server that saves code directly in the browser, making it incredibly fast. Vite leverages the browser's native ES modules feature and uses ESBuild for features not yet supported by modern browsers.

Now, today, I am going to speak to you about how Vite changes the game for Vue and web development. In this talk, I will cover what is Vite, why Vite is so great and why all the fuzz, how to use Vite with Vue or even React, what is VitePress, and in the end of the talk, I will answer some of the frequently asked questions, like, for example, what's happening with Vite and Nuxt.js. If you are interested in the technical insights, check out this excellent talk by Evan Yu from Vue Toronto. Here he covers a lot of information on how Vite is built, why it is built this way, why they made it. It's a very interesting talk. I definitely recommend checking it out.

OK, so let's get started with what is Vite. Vite is a new front-end build tool that significantly improves the front-end development experience. And what is Vite's goal? It is to make developers more productive. And how do you make developers more productive? By making developers happier. And how do you make developers happier? By making their tools faster. That is a quote from Evan Hugh, the creator of Vite. But, OK, what is Vite exactly? Vite is a command line tool that consists of two parts, a dev server and a build command that bundles your code with Rollup for production. The dev server is the tool that you use while you're developing your application. And as you understand, the build command is what you run when you are ready to ship it.

Let's learn more about Vite's dev server. Now, while you develop with Vite, your code is saved in your browser directly without being bundled. And that's what makes the Vite dev server so fast. It is like opening your local files from your computer in your browser. To understand how Vite's dev server look like, think of it as UCLI, but way faster. When we say way faster, we really mean it. The Vite dev server starts in less than 300 milliseconds, and the hot module replacement takes place in less than 100 milliseconds. And Vite achieves that by leveraging the browser's native ES modules feature. In this image, you can see that all the major browsers, here, they support ES modules in their latest version. And this is also one of the reasons that we get an awesome tool like Vite today and not like a few years back, because we needed to wait for modern browsers to evolve and support features like this one in order to make our developer experience faster and nicer. Now, for features that Vite needs, but modern browsers don't support yet, Vite uses a tool called ESBuild. And it uses ESBuild for supporting bare imports, for implementing the hot module replacement, and for having support for tools like Typescript or JSX. I didn't know of ESBuild before I look into the Vite Dev server, and I figured that it is written in Go and it compiles to native code. And that it uses parallelism heavily. And I found this benchmark very interesting, and you can see here that ESBuild is able to bundle or to compile a large JavaScript code base in 0.3 minutes, a JavaScript code base in 0.37 seconds.

3. Dev Server Performance and VT Philosophy

Short description:

And this is massive if you compare it with the other bundlers. It's about 25 times slower than ESBuild. The dev server becomes slower as an application grows. VT is revolutionary in that regard because it has a very different philosophy on how it spins up the dev server.

And this is massive if you compare it with the other bundlers, but see that it takes about five times more when ESBuild is running with one thread, so without the parallelism. But the next fastest option after ESBuild with one thread is Rollup with Terser. And this takes 36 seconds. It's about 25 times slower than ESBuild. And then Webpack is a bit slower, 41 seconds. And like the slowest solution here would take 120 seconds.

And here you might say that Alex, like 40 seconds, one second, like why does it matter? It's just some seconds. But it does matter because this is how much you would have to wait in order to speed up your development server. So every time you run, I don't know, npm run dev, you need to wait for this, let's say 41 seconds, but now it will just take half a second. And especially if you're tweaking your dev server, if you're making some like root changes and you need to stop the server, run it again, stop the server, run it again, then this can be like a pain for the developers. But yeah, with VSBuild, it's way, way nicer. And if you think about how many times every day you start your dev server, I think it would be like easy 10 times a day. So if you think that this is like a one minute step, then this gives you 10 more minutes every day, which is massive.

Okay, so which dev server solves the common enterprise problem? And the common enterprise problem is that as an application grows, the dev server becomes slower. And that happens based on how the typical bundlers work for development. So let's take this bundle-based dev server as an example. When we are running npm run dev, or whatever command, the bundler gets to start from an entry point, for example, your main.js file, and then it will scan for all your routes. And for every route, it will go in, it will see what components and dependencies you are importing, and it will go like all the levels in depth to find the dependencies, load them, transpile them, put them together, and make this big bundle. And then it will give the server-ready signal, which means that you can visit your application in the browser. And this is like perfectly fine when you have three routes and like 50 components, but if you have a couple of hundreds of routes and a thousand of components, then this can take easily half an hour. And VT is revolutionary in that regard because it has a very different philosophy on how it spins up the dev server, which you could say that it is reversed of how traditional bundling solves this problem. So notice that it starts with the server ready, like this is the first step. First step is like, server is ready, you're good to go. While this will be the last step. And then it waits for the HTTP request and this is your entry point. So if you open your application in the browser in the homepage, the entry point is the homepage. If you open like the user page, then that would be the entry point. And from that entry, it will figure out which route this is. So for example, the homepage, and it will load the components and the dependencies only for that route. So even if you have 1,000 routes and like 2,000 components, it will still be super fast because it will only open this one route and like 30 components that you use in that place.

4. Vite's Build Command and Legacy Browser Support

Short description:

Vite's build command builds your application for production, taking care of more things and ensuring it works in all browsers. It is faster than traditional bundling and supports legacy browsers with the PluginLegacy plugin.

And then when you click in your dev server on another link, then it will like find the new route and it will load the new dependencies, which is really awesome, if you think about it. It's a very smart way to do bundling.

Okay, so let's go next to the Vite's build command. And this is the command that you will run when your application is ready to go to production. Vite has a bundling process here, and this takes place using the bundler that is called Rollup. If you wonder why Rollup and not something else, that's because Rollup is the best performing Javascript based bundler, in terms of build speed, tree shaking, and output size. So that's why.

Vite's build command builds your application for production, and this takes longer than dev, because here, it needs to take care of more things, and then this needs to make sure that it works not only in modern browsers, but everywhere. But don't worry about this, because you only build once. So you have your dev server running all day, every day, multiple times, and once in a while, you need to build it and upload it for production. And still, when you build, it is way faster than traditional bundling like Webpack and Vue CLI. And as I mentioned, if you use Vite, it doesn't mean that you can only support modern browsers. You can even support legacy browsers. There is a plug-in called PluginLegacy, which you can install on Vite, and then you will have support for all browsers, including our old pal Internet Explorer. So if that's important for your company, you can even do it that in Vite.

5. Vite's Features and VitePress

Short description:

Vite provides a blazing fast development environment for Vue.js, React.js, Preact, Svelte and more. There are also many other boilerplates and templates you can use with Vite that are created from the community. Vite is also capable of server-side rendering and static site generation, and there's VitePress, a static site generator built on top of Vite.

Okay, let's do a quick summary of what we saw so far. Summary of Vite. Vite has a super fast development experience, and it has a great bundle output using rollup when building for production, which is also supported by legacy browsers, if needed. So Vite is awesome.

One common question is if Vite is made for Vue.js, and that's because it is made from the creator of the Vue.js framework, M1U, but the answer to that question is no, and to be honest, that will be unfair. Imagine that if you developers, they had to wait half a second to start at a server, but then React developers have to wait 30 seconds or sometimes like 20 minutes to work. That would make it a bad monopoly for Vue.js, but no, no, I'm kidding now, that's not the case. Vite is available for all the JavaScript frameworks. And actually, Vite is framework agnostic, which means that Vite provides a blazing fast development environment for Vue.js, React.js, Preact, Svelte and even more.

When you're going to create a Vite application, you run this command npm init vite at latest, and then you specify the project name, and then you can choose what framework you want to use, Vanilla, Vue, React, Preact, et cetera. And these are just the official plugins that ship within Vite. There are also many other boilerplates and templates you can use with Vite that are created from the community.

I stumbled upon this example, or this compile on Twitter. This is the CEO of Repl.it, and here they compare the Create React app versus the Vite React dev server. So look at this, I was not from scratch. On the left, we have the Create React app, on the right we have the Vite React. Vite React starts a bit later, like the click play a bit later, but look at how fast it is, this is record time. Here we can already see the React application running, while on the left it takes a while. Actually, we need to wait for almost the end of the video, about 40 seconds, to see just the application running. So this is a massive difference, and fun fact, after they made this comparison on Twitter, I think a few months later at the Replic, they replaced how they do the bundling for React to use Vite React. So now if you make React applications on Replic, they are way, way faster. And I think they also use Vite now for most of the JavaScript apps you can run on their website so that's a great use case where the dev server could even improve your production performance. But this is a rare use case of course.

Now Vite is also capable of server-side rendering and static site generation, which is really great news. There's also VitePress, which is a static site generator built on top of Vite. And VitePress is great for creating documentation and blogs, it's really, really fast. And it is like ViewPress, but lighter and faster. And I want to clarify that it is not coupled to Vite projects, so we don't need to have a Vite project to use Vite, VitePress, because VitePress can be used in any JavaScript project, it just uses Vite under the hood. So it can be inside a React app, a View app, a Vue CLI app, whatever. And VitePress is still an early walk-in progress version.

6. Vite, Next, and Vue School

Short description:

Vite is ready for production, and it's likely to be used by Vue CLI in the future. Vite is great news for Next, and there is an official module called Next Vite that allows you to enjoy a super fast Next dev experience. You don't need to learn Vue from scratch or rebuild your Vue CLI app. Vite means fast or rapid in French, and it's pronounced as Vite. Vue School IO offers the Vue 3 Masterclass, video courses, tutorials, and business services for all skill levels.

But there are some websites that use VitePress already in production, including the official Vue.js blog and the Vite.js website.

Okay, let's hit some frequently asked questions on Vite. Is Vite ready for production? Yes, it is, the Vite 2.0 stable was released on February 2021. Will Vite replace Vue CLI? Well, it's most likely that Vite will be used by Vue CLI under the hood instead of the current Webpack setup in the future. How about Next? What happens to our beloved framework? Well, Vite is great news for Next, and according to Evan, now Next can have a simpler core and focus more on higher-level API design and ecosystem modules. There is already a way to use Vite in Next too. There is an official module called Next Vite. And it's very easy to install it. You add the dependency, you change this setting in the next config file, and that's it. You can enjoy a super fast Next dev experience with Vite. So, check this out if you're using Next and want to experiment with Vite on that. And according to Sebastian Sopin, the co-author of Next, Next Vite will support Vite by default, which is really exciting.

Now, do I need to learn Vue from scratch? No, Vite doesn't change anything in regards to how you write your Vue.js code, so no need to learn anything new there. Do I need to rebuild my Vue CLI app from scratch? The answer to that is also no. It's likely that there will be a tool that will allow you to migrate your Vue CLI application from Webpack to Vite when the time is right. Why you pronounce Vite, and not Vite? That's an excellent question. I thought it was called Vite when I first saw it. But this is Vite, and it means fast or rapid in French. And when I learned this, it immediately clicked to me, because when I was a child, my mom used to say, Vite, Vite, when she wanted me to do something fast. And I doubt she knew that is fast in French, but the way she said it and the sound of it, it really sounds like a Vite, Vite, like big week. Let's go. Yeah, that's it.

I'm Alex Kyriakides, from Vue School IO. Vue School IO is popular for the Vue 3 Masterclass. This is a course, a video course, where you learn Vue.js by building a real world application from scratch. We build a complete forum and we teach you Vue.js and the best practice in the ecosystem, including how to use state management, permissions, user authentication, bundling, security, and whatnot. So I definitely recommend this course if you are looking to step up your Vue.js game. This is an advanced course, but at Vue School we have video courses and tutorials for all skill levels. We have fundamentals on Vue.js and the ecosystem, on Nuxt, ES6, modern JavaScript testing, and we also have intermediate and advanced courses for all the skill levels. And lastly, we also offer business services at Vue School, so if you need help with development, consulting, or team training, feel free to reach out to team at vueschool.io. Thank you very much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Rethinking Frontend Tooling
JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.