Getting Started with Vue 3
With Vue 3 beta is out, its final release is just around the corner. If you are as excited as I am and want to try it out yourself, I have a Starter Project that may help. I did try to upgrade Article to Vue 3 and failed miserably as there were many loaders that needed to be upgraded as well to use the new Vue compiler.
What does it include
This should go without saying 😂. Vue 3 has lots of improvements over Vue 2 and also introduces many APIs that can enhance developer’s experience. Vue 3
The team has done tremendous work on improving Vue performance including optimizing the file size by tree shaking unused modules, better virtual DOM implementation, more efficient component initialization.
Teleport, previously known as Portal, allows you to render your children in a DOM node that exists outside of the hierarchy. Suspense allows you to wait for async components and allows you to fetch data while rendering the components instead of waterfall situation in which you wait for the components to render then you send your fetch call.
Better TypeScript support
Vue 3 has been written in TypeScript and there are typings for almost every single feature. This also creates a better developer experience when coding as your IDE of choice can provide better insight and Intellisense information, including your template.
The team has just finished upgrading it to Vue 3 and the APIs stay the same. However there are plans to introduce new APIs so there may be breaking changes later on as we near the final release.
Vue Router 3
The codebase has been upgraded to use Vue 3 and most of the existing functions are usable.
You can clone and take a look at the Starter Project I’ve created on GitHub. This includes how you can probably set up your webpack configurations, how to initialize your Vue app, and showcase how a counter example can be done in both Vuex and Composition API. Send a tweet if you have any questions or even open a PR if you’d like.
Cover photo credit goes to Christopher Gower