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