vuejs / composition-api

Composition API plugin for Vue 2
https://composition-api.vuejs.org/
MIT License
4.19k stars 342 forks source link

How to migrate from Vue2 to Vue3 migration build, when having this package installed? #901

Closed Sjoerd82 closed 2 years ago

Sjoerd82 commented 2 years ago

I have just added this package to my Vue2 project to start using the composition API, while waiting for dependent packages to become available for Vue3 (looking at you, Vuetify...). I am at this point not entirely sure how to do the migration to the Vue3 migration build, once all my dependencies are ready, in relation to having this package installed.

When moving to the Vue3 migration build, do I simply uninstall this package? Are there any caveats? Will any code adjustments be needed?

Related: #513

IvanBernatovic commented 2 years ago

Well, if you installed this plugin that means you're planning to use composition API. WIth composition API you now work with Vue components a bit differently, you're not declaring methods, computed properties, data etc. Instead, you import ref, reactive, computed, onMounted, inject etc. from this package and use it in Vue composition API components inside of the setup function.

For instance, if you use this plugin you will import mentioned methods like this:

import { ref, reactive } from '@vue/composition-api'

When your app and dependencies are ready for Vue 3 you will bump your Vue to version 3 in package.json, remove references to this plugin by removing Vue.use(VueCompositionAPI) and rename all of your composition-api imports, e.g.:

import { ref, reactive } from 'vue'

Of course, you will also have to update all of the Vue dependencies to versions that support Vue 3. That's almost never easy and it could take some time, especially if you use a lot of plugins and have a big project. But that's out of the scope of your question.

Sjoerd82 commented 2 years ago

I indeed will migrate to Vue3 and am aware of the differences. My main uncertainty was that this vuejs/composition-api may not be a drop-in replacement for the one in Vue3. But you clarified that it is. Great, thanks. (have already been using it since posting this question and notice that it pretty much behaves similar to what the Vue3 docs tell us.)