Composition-api: Building libraries using @vue/composition-api

[mikimoresi]

If i load component from an external dir using a webpack alias (created in vue.config.js) composition components don't work properly.

I created a repository to test the setup: https://github.com/mikimoresi/vapcompvuex

This are the issues:

1) If I don't use "_import Vue from 'vue'; import VueCompositionApi from "@vue/composition-api"; Vue.use(VueCompositionApi);_" in the components, Vue alerts me that I must use Vue.use before. This not happens if the component is in the same src of the main project.

2) If I use "_import Vue from 'vue'; import VueCompositionApi from "@vue/composition-api"; Vue.use(VueCompositionApi);_" in the components, the components is kinda working but I get "_[Vue warn]: The setup binding property "xxx" is already declared._" for any property

3) If I try to use a lifecycle hooks like _onMount_ i get this error "_Error in data(): "Error: [vue-composition-api] "onMounted" get called outside of "setup()_""

It looks like the problem occur only when I load my components from an external directory via alias. Once I load components from dirs inside main project dir anything starts working properly.

We need components to be in an external dir because we use them in different projects. We prefer to not use them as node modules because is faster while developing. We would love to mantain the webpack alias method if possible.

Thank you.

[posva]

This is one of the caveats of local development of plugins using the composition api: when located in different projects with their own node_modules and both import @vue/composition-api, both projects end up using different versions of the package. Even if you manage to get rid of the warnings, the reactivity itself won't work.

One buggy solution I've used personally is using yarn pack inside of the plugin and then installing it in the project using a file path: yarn add /Users/me/vue-plugin/vue-plugin.tgz. The problems I've hit are related to yarn cache forcing me to sometimes clean the cache with yarn cache clean vue-plugin and even removing the package from the yarn.lock to avoid checksum errors.

Another thing I haven't triedThe solution I personally use is cloning this repository and linking it with yarn link so that every project can use that instance instead of the one located in the node_modules

IMO this is a big issue because it prevents plugin authors to be productive and simply makes it harder to contribute to the Vue ecosystem. Ideas on how to solve this are welcome

[mikimoresi]

Hello Posva, thanks for your reply..
Now I'm trying to use same dir for multiple projects with a shared dir inside of the same project, of course my optimal solution would be to use a simple alias to an external dir, It's way more elegant imho. Proceeding like this I will have multiple run, dev and build scripts for any sub project, this if all scripts will work correctly given that I'm using vapperjs with specific custom scripts, otherwise I will be stuck again...
I will update about this approach

[mikimoresi]

unfortunately no luck with new approach because of using vapperjs :(

https://github.com/shuidi-fed/vapper/issues/52#issue-549487498

[darrenjennings]

running into this issue as well with yarn linking packages.

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

[pikax]

The issue is: the version of composition-api in your library differs from the user importing your library, making webpack linking both libraries, you cannot use two Vue or Vue-composition libraries on your project.

You can change to peer-dependency
you can check a working library

[mikimoresi]

hello @pikax
this works perfectly, must specify that composition api has to be in peer dependencies only in the components library project, the main project must remain the same.
I have updated my public repo https://github.com/mikimoresi/vapcompvuex
Now anything is working properly.
Thank you very much 🥇

[pikax]

@mikimoresi you are welcome! 👍

I recommend having a look on some projects using composition-api 💯

[mikimoresi]

I think I'm quite prepared now about how to set up components with composition API, anyway I think I have a lack of knowledge about package management, I mean, I would not even know where to look and how to figure out when and why using this peerDependency prop. Do you have any hint? Thank you again

[pikax]

I had similar issue, not sure if I checked with other libraries to check how they do it, https://github.com/kefranabg/awesome-vue-composition-api#-composition-api-functions there's a few projects, if something is not working properly might be useful checking them :)

[shenron]

I had the same issue, I developed a library of widgets using this tutorial.

I guess 'peer-dependency' it's not possible because my library can't be build without @vue-composition-api.

---

It's more a quick fix, I hope with Vue 3 the problem will disappear. It's not nice sorry, I really hope a better solution ...

My library exports:

export {
  Plugin, // install all components
  components, // exported components
  plugins,
  compositions,
};

I'm free to export the @vue/composition-api.

import VueCompositionApi from '@vue/composition-api';

export { 
  VueCompositionApi,
};

I can import and use VueCompositionApi from the widget library.

[pikax]

I guess 'peer-dependency' it's not possible because my library can't be build without @vue-composition-api.

@shenron you can set the @vue-composition-api as peer-dependency and dev-dependency, this will allow to build your app, just make sure you remove @vue/composition-api from building, otherwise the bundle size will be quite big

[shenron]

I did not thought to use peer-dependency AND dev-dependency for the same package.
Thank you.

[YuqiaoS]

Well I'll add here that importing and using the plugin in the main.js doesn't work as you still get the "must use plugin.." error. But if you do the import from another file that does the importing and using plugin, it seems to work.

[DarkLite1]

I ran into this issue too. We were trying to access an exported composition function within the router/index.ts file. But the problem was, just as you guys experienced, that the following error was thrown:

Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function

For anyone else running into this you can find the solution on StackOverflow.