How to properly setup a npm package using VUE 2 Composition API?

Viewed 401

I have a npm package using components which are calling inject:

<template>
  <div>{{ hub.message }}</div>
</template>
<script>
import { inject } from "@vue/composition-api";
export default {
  name: "test",
  setup() {
    const hub = inject("HUB");

    return { hub };
  },
};
</script>

In lib package.json I have set @vue/composition-api as a dev and peer dependency.

In my main project (not library), I'm registering Composition API and using provide like this:

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

import { hub } from "../lib/hub";
import { provide } from "@vue/composition-api";

Vue.config.productionTip = false;

new Vue({
  setup() {
    provide("HUB", hub);
  },
  render: h => h(App)
}).$mount("#app");

Hub is a simple object:

export const hub = {
  message: null,

  init: function() {
    this.message = "I'm here";
  },
};

But I'm getting Error in data(): "Error: [vue-composition-api] "inject" get called outside of "setup()""

I have also prepared a small demo demonstrating the issue: https://github.com/JiProchazka/composition-api-test

Any ideas?

Thanks

0 Answers
Related