composition-api: Cannot import Vue Plugin using Composition API in my project

A project and a plugin. The plugin contains Composition API functions that I want to consume in my project. My project is using Composition API already.

But, I can’t figure out a way to import plugin in my project successfully. What I present below is the closest I’ve gotten. The script seems to work (?), but it’s throwing warnings such as this; [Vue warn]: The setup binding property "multiTree" is already declared.

index.js (in project)

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

import { VJstree } from 'vue-jstree-extended'

Vue.use(VJstree,{});

import App from './App.vue'
new Vue({
    el: '#app',
    render: h => h(App)
})

index.js (in plugin)

import VJstree from './tree.vue'
import useMultiTree from "./useMultiTree";
import useTreeActions from "./useTreeActions";
import VueCompositionApi from '@vue/composition-api'; // <---- get rid of this line

VJstree.install = function(Vue,options = {}){
  Vue.use(VueCompositionApi); // <---- get rid of this line
  Vue.component(VJstree.name, VJstree);
};

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(VJstree);
}

export { VJstree, useMultiTree, useTreeActions }

If I remove Vue.use(VueCompositionApi); from plugin, I will get this error in my project: Error in data(): "Error: [vue-composition-api] must call Vue.use(plugin) before using any function."

This doesn’t make sense to me. I already called Vue.use(VueCompositionApi) in my project. The line shouldn’t be required inside of plugin. Right?

Please note that the plugin is located in another folder, and I’m including it like this: "vue-jstree-extended": "file:../jstree-extended-warz/vue-jstree"

(I’ve also attempted using npm link, makes no difference)

I’ve read similar issues: #228 #340 #356 #181 which led me to discover peerDependencies, I’ve set up Composition API as a peerDependency in plugin.

I’ve also attempted to import both Vue and Composition API in the plugin, this results in the following error in project while performing actions in the tree: vue.esm.js:629 [Vue warn]: You may have an infinite update loop in a component render function.

So the question is really, how can I get rid of Vue.use(VueCompositionApi) from my plugin?

Any ideas?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 21 (8 by maintainers)

Most upvoted comments

Like this ? *

  module.exports.externals = {
      '@vue/composition-api': 'commonjs2 @vue/composition-api'
  }

Doing that put me back at this point:

vue.runtime.esm.js:620 [Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

found in

---> <App> at src/App.vue
       <Root>

in your vue.config.js you can refer to my repo: https://github.com/ymchun/vue-dynamic-form

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

ymchun on Jul 11, 2020

I tried setting resolve alias in the project webpack to force it to use the one in my project:

@Warz FWIW your alias resolve fixed it for me. my vue.config is is in the same dir as my node_modules btw

- '@vue/composition-api': path.resolve(path.join(__dirname, '../node_modules/@vue/composition-api/'))
+ '@vue/composition-api': path.resolve(path.join(__dirname, './node_modules/@vue/composition-api/'))

darrenjennings on Jun 22, 2020

@Warz you are packing @vue/composition-api into your plugin - which you shouldn’t. Closing for now. Thanks

antfu on Jul 10, 2020