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
TL;DR
- 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)