[Vuejs]-Vue plugin doesn't work when directly imported in Components

by

-2👍

Here is a sample code to register globally components.

There is something tricky, probably the global component registration before the first Vue instance.

main.js

import Vue from "vue";
import App from "./App";
import my_plugin from "./my-plugin";

Vue.use(my_plugin);
new Vue({
    el: "#app",
    render: h => h(App),
});

my-plugin.js

import MyComp from "./MyComp";

export default {
    install(VueInstance) {
        VueInstance.component("MyComp", MyComp);
    }
}

MyComp.vue

<template>
    <div>{{this.message}}
        <my-comp v-if="this.index>0" :index="this.index-1" :message="message">
        </my-comp>
    </div>
</template>
<script>
    export default {
        name: "MyComp",
        props:['index','message'],
        components: {},
        data: function () {
            return {}
        }
    }
</script>

App.vue: with no import of my-comp

<template>
    <div>
        <MyComp index="4" message="static"></MyComp>
        <component :is="'my-comp'" index="4" message="dynamic"/>
    </div>
</template>
<script>
    export default {
        name: "App",
        components: {},
        data: function () {
            return {}
        }
    }
</script>

Leave a comment