A product's Vue 3 migration: A real life story

1. core

   1 357 49,329 9.8 TypeScript

   🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)

   

   In September 2020, Evan You, creator of the JavaScript library Vue.js, announced the stable release of Vue 3, labelled One Piece. Here at Suade Labs, we watched the announcement live and were very excited about the new features, including performance improvements, the Composition API, and the ability to teleport elements. These new features were exactly what we needed for our imminent projects and the Suade product, so we started getting to work and figuring out how to migrate our application. We could have waited for more dev resources like the Vue 2.6 migration build, but we wanted to start using these new features. So, we created a rough plan and got straight into it! This is how it worked out.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. vue-cli-plugin-vue-next

   2 2 339 0.0 JavaScript

   A Vue CLI plugin for trying out vue-next (experimental)

   

   Finally, our biggest Vue 3 migration issue was the removal of the props sync feature and migrating them to use a v-model prop. Thankfully, we found the Vue Next Plugin which converted code from text.sync=”variable” to v-model:text=”variable”. This did a lot of the heavy lifting, but we also needed to change how components would interact with these props. Previously there was the ability to be able to change them directly, e.g. this.text = “new value”, however we now needed to migrate this to emit an event of change to the parent element. So, we added a new computed property that could handle a set function:

4. rfcs

   3 74 4,906 0.0

   RFCs for substantial changes / feature additions to Vue core (by vuejs)

   

   Another change we did as part of the Vue 3 Migration was migrate our use of /deep/ to ::v-deep() with our CSS. Using these deep selectors allows us to create queries in scoped CSS that target child components and elements. This also wasn’t a simple ‘find and replace’, as v-deep requires an argument of a selector , but /deep/ did not.

Suggest a related project