Usage in component library

[nestarz]

Hello,

I would like to use vue-compositon-api into a component library.

Should I do a Vue.use(VueCompositionApi) inside my library's install function or only the app, or both ?

Currently, I have an error, asking me to install it inside my component library if I don't do it there, but only App wise.

vue.runtime.esm.js?2b0e:1888 Error: [vue-composition-api] must call Vue.use(plugin) before using any function.

A reproductible example:
https://github.com/nestarz/vue-simple-maps/blob/master/demo/client-with-composition-api.html

[nestarz]

For future like-me, and thanks to @pikax, I managed to make it work by removing the composition-api from the build of my component library and set it as external. So like this it's sure there is only one instance of VueCompositionApi no matter of where you installed it (app or lib wise).

You can see here its rollup config: https://github.com/pikax/vue-composable

[adi518]

I'm using Vue cli to build my library, so I set @vue/composition-api as a peer dep and installed it in my exported plugin:

// library export

import VueCompositionApi  from "@vue/composition-api"

const Plugin = {
  install(Vue) {
    Vue.use(VueCompositionApi)
    Object.keys(components).forEach(key => Vue.component(key, components[key]))
  }
}

Why would it create another instance if I import VueCompositionApi once again for dedicated use in the app? I'm a bit unsure about that. It depends on how VueCompositionApi is exported.

That's one way I could get it work. Another way, is your way. I set it as an external package in vue.config.js:

// library vue.config.js

module.exports = {
  chainWebpack: config => {
    config.externals(['@vue/composition-api'])
  }
}

What didn't work

Doing this in the app, without installing VueCompositionApi as part of the plugin, didn't work (Vue.use order doesn't matter of course).

// app main.js

Vue.use(Components)
Vue.use(VueCompositionApi)

[boussadjra]

@adi518 i'm facing the same issue, i created a component and published it to npm but when i install it again in another app it raises the issue when i do Vue.use(VueCompositionApi) in the app test, the code that you suggested where should I put it? here my git repo https://github.com/boussadjra/vue-spring-calendar

[adi518]

You have to set it as a peer dependency in your library, add it your app and install with Vue.use. Then, everything should work just fine. Just like your library won't work without an external Vue, it won't without an external VueCompositionApi.