First of all, congratulation to the Vue Core team for the beta release!
With this opportunity, it's a good chance if you want to try out the new Vue3 with all the improvement and changes it offer. To add more spark of joy, the core library such as Vuex and VueRouter is ready to rock as well for the beta release!
This process has been made very smoothly thanks to vue-cli and vue-cli-plugin-vue-next! I will kindly share what I have done to make it work. 😄
Before we started, ensure you have installed vue-cli.
Create new project
Run the vue-cli
script to create a new project:
vue create vue3-project
If you want to add vuex
and vue-router
as well, choose "Manually select features" and select the "Router" and "Vuex" as well, along with other feature you need.
Take your time to enjoy the moment while the installation is in process. Once it's done, go to your project directory:
cd vue3-project/
Now you have your Vue project installed! At this moment, it might still using Vue with version 2.x. You can make sure by checking the package.json
file and find the vue
dependency to see the version it installed. To ensure your current project is installed successfully, you can try to start the development server. By default it will be:
npm run serve
Or, if you have installed yarn
, then you can run:
yarn serve
All right, we're good with the basic installation! Now, let's move with the real deal to upgrade to the Vue3!
💡 tips: if you're using git, you can commit your current files now, so you can see the changes later after the upgrade to vue 3
Add vue-next
Thanks to the Vue Core Team for preparing vue-cli-plugin-vue-next, we can simply run this script to upgrade to the beta release:
vue add vue-next
Once the installation is done, you can check the package.json
to see if the vue
dependency has upgraded to the beta version. Magic! 😍 If you have added vuex
and vue-router
, notice their version also gets upgraded.
Along with the dependency changes, some files also changed to accommodate the new functions of Vue3, such as:
-
main.ts
: usecreateApp
to initiate Vue -
router/index.ts
: usecreateRouter
to initiate VueRouter -
store/index.ts
: usecreateStore
to initiate Vuex Store
With this, the automated upgrade is now completed! Try to run the development server again to see if it works for you:
npm run serve
# or, if you use yarn:
yarn serve
Troubleshooting
Here are some issues I found on running the application.
App is not running
If you run the localhost in your browser and nothing pops out, check the devtools and you might see this error:
This error is raised from the component HelloWorld.vue
, because the method to create a new component object in Vue3 is different. If previously in Vue2 we create a component object in this way:
import Vue from 'vue';
export default Vue.extend({
...
})
In Vue3, it has changed to:
import { defineComponent } from 'vue';
export default defineComponent({
...
})
Try to modify the script in HelloWorld.vue
and see if it works!
Typescript Errors on compilation
If you enable Typescript in the project, you might see a lot of errors coming out from the compilation, for example:
These errors coming mostly from the library itself such as vuex
, vue-router
or vue-test-utils
. By right you should still able to run the web application without any issue. In that case, you can ignore the errors for now.
The developers are still working to fix it in the next release. If you're up to the challenge, you can check on their repository and help to solve the issue as well 😉
Codebase
If you want to see the codebase, I have created a repository here:
https://github.com/chenxeed/vue3-boilerplate
Feel free to fork or clone it!
Summary
The new Vue 3 release is very exciting for the Vue developers, and it has been great that they have provided the plugin to simplify the installation! There might be few errors or bugs coming out, and knowing that it's not the stable release, they need your help as well to report the issue or open a Pull Request to solve it.
I hope this article is helpful for you to try out the new Vue3, and please leave your comment for any feedback if anything is not clear in the documentation above. Cheers! 🍻
Top comments (1)
R.I.P. Vuex.
👋 Pinia.