Install Vue 3 (Vue3) Beta with Vuex and VueRouter easily with vue-cli

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 : use createApp to initiate Vue
• router/index.ts : use createRouter to initiate VueRouter
• store/index.ts : use createStore 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! 🍻

Comments

[richardev]

R.I.P. Vuex.
👋 Pinia.