New Ways to Vue

Rate this content
Bookmark

Brief intro to the new features of Vue 3 and Vite, then focus on how those features / mindset affect the way we think of tooling and DX. Which leads to my Vitesse project and several unplugins that enhance the Vue developer experience even further (will do some short demos in between). Finally, introduce the ways to use those new features in the existing Vue 2 apps today and make the migrations easier.

Anthony Fu
Anthony Fu
16 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discussed new ways of using Vue, including the introduction of the composition API and the script setup syntax. The Vite tooling was highlighted for its performance improvements and developer experience enhancements. Components auto-importing through Vite plugin components was introduced as a way to improve code splitting and eliminate manual registration. The use of Vite plugins, Unplugin, and Vue 2 support were also discussed. The Talk mentioned that Nuxt 3 will include many of these features.

Available in Español

1. Introduction to New Ways of Vue

Short description:

Hello everyone, glad to be here at Vue London. Today my topic is new ways to Vue, how the new tools and techniques affect the way we Vue and build applications. In Vue three, we introduced a new set of API called a composition API. In composition API, we have only single function called a setup. Lifecycle functions are now providing as hooks, so we can have a better TypeScript support and better composability.

Hello everyone, glad to be here at Vue London. Today my topic is new ways to Vue, how the new tools and techniques affect the way we Vue and build applications. My name is Anthony Fu, and I'm a Vue and Vite co-working member. I'm also a creator of SlideDev, Vueuse, VDesk, and other open source projects. I'm a fanatic open sourcer, currently working at Nuxt Labs. My GitHub handle is antfu, you can also find me on Twitter. Before I start, I want to thank all my sponsors for supporting my work. If you find my work useful, you can also sponsor me at GitHub, it would mean a lot to me.

So let's talk about today's topic, new ways to Vue. So let's talk about the Vue two-way first. Under that, we have Vue single file components. In this component, we have template tag and a script tab. In script tab, we'll need to import the things we want. For example, import Vue from Vue, and then export the default components objects using Vue.extend, and then we'll need to register our components, make things, and then declare data and method. The problem here is that we are having too much Scala folding code for each components, and also the mixings are kind of limited for the extensibilities to reuse our code and also having some problem of TypeScript support.

To solve this, in Vue three, we introduced a new set of API called a composition API. Let's do a quick comparison here. On the left, we have the options API, and on the right, we have the new composition API. As you can see, in options API, we used to have multiple properties for the object. For example, they have method, create, and so on. But in composition API, we have only single function called a setup. Lifecycle functions are now providing as hooks, so you can use it inside of our setup functions. So we have everything inside of the single context. This way, we can have a better TypeScript support. But other than that, most importantly, we can have a better composability. For example, we have a component with the setup functions. If we want to reuse this logic, we can simply copy over it and having it inside of new files and wrapping with the functions. In this case, we call it useDark. So then we can refactor our components to import the useDark functions and reuse it. The components will behave exactly the same as before, but we can now reuse our functions inside of other components and have better organizations of our logic.

2. Script Setup Syntax and Vite Tooling

Short description:

In the new script setup syntax, variables, functions, components inside of the script setup are directly available inside of the components. The V-bind syntax inside the style tag allows for better organization of the template and the style. Vue 3 and Vite bring better performance, developer experience, and new ways to Vue. With the new SQL setup syntax, we no longer need to register components. Components auto-importing through Vite plugin components provides better code splitting and eliminates the need for manual registration.

So let's talk about the script setup syntax. As you can see, even with the new composition API, we are having many scaffolding codes in our components. For example, in this case, the highlight lines are the things we actually care about, but we will need to write the rest in order to have Vue understand this. In the new script setup syntax, we can have them all declare at top level. And variables, functions, components inside of the script setup are directly available inside of the components. This is initially introduced in Vue 3.1 as an experimental feature and now it's stable in Vue 3.2.

The other new feature is the V-bind syntax inside the style tag. In the past, if we want to have dynamic styling components, we will need to first declare some reactivity data inside of the data, and then we kind of bind the data inside of the template. But now with V-bind, we can have the binding inside of our style tag so we can have better organization of the template and the style.

So finally, let's talk about the new default tooling, Vite. So what is Vite? I bet many of you have already heard about that, but in case you don't, let's have a quick introduction. So first, we used to have bundlers like Webpack and Roa. The problem of them are they are usually designed for production build first and need to bundle the entire projects in order to start the dev server. It also involves complex configurations and the hard module replacements get slower as the project grows. So now we have dev servers, for example, Snowpack and Vite. So in dev servers, we are designed specifically for web development. We leverage the browser's native ESM support, and we don't need to bundle the code anymore. The server started immediately, and we only transpiled the modules on demand. In this way, we also have instance hard module replacements and much more possibilities. So what do Vue 3 and Vite bring to us? Not only the better performance and the better developer experience, but also the new ways to Vue. So let's have a look at how we use Vue components. So first, we need to import and name it and then register the components so that we can use it in the template. So the problem here is that it makes our code quite verbose, and the name of each component are repeated at least four times. Not only this slows down our development, but also renaming components becomes quite frustrating. So with the new SQL setup syntax, we no longer need to register the components anymore. But the thing is that the name is still repeated three times. So what if we can make it better? Introduce components auto-importing through Vite plugin components. Since we already know the name of each component, we can actually directly mapping them to use it in the template. So how we did that? We use compile-time components resolving for components on the source slash components directory. The usage looks like the global registrations, but the difference from them is that with the auto-importing, we can provide a better code splitting, and we can no longer need to do the manual registration.

3. Components Auto-importing and Vite Plugin

Short description:

