How to upgrade to Vue-cli 3?

Revisiting my own project based on Vue-cli 2 which was bootsrapped using webpack template. So after short reading about new features in version 3 I decided it is time to upgrade because finally we can alternate webpack configuration/behaviour using vue.config.js and cli ui and many other features you can find at https://cli.vuejs.org/.

I have standard project layout and it was pretty straightforward, so the standard project structure looks like

And inside src it looks like

My plan was just to

1. Generate a new project,
2. Copy and paste src directory,
3. Copy dependencies,
4. Hope it works.

So I did and the first exception was about @ alias, adding vue.config.js with webpack alias resolver was solution

Then suddenly library called toposort failing with Error: Cyclic dependency error, looking up in issues of vue-cli I found people had the same problem

Updating configuration with suggested solution worked out well

So to my impression upgrade was easier than initially expected. I also tried just upgrading existing project but it ended up being hard to follow so my decision was just to generate a new project with desired features and then move over to it.

Once migration was finished the side by side comparison showed how things changes and how project was tidied up

Old project on the left the new one on the right.

If more issues to come then this post will be updated with found solutions. Until then upgrade was more or less smooth and only minor problems surfaced.

Thanks.