Estoy tratando de crear una biblioteca de componentes comunes para dos aplicaciones Vue, lo que permite que las aplicaciones definan su propio Vue.prototype.$someGlobal (específicamente, una instancia de Axios). Estoy tratando de usar este global de la biblioteca de componentes compartidos, para que cada aplicación pueda tener su propia configuración de Axios y hacer que el componente compartido use el que se use.

Sin embargo, aunque no tengo problemas para acceder a this.$someGlobal desde los componentes del paquete principal, si hago referencia a él en el paquete común, no estará undefined .

Código:

 # main.ts import Vue from 'vue' import App from './App.vue' Vue.prototype.$someGlobal = 'some global'; new Vue({ render: h => h(App), }).$mount('#app')

 # app/App.vue <template> <div id="app"> App <some-component /> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import SomeComponent from "common-components/SomeComponent.vue" @Component({ components: {SomeComponent} }) export default class App extends Vue { mounted() { console.log("this.$someGlobal in App:", this.$someGlobal) } } </script>

 # common/SomeComponent.vue <template> <span>some component</span> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class SomeComponent extends Vue { mounted() { console.log("this.$someGlobal in SomeComponent:", this.$someGlobal) } } </script>

Salida de la consola al abrir esta aplicación:

 this.$someGlobal in SomeComponent: undefined this.$someGlobal in App: some global

Repositorio de demostración: https://github.com/timraasveld/vue-prototype-with-common-package-demo

¿Alguien puede explicar por qué this.$someGlobal está definido en componentes en el paquete principal /app , pero no en el paquete de dependencia /common ? ¿Y cómo debo compartir correctamente un Vue global entre la aplicación y la biblioteca de componentes?

Ya intenté hacer una mezcla, pero enfrenté el mismo problema.