1 of 25

State of Vue

ThisDot Online Meetup

Apr 16th, 2020

2 of 25

Vue 3 core status: beta ready

3 of 25

What this means:

  • All planned RFCs merged & implemented
  • Focus is now on stability and library integrations

4 of 25

Highlights:

  • Performance
  • Tree-shaking support
  • Composition API
  • Fragment, Teleport, Suspense
  • Better TypeScript support
  • Custom Renderer API

5 of 25

Performance

  • Rewritten virtual dom implementation
  • Compiler-informed fast paths
  • More efficient component initialization
  • 1.3~2x better update performance*
  • 2~3x faster SSR*

​

*based on benchmarks that simulates typical scenarios, may vary based on actual application

6 of 25

7 of 25

Tree-shaking

  • Most optional features (e.g. v-model, <transition>) are now tree-shakable
  • Bare-bone HelloWorld size: 13.5kb
    • 11.75kb with only Composition API support
  • All runtime features included: 22.5kb
    • More features but still lighter than Vue 2

8 of 25

Composition API

  • Usable alongside existing Options API
  • Flexible logic composition and reuse
  • Reactivity module can be used as a standalone library

9 of 25

Fragments

  • No longer limited to a single root node in templates
  • Manual render functions can simply return Arrays
  • “Just works”

10 of 25

<Teleport>

  • Previously known as <Portal>
  • More details to be shared by @Linusborg

11 of 25

<Suspense>

  • Wait on nested async dependencies in a nested tree
  • Works with async setup()
  • Works with Async Components

12 of 25

Better TypeScript Support

  • Codebase written in TS w/ auto-generated type definitions
  • API is the same in JS and TS
    • In fact, code will also be largely the same
  • TSX support
  • Class component is still supported (vue-class-component@next is currently in alpha)

13 of 25

Explorative Type Checking in SFC Templates by @znck

14 of 25

Custom Renderer API

  • NativeScript Vue integration underway by @rigor789
  • Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)

15 of 25

What’s Left?

  • Docs & Migration Tools / Guides
  • Router
  • Vuex
  • CLI
  • DevTools
  • IE11 Compatibility build

16 of 25

Docs & Migration Guides

  • New Docs under heavy work by @NataliaTepluhina, @sdras, @bencodezen & @phanan
  • @sdras starting to work on Migration Guide
  • @sodatea has started working on CodeMods

17 of 25

Router

  • vue-router@next is currently in alpha, thanks to work by @posva

18 of 25

Vuex

  • vuex@next (same API but with Vue 3 compat) currently in alpha, thanks to work by @KiaKing
  • Team is experimenting with Vuex API simplification for the next iteration

19 of 25

CLI

  • Experimental Support via vue-cli-plugin-vue-next by @sodatea
  • (wip) CodeMods support for upgrading Vue 2 applications

20 of 25

vue-test-utils

  • test-utils@next being worked on by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

21 of 25

DevTools

  • Early prototype already working by @Akryum, full integration will be worked on as we reach beta

22 of 25

IDE Support (Vetur)

  • @znck currently experimenting with Type checking for templates
  • @octref will be working on Vetur integration for Vue 3 in May

23 of 25

Btw…

​

Nuxt team is working on Vue 3 integration and already has working prototype.

24 of 25

What About 2.x?

  • There will be one last minor release (2.7)
  • Backporting compatible improvements from 3.0
  • Deprecation warnings for features removed in 3.0
  • LTS for 18 months

25 of 25

Thank you!