Anthony Fu Talks About Nuxt, Vite, and Improving the Vue Experience

We spoke with Anthony Fu, a core team member of Vue, Nuxt, and Vite, before the Vue Amsterdam 2022 event. Anthony talked in depth about the efforts to make the lives of developers easier and the code healthier, all while easing the transition from Vue2 to Vue 3.

The satisfaction of the community using tools and leaving positive feedback makes me really happy. People are willing to try [Vite and Vitest] and once they do it, they stick to it. The Vite team feels really proud of these tools.

Anthony Fu Core team member of Vue, Nuxt, and Vite

Anthony also discussed the roadmap of Vue Core and the tools that he helps to maintain.

The interview is part of the free Vue Report Amsterdam 2022, where experts join us to cover the state of Vue, update highlights, technical case studies, and more.

The Story of Improving Developer's Experience With Vue - Interview With Anthony Fu

After the Vue 3 release, we have seen a lot of development in the whole Vue ecosystem - what has changed and how does it influence developers’ experience?

Vue's major change comes down to transitioning from Options API to Composition API. It’s about the capability of Composition API to support TypeScript better and make the app logic possible to easily decouple from components. This way you have a better organization of your code which improves the developer’s experience and project management - it makes code healthier.

What’s more, performance in Vue 3 improved by around 30% compared to Vue 2.

This is the baseline that every app could get. Together with the introduction of Composition API, we introduced the new Script Setup RFC. It enables you to have a cleaner look of your Single File Components so you can focus on the logic instead of writing the scaffolding code in every single component that you have. It reduces time and effort which was used to write the parts you basically copied and pasted like defineComponent. The script setup syntax reduces that a lot.

Also, there are minor features like suspense and async component support. All of those features are something that makes people migrating to Vue 3 feel the real upgrade. These are the things mostly for the Vue itself but it’s not all - there’s also Vite.

Speaking of Vite, what kind of improvements does it bring over existing alternatives?

Vite is framework-agnostic and was originally created for Vue but currently serves more frameworks like React for example. Vite leverages the power of ESM inside the browser. You don’t need to bundle your apps but can ship everything - modules inside your source code directly, with some transpilation to remove the TypeScript notations so that the browser understands the code.

Together with HMR (hot module replacement), it enables a really fast development. I mean really fast - start-up times can decrease tenfold in comparison to other tools, such as webpack.

Let me give you an example, in Vue 2 and Vue CLI you needed to wait one or two seconds for your changes to appear in the app. It doesn’t seem like a lot but in practice, your changes might break the app and you would see it only after some time. Sometimes it can take a lot of time to trace back changes and fix errors. In Vue 3, you can try different combinations during coding and see the effect immediately so you can quickly figure out what’s the best solution. It reduces the feedback loop of your changes and it’s something that makes a huge difference in developers' experience.

Also, having an ecosystem on top of Vite is a huge advantage. In Nuxt 3 we support both Vite and webpack as bundlers and you can switch between them but we made Vite the default bundler so you can get the benefits of the powerfulness that Vite provides. These are fundamental changes to the Vue ecosystem.

How about Vitest? What’s the difference compared to other testing frameworks?

Vitest is a testing framework and its API is pretty similar to Jest which is the most popular testing framework. It was created to solve the issues we experienced in Vite.

Some of Vite users wanted to have a better way of testing their app and had trouble configuring Jest with Vite. It became a barrier for people to migrate to Vite. We tried to find some tools to recommend but we didn’t really find any good options so we decided to utilize Vite itself.

The most important feature of Vitest to me is that it offers everything on demand, unlike previous bundlers like a webpack. If you visit a page, it will only request the modules you use inside of this page and when you request a page, Vite starts to transpile. It only does the work that’s necessary while in webpack, you need to bundle your whole app and wait for your app to start.

By using Vite and Vitest you can use the same configuration and the same plugins. Thanks to that you can have a more consistent environment between the tests and your Vite app.

With the speed of Vite and this live feedback, do you think we might see even more cool integration into things like our IDEs?

We already have VS code extensions and also we have Vitest UI. If you enable flag, it will open up an app server which is also powered by Vite. 

You can view your test files visually, you can click and see what’s going on instead of a huge console log.

Currently I’m experimenting with ideas like running your tests inside your source file, similarly to Rust. Rust has this feature that you can declare a testing block inside your source file. The test file will be later moved away when you compile it into production view. But when you’re on the task, it can share the context of your source files. You can have an internal state that you can test without the need of exporting it outside of your module.

These are the options we want to offer and the approach we support so I would expect more future integrations.

How do you feel about the adoption rate of Vite and Vitest in the Vue community and beyond?

I’m not familiar with the numbers but the adoption is still relatively small in comparison to previous bundlers like webpack since the migration takes time. However, the satisfaction of the community using tools and leaving positive feedback makes me really happy.

People are willing to try it and once they do it, they stick to it. The Vite team feels really proud of these tools.

What do you find the most important aspect of Vue 3 for businesses and when would you recommend transition?

Whether to make a change or not, you need to weigh your pros and cons. Vue 3 is written from scratch, the codebase is completely different and we made some breaking changes. Nuxt 3 also has a brand new codebase. At the time Vue 3 was released, most of the existing UI frameworks are not really compatible between Vue 2 and 3. If you want to make them compatible with Vue 3, there will be quite some work to do.

First, the ecosystem needs time to migrate to Vue 3. If you have a large app, it might not be an easy task and it takes time and carries some risk of breaking your app during migration. Some dependencies might not work and you may need to look for alternatives.

The biggest change between Vue 2 and Vue 3 is IE11. We used a new reactivity system based on Proxy features inside the Javascript which weren’t previously available in IE. That’s the tradeoff we made here in Vue 3. If your app really targets users still using older IE, you might not want to migrate to Vue3 at this moment. On the other hand, Vue 2 is still being supported for 1-2 years down the line. 

If you don’t want to upgrade now, it’s totally fine. However, for the new app, I would totally recommend going with Vue 3 from the beginning.

What is the most burning problem you see Vue Core Team tackling next? What are your plans for the future?

I think we’ve made significant changes during the last one and half years and solved lots of burning problems. We’re already made the transition from Vue 2 to 3 a lot easier.

Thanks to introducing compatible mode you can use Vue 3 as a core with some Vue2-compatible APIs. This compatible mode has a lot of flags that you can toggle and for each breaking change, you can migrate your codebase step by step.

We have a Vue 2 plugin called @vue/composition-api which I maintain. So you don’t need to migrate to Vue3, you can still use the Composition API and get the benefits from it which I think is awesome. What’s more, I made a plugin for Vite and webpack for the new Script setup syntax inside a Vue 2 app. For Nuxt we implemented Nuxt Bridge which brings Nuxt 3 features to Nuxt 2. 

We also had quite a few libraries from the community, for example, VueUse, that can run in both Vue 2 and 3 seamlessly.

Our roadmap for Vue core is almost done. While we also have some interesting experiments in progress like reactivity transform, which you can find in our RFC repo.