On the road again

What’s next for Vue.js? The road to Vue 3.0

Jane Elizabeth
© Shutterstock / Sura Nualpradid

Can you believe it’s been two years since Vue 2.0 was released? Neither can we. And yet, the JavaScript ecosystem continues to evolve. So, today we’re taking a look at the recently released roadmap for the upcoming Vue 3.0.

Big news out of the Vue.js universe last week: 3.0 is coming! So, what changes can we look forward to for this popular framework?

First off, Vue.js 3.0 is still just a prototype. This list is not set in stone; things can change between now and when it releases. However, Evan You already pointed out some major landmarks that are either planned or confirmed as feasible.

The road ahead

Although we have a nice list of things we want (see below!), there’s not a hard and fast timeline. Here’s how it should go:

  1. Internal feedback for the runtime prototype. We’re here now! Right now, everyone is making sure that the runtime prototype actually, you know, runs. This step is all about looking at the internal changes and making sure all the libraries are good to go for 3.0.
  2. Public feedback on breaking changes. Don’t like something? Say something! This is when your voices are most influential.
  3. Compatible features for 2.x and 2.x-next. Gotta make sure everything is backwards compatible! The last minor release in 2.x will become the LTS release; it’ll get bug and security fixes for 18 months after 3.0 arrives.
  4. Alpha phase. Alpha releases show up here. This is mostly for stability testing in small greenfield apps.
  5. Beta phase. Time to update all the supporting libraries and tools to make sure everything actually works together. Community help is wanted here to make sure all the libraries are ready for 3.0.
  6. RC phase. No more new APIs at this point. This phase also includes a “compat build” of 3.0 with backwards compatibility for 2.x APIs.
  7. IE11 build. This is the last step before general availability! Got to get the IE11 compatibility build in.
  8. Final release! No date is set, but this should happen sometime in 2019. Of course, a solid and stable release is more important than making sure it happens next year.

SEE ALSO: Create your first app with Vue.js

What’s in store for Vue.js

High level API changes

Okay, yeah, this isn’t a surprise. All upgrades have API changes and breaking changes. However, everything except render function API and scoped-slots syntax will either remain the same or can be made compatible with a 2.x version thanks to a compatibility build.

  • Template syntax is mostly staying the same. There might be some changes to scoped slots syntax, but it’s nothing major.
  • 0 is going to support class-based components natively. Developers should be able to enjoy using this API with native ES2015.
  • Additional TypeScript support.
  • The 2.x object-based component format is still supported.
  • Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function.

Service code architecture

It’s time for a complete makeover: the architecture for 3.0 is being re-written from the ground up for a cleaner, more maintainable look. In particular, the goal is to make it easier for developers to contribute to Vue.js.

Some internal functionalities are being broken into individual packages to isolate the scope of complexity. So, from now own, the observer module is going to be its own package, with its own API and tests. However, this doesn’t affect the framework-level API.

Additionally, the codebase is now written in TypeScript. Any new developers who want to contribute do need to know TypeScript, the type information and IDE support should make it easier to make meaningful contributions.

Since functionalities like the observer and scheduler will be decoupled into separate packages, it should be easier to experiment with alternative implementations.

SEE ALSO: Vue.js vs React poll results: Vue.js ready to slay its competition

Observation mechanism

3.0 should ship with a Proxy-based observer implementation for reactivity tracking with full language coverage. Developers can avoid a number of 2.0 pitfalls while getting more complete, precise, efficient, and debuggable reactivity tracking.

The new observer also includes an exposed API for creating observables, lazy observation by default, more precise change notification, better debugging capabilities, and immutable observables.

Other runtime improvements

In general, the new codebase is smaller and designed to be tree-shaking friendly. The constant baseline size for the new runtime is <10kb gzipped.

3.0 is also faster! Preliminary benchmarks are showing up to 100% performance improvement across the board. This new release should cut your app’s booting time in half.

This release comes with built-in support for Fragments and Portals. There’s also an improved slots mechanism, giving developers precise change detection at the component tree level. This should help with less useless re-renders in the future.

Vue.js 3.0 also comes with a Custom Renderer API. This creates custom renderers and makes it easier for render-to-native projects like Weex and NativeScript Vue to stay up to date.

SEE ALSO: Spotlight on Vue: Why this framework is gaining fans

On the wishlist

Okay, this is already a lot of changes. However, the following changes are theoretically possible, but haven’t been extensively tested.

Compiler improvements include things like a more friendly output for tree-shaking, more AOT optimizations, a parser with better error info, and source map support.

IE11 support is definitely planned, but it will be in a separate build with the same reactivity limitations of Vue 2.x.

Looking for more information about the road ahead? Check out the timeline to Vue.js 3.0 here!


Jane Elizabeth
Jane Elizabeth is an assistant editor for

1 Comment
Inline Feedbacks
View all comments
Federico Kereki
Federico Kereki
3 years ago

If the performance improvement were 100%, then load time would be zero. If load time is half of what it was, performance improvement was 50%. This is a common misunderstanding.