The new Vue in 2022

Software and web technologies change fast. I always take a new project as a chance to scan the market for available options. My love to Vue goes deep, we just had the right chemistry from the first line of code. I would like to take Evan You's presentation from the latest Vue Conf as opportunity to take notes "how to start a new project with Vue in 2022".

New build toolchain: Vite.

  • Native ES-Modules and esbuild
  • scalable Hot Module Replacement
  • Easy config (vs. webpack)
  • Support Vue 2 and Vue 3
  • new default toolchain

New VSCode Extension: Volar.

  • First class TypeScript support in Vue Single File components
  • TSX supports (typechecking, props mismatch, nice notifications)

New compiler: vue-tsc.

  • Checks Vue SFCs and TS files together
  • Can generate type definitions (.d.ts)
  • Checks TS and builds in one go.

New state management: pinia.

vue-x is no longer necessary. For simple stuff, just use a reactive() object.

  • Designed on ideas of Vuex-next
  • lighter & simpler
  • typesafe
  • devtools integration
  • code-splitting friendly
  • SSR support

New devtools extension: Vue devtools 6.0

  • compatible to Vue 2 & 3
  • inplace editing
  • unified timeline (like performance tab in chrome)
  • plugins for libraries supported (i.e. pinia)

Honorable mentions

  • New composition api: DX: greatly reduced boilerplate
  • Ref transform: foo.value ++; becomes foo ++; (init becomes let foo = $ref(0) instead of let count = ref(0);)
  • New website: enables to switch between option API and composition API


  • Create a new project with create-vue (or npm init vue@next, instead of vue-cli)
  • IDE extension volar (instead of Vetur)
  • State management pinia (instead of VueX)