Vue v3 compatibility

[fedyfausto]

Hello i am new of this framework and i want use it on my new Vue 3 application, is it compatible? I just tried to install and use it importing all components but the application does not run

[guyromb]

It is not very difficult. You will have to make some adjustment in the code in order to make it work:
https://dev.to/blacksonic/the-vue-3-upgrade-guide-4dc4

Also, make sure all the vue dependencies were updated to vue3 as well (e.g. npm install vue@next vuex@next vue-router@next @vue/compiler-sfc etc.)

Good luck!

[bnanchen]

Hi @guyromb, I'm trying to import CoreUI in Vue 3 using TypeScript:

import { createApp } from 'vue';
import CoreuiVue from '@coreui/vue';
import App from './App.vue';

createApp(App)
  .use(CoreuiVue)
  .mount('#app');

However, I get this error:

TS2345: Argument of type ‘CoreuiVuePlugin’ is not assignable to parameter of type ‘Plugin_2’.
Type ‘CoreuiVuePlugin’ is not assignable to type ‘{ install: PluginInstallFunction; }’.
Types of property ‘install’ are incompatible.
Type ‘PluginFunction’ is not assignable to type ‘PluginInstallFunction’.
Types of parameters ‘Vue’ and ‘app’ are incompatible.
Type ‘App’ is missing the following properties from type ‘VueConstructor’: extend, nextTick, set, delete, and 3 more.
4 |
5 | createApp(App)

6 | .use(CoreuiVue)
| ^^^^^^^^^
7 | .mount(’#app’);
8 |

How do I properly import CoreUI to Vue 3?

[baradhili]

@bnanchen check your vue versions.. that should work in vue v3.. but would fail in vue v2

[bnanchen]

Hi @baradhili, thanks for your answer. Here is the list of my dependencies:

    "@coreui/coreui": "^3.4.0",
    "@coreui/vue": "^3.2.7",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"

It seems that I'm working with Vue 3, right?

[baradhili]

here is mine

import { createApp } from 'vue'
import App from './App.vue'
import CoreuiVue from '@coreui/vue'
const app = createApp(App)
app.use(CoreuiVue)
app.mount('#app')

and my package.json snippet

"dependencies": {
"@coreui/coreui": "^3.4.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue": "^3.2.7",
"@coreui/vue-chartjs": "^1.0.6",
"vue": "^3.0.5",
"vue-router": "^4.0.3",
"vuex": "^4.0.0-rc.2"
},

[bnanchen]

I've tried with your set up but I still get the same issue.

I think the issue results from my use of Vue with TypeScript. I guess you're using Vue with JavaScript @baradhili ?

[baradhili]

yes I'm running in JS.. but be warned, coreui vue libraries don't seem to play well with vue v3 - I'm ending up forking them and working around the issues.
Keep in mind the bits you probably want are the icons and the styles so its not too hard to pull that out

[bnanchen]

I see. I guess I'll wait on a stable release from CoreUI for Vue 3. Thank you for your time and help @baradhili

[mrholek]

We're going to release the version for Vue 3 at the end of next month.

[baradhili]

awesome :)

[kaelon141]

Any news on about when the official v3 version is going to be released? it's the last hurdle i need to overcome to upgrade to Vue 3 :)

[baradhili]

@mrholek Do we have a firmer date for the Vue 3 release?

[mauroIstat]

I am also keen to start working on Vue 3, any official release date?

[baradhili]

bump?