Install Vue 3 (Vue3) Beta with Vuex and VueRouter easily with vue-cli
Tags: vue, javascript, tutorial, beginners
Published: 2020-04-19 18:42:55

First of all, congratulation to the Vue Core team for the [beta release](https://github.com/vuejs/vue-next/releases)!

![congratulation](https://sayingimages.com/wp-content/uploads/a-man-like-a-gay-congratulations-meme.jpg)

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](https://cli.vuejs.org/) and [vue-cli-plugin-vue-next](https://github.com/vuejs/vue-cli-plugin-vue-next)! I will kindly share what I have done to make it work. :smile:

_Before we started, ensure you have [installed vue-cli](https://cli.vuejs.org/#getting-started)._

## 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.

![select-feature](https://i.ibb.co/LtFp3mJ/Screenshot-from-2020-04-20-01-55-43.png)

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!

:bulb: _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](https://github.com/vuejs/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! :heart_eyes: 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:

![error](https://i.ibb.co/9g6gkdT/Screenshot-from-2020-04-20-02-22-16.png)

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:

```js
import Vue from 'vue';

export default Vue.extend({
 ...
})
```

In Vue3, it has changed to:

```js
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:

![typescript error](https://i.ibb.co/9ndyhC6/Screenshot-from-2020-04-20-02-29-58.png)

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 :wink:

## Codebase

If you want to see the codebase, I have created a repository here:

[https://github.com/chenxeed/vue3-boilerplate](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! :beers: