This unique plugin, currently only includes a single component (coded in TypeScript):
import _Vue, { PluginObject } from "Vue";
import MyComponent from "./MyComponent.vue";
const VuePlugin: PluginObject<void> = {
install(Vue: typeof _Vue): void {
Vue.component(MyComponent.name, MyComponent);
console.log("---");
}
};
export default VuePlugin;
I anticipate that MyComponent will have global visibility thanks to
Vue.component(MyComponent.name, MyComponent);Instructions for usage:
import Vue from "vue";
import MyPlugin from "my-plugin/VuePlugin";
import RootComponent from "@SourceFiles:StaticView/RootComponent.vue";
(function executeApplication(): void {
Vue.use(MyPlugin);
new Vue({
el: "#Application",
template: "<RootComponent />",
components: { RootComponent }
});
})();
<template lang="pug">
MyComponent
div OK
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class RootComponent extends Vue {}
</script>
The code up until console.log("---"); (within the plugin code) ran smoothly without any issues.
However, afterwards, a Vue error was triggered:
Unknown custom element: <DevelopmentBuildAnywherePageVue> - did you register
the component correctly? For recursive components, make sure to provide the "name" option.
What did I overlook?