How to use VueCompositionAPI with Vue 3? - node.js

Question

I updated all the packages in my project. And upgrade vue 3.
After the done with updates there is a problem in my code.
I cannot use Vue.use(VueCompositionAPI);
In the old version of the project I call it from import VueCompositionAPI from '#vue/composition-api';
but this package is not compatible with due 3 anymore so I cannot call it.
What shouldd I do?
package.json:
{
"name": "front",
"version": "1.0.0",
"description": "Frontend",
"main": ".eslintrc.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"repository": {
"type": "git",
},
"keywords": [
"fdm"
],
"author": "etc",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.1",
"#jsonforms/core": "^2.5.2",
"#jsonforms/vue": "^2.5.2",
"#jsonforms/vue-vanilla": "^2.5.2",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-e2e-nightwatch": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-pwa": "^5.0.8",
"#vue/cli-plugin-router": "^5.0.8",
"#vue/cli-plugin-unit-mocha": "^5.0.8",
"#vue/cli-plugin-vuex": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/eslint-config-airbnb": "^6.0.0",
"#vue/test-utils": "^2.0.2",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chai": "^4.3.6",
"chromedriver": "^103.0.0",
"core-js": "^3.23.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^9.2.0",
"geckodriver": "^3.0.2",
"json-schema-ref-parser": "^9.0.9",
"jsonpath": "^1.1.1",
"lodash": "^4.17.21",
"node-sass": "^7.0.1",
"npm": "^8.13.2",
"register-service-worker": "^1.7.2",
"sass-loader": "^13.0.2",
"vue": "^3.2.37",
"vue-axios": "^3.4.1",
"vue-bootstrap4-table": "^1.1.11",
"vue-router": "^4.1.1",
"vue-sorted-table": "^1.3.0",
"vue-template-compiler": "^2.7.4",
"vuedraggable": "^2.24.3",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"eslint": "^8.19.0"
}
}
my main.js:
import Vue from 'vue';
import { BootstrapVue } from 'bootstrap-vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import SortedTablePlugin from 'vue-sorted-table';
import {
faSpinner, faSortUp, faSortDown, faSort, faFilter, faCheck, faTimesCircle, faUser, faPause,
faTrash,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(VueCompositionAPI);
// Install BootstrapVue
Vue.use(BootstrapVue);
Vue.use(SortedTablePlugin);
library.add(
faSpinner,
);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

Answer 1

Look, vue 2 is build on the options API.
Vue 3 is build on composition API.
In order to use composition API in your Vue 2 app, you needed the #vue/composition-api package to run it.
What you did is: You upgraded to 3 (wich is by default composition API) and try to use the #vue/composition-api wich is only made for vue 2 in order to use the composition API. But vue 3 is by default composition API. I hope you get me here.
Also, since 2.7 you dont even need this package anymore
Also there is a note:
When you migrate to Vue 3, just replacing #vue/composition-api to vue
and your code should just work.
In vue 2.x you did:
const { ref, reactive } = VueCompositionAPI
In vue 3.x you do:
import { ref, reactive } from "vue"
or:
const { ref, reactive } = Vue;