Lessons from Upgrading to Vue 3

We’ve been doing a lot of work with Vue 3 this week, including getting started on migrating our existing Vue 2 tutorials to Vue 3. The migration has been fairly painless: Vue 3 is largely the same old Vue we know and love, with a few cosmetic changes and some new features.

I think we’re all thankful that Vue didn’t pull an Angular. In 2015, Angular announced Angular 2, which had absolutely nothing in common with Angular 1 except the name. Vue 3 introduces a lot of interesting new features, but existing Vue patterns still work.

Unsurprisingly, the first thing that we saw after upgrading to Vue 3 was an error message: “TypeError: Vue is not a constructor”. In Vue 2, everything was a Vue instance, and you could `$mount()` a Vue instance to the DOM.

In Vue 3, the concepts of apps, components, and Vue instances are more cleanly separated. Instead of starting your app with `new Vue()`, you need to use `Vue.createApp()`.

As a consequence, `$mount()` is now just `mount()`. That’s because, since apps are now separate from Vue instances, we don’t have to worry about prefacing `$mount()` to avoid conflicts with data properties named `mount`.

The Composition API is Vue’s much-debated new feature that looks vaguely like React hooks if you squint enough. The Composition API makes it possible to define a non-trivial Vue component with just the `setup()` function, no Vue constructor options required.

Composition API patterns are pretty advanced, and entirely optional. The Composition API can be great for DRY-ing up large apps. In particular, we’re pretty excited about provide/inject, which gives you a neat way to avoid prop drilling without having to use Vuex and Vuex getters.

Vue 3’s reactivity API is extremely cool. With 2 lines of code, you can register a watcher that Vue calls whenever a property on a given object changes, without any components or UI-specific logic.

This is exciting because, combined with the `setup()` function, you can break up your state while retaining change tracking. No need to always pass the entire Vue object whenever you want an outside function to make changes that sync to the UI automatically.