Even more, we can skip the runtime resolving to make the performance even better. Introducing components auto-importing through Vite plugin components. With the auto-importing, we have better code splitting support and no manual registration needed. We can write a simple Vite plugin to replace resolveComponent usage with real component import. Vite's dev server allows for more imagination with the Vite plugin in spec, providing a UI to inspect module transformations. API auto-importing is also possible, making components even more clear.

Even more, we can skip the runtime resolving to make the performance even better. Introducing components auto-importing through Vite plugin components. Since we already know the file names of each component, we can actually make the binding and that's usable directly inside the templates.

As you can see, that's all we need. So how does this work? So first, we use compile-time components resolving for the components on the source slash components directory. The usage looks like the global components, but the difference from them is that with the auto-importing, we have better code splitting support, and also there is no manual registration needed. Even more, with this approach, we can skip the runtime resolving and make the performance even better.

So let's break down to see how the compilation work. If you copy over this code into our online playgrounds, sfc.vuejs.org, you can see it being compiled by the SFC compiler into the following code. Our three-component usage is being compiled into this three statement. The resolveComponents function is an internal helper for Vue to resolve the components from the current component instance. So what we can do in Vite to make the auto-importing working? So we can write a very simple Vite plugin here. So first, we use enforcePorts to ensure the plugin runs after Vue's compilation. And then we use the transform hook to modify the code. In the transform hook, we filter out the files that are not Vue. And finally, we replace all the resolveComponent usage to the real component import. If you are interested in it, you can refer to the Vite documentation for more. And as a result, we remove the usage of resolveComponents and make them directly import. And with that, the auto-importing is working.

The other thing worth mentioning is that since Vite is a dev server, we can have more imagination here. So with the Vite plugin in spec, you can now inspect the relationship between modules and how the module is being transformed for each plugin. This could be really useful for debugging plugins or understand how Vite works internally. So one thing worth mentioning is that since Vite is a dev server, we can have more imagination here. With the Vite plugin in spec, you can now have a UI to inspect the intermediate state of each transformation for each modules and also the relationship between modules. This could be really useful for plugin authors to debug their plugins and also beginners to understand better of how Vite works internally. So get back to auto-importing. Similar to the components auto-importing, we can even make the API auto-importing possible. By scanning the usage of each functions, we can now inject import rate from view when there is not presented. In this way, we can have our components even more clear. Let's do a quick summary of the Vite ecosystem.

4. Vite Plugins, Unplugin, and Vue 2 Support

Short description:

Vite plugin components, auto-import, icons, inspect, pages, Windows CSS, Node, and style imports offer improved developer experience. Unplugin, a universal plugin interface, allows writing plugins for multiple tools and frameworks. Vue 2 is supported with polyfills, Composition API package, and Unplugin vue 2 square setup. Vite plugin Vue 2 and Nuxt Vite bring Vite experience to Nuxt 2 apps. Component registrations can be eliminated, and square setup syntax and Vue Composition API can be used. Starter templates and Vite for web extensions are available. Nuxt 3 will include many of these features.

First we have Vite plugin components for components auto-importing, Vite plugin auto-import for API auto-importing, Vite plugin icons for on-demand icon solutions, Vite plugin inspect to inspect the intermediate state of Vite, Vite plugin pages for Nuxt or Next.js-like file-based routing, Vite plugin Windows CSS which is more like an on-demand tailwind but with much faster compilation and HMR, Vite plugin Node which brings Vite HMR for backend Node.js app, Vite plugin style imports for on-demand components style importing, and much more. You can find more on our official awesome Vite list.

So Vite has inspired many plugins and better ways to improve our developer experience. But that's not limited to Vite. Let's bring them to your existing projects today. Introducing Unplugin which is one of the projects that I'm working on in Nuxt Labs. Unplugin is a universal plugin interface for Webpack, Vite, Rollup, and more. So that you can write once for your plugins and it runs on many major tools and frameworks. So let's take a look at how Unplugin works.

So on the left we have our traditional Vite plugins. To make it as an Unplugin we can simply wrap it with a createUnplugin function and then we can assess the Vite plugins through unplugin.vite, rollup.unplugin.rollup, and webpack.unplugin.webpack. So with that we can actually move many Vite plugins to Unplugins. So we move Vite plugin components to Unplugin view components. Vite components auto import to Unplugin auto import. And during this refactoring we also made it possible for Vue, React, Svelte, Verlina, or any framework you like. And also Vite plugin icons is now Unplugin icons. With that you can take any combination of the following list to whatever you want.

So what about Vue 2? I guess some of you are still stuck on Vue 2 due to the IE support or the code migration process. But don't worry, we have got you covered. For Vue 2 we provide polyfills for the code functionality. For Composition API we provide a vue-composition-api package to bring the Composition API back to your Vue app. For Square setup and refsugar we provide Unplugin vue 2 square setup package. Note this is also an Unplugin, which means it will work on Vue CLI, Nuxt 2, or your custom Webpack setup. For Vite support we have Vite plugin Vue 2 and Nuxt Vite which bring the Vite experience to your Nuxt 2 apps while having the great ecosystem of Nuxt. And for the developer enhancement, the previous mentioned plugins also support Vue 2 out of box. To sum up, this is what you could get today, no matter if you are on Vue 2 or 3, Nuxt 2, Vue CLI, or Vite. You can get rid of the component registrations, you can use the latest square setup syntax and also the Vue Composition API. We also provide some starter templates for you to grab them quickly. Vite is one of the most popular Vite starter templates that provide you the best Vue experience. Vite Nuxt that bring the Vite experience on Nuxt 2. We also have Vite for web extensions. To try it out, you can run the following command in your machine. Finally, a little spoiler that Nuxt 3 will have many of these features mentioned today built in directly that you can use out of box. So that's all for today. Slides can be found on my site antfu.me.

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.