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
Vue 3
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
Performance Improvements
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.
Composition API
A new way to structure your code that co-exists with the current Options API in which you have your data, methods, computed value scattered in your component. Composition API allows you to share your states and methods between different components and also visually grouping them together. This is better than mixin as you won’t accidentally run into name clashing problem. Also, you can use Composition API in a regular JavaScript file as well as the reactivity system. You can read more about it in Vue 3 and Composition API.
New Features
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.
Vuex 4
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.
Starter Project
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 toChristopher Gower