can't import vue component from npm package

Question

Good day,

I have recently created an npm package for a navigation-bar which I want to import into my main codebase. I am using vue @components and I can't quite find out how to use the imported component. If anyone knows how to get the npm packaged component into the dom, your help would be greatly appreciated.

Below is a simplified example of what I have tried:

npm package 

    import Vue from 'vue';
    import Component from 'vue-class-component';
    import '../navigation-bar.styles.less';
    @Component({template: require('../navigation-bar.html')}})
    export class NavigationBar extends Vue {
       constructor() {
        super();
                  }
    }
    Vue.component('navigation-bar', NavigationBar);

main.ts

    import { NavigationBar } from '@international-client/navigation-bar';
    Vue.component('navigation-bar', NavigationBar);

index.html
    <html>
        <head>
            <title>Game</title>
        </head>
        <navigation-bar></navigation-bar>
        <body class="game-view">
        </body>
    </html>

what is the error? where do you init vue? what element is it attached to? — Frnak
There is no error, the navigation bar component displays as <navigation-bar></navigation-bar>. the navigation-bar.html is below: <div class="navigation-bar-container" on-element-blur="onBlur()" v-if="displayNavBar"> <div class="navigation-bar" v-on:click="toggleMenu();"> <span class="navigation-bar-button left visible" v-bind:class="{active: NavBarCtrl.menuActive}"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </span> </div> </div> @FrankProvost — DanPottsHimself
@FrankProvost Thank you very much, i feel stupid now. i had not properly registered the component. — DanPottsHimself

DanPottsHimself DanPottsHimself · Accepted Answer · 2017-09-14T13:33:55

Pretty bad mistake on my behalf:

the above code does work given that you properly register the component.

export function setupVM(): Vue {
    const vm = new Vue({
        el: '#navigation-bar',
        components: {
            navigationBar: NavigationBar
        }
    });
    return vm;
}

can't import vue component from npm package

1 Answers