Vue 3 Migration

Posted on  by admin

Configurations

I recently converted a second app from Vue 2 to Vue 3, added TypeScript, and swapped from options api to composition api. Here are my notes from the experience.

My 3 main target areas for this migration were:. JavaScript to TypeScript. Options API to Composition API.

The Workflow

Almost every resource I used was from the official docs for Vue, the Vue CLI, the Vue Router, and Vuex. Some of these docs have sections in migrating, adding (like vue add typescript), or upgrading. All of these have docs.

Some have migration guides, some do not. Some of the migration guides tell you the differences, but don't do it from an existing app. The steps I followed may not be the most optimal path.

I would be shocked if they were. Your mileage may vary (YMMV). After digging through the docs and the Vue CLI API (to check out the add/migration commands) this is where I landed.

Hopefully by sharing the steps I went through they will be helpful to some of y'all. If you want to host your Vue app in the cloud, I recommend trying Azure Static Web Apps.

Uninstalling the migration build

If you don't care why I went down this road, you can scroll past this "Why" section. I find it valuable to understand why I should consider doing something before I invest time into doing it.

Thus, I'll explain a bit of my reasons why I chose to migrate for each of these three target areas. The migration to Vue 3 is to keep up to date with Vue.

I find it important stay current with major version changes of web frameworks sooner rather than later. Often the tooling supports older versions for a while, but as the ecosystem evolves, the latest versions get the love and as with most software, the older versions start to lag.

Also, keeping up with the latest version offers a lot value in the core framework improvements. One feature I won't miss is mixins, which I rarely used.

I find the hooks concept or simply importing other modules of code to be much easier to follow, reuse, and maintain.

One of the most exciting to me is that Vue 3 is written with TypeScript and in my experience this helps the stability of the platform and provides much better development and tooling help.

New Framework-level Recommendations #

I've converted a lot of apps to TypeScript over the years. I've also started a lot of apps with TypeScript from scratch. Adding types to the development flow almost always reveals bugs in my code that were previously undetected in my JavaScript code.

I do not follow the school of "type the heck out of everything though". This is a road that, IMO in a web app, can lead to hours of time with little to no reward.

Migration

I do add types. I do avoid any. But there are times to weigh the value. There is nothing wrong with the Options API. In fact, it is arguably one of the biggest reasons why Vue has been so approachable and easy to learn.

  • That all said, I do find that spreading code out across my components does make it harder to read my own code vs keeping similar logic together.
  • It took a lot of work to get the code converted to the Composition API.
  • The notes below are indeed notes. They are not every single step I took. I will explain how I thought through these steps and which ones worked well for me and which ones I struggled through.

The Vue CLI has a command to upgrade to TypeScript. Running this command modified these files:.

| app.vue | This entire component was overwritten. I ended up with a reference to a HelloWorld component (which also was added).

Fixing the errors

My app obviously doesn't need that so this was code to remove. It also added some CSS and template code that I had to remove. I had to manually revert the changes, and apply the ones that were needed for TypeScript.

Biggest changes on Vue 3

The key here was to revert the changes with git and apply the