Unable to bring in Vue component from NPM module

Hello there,

I recently developed my own npm package for a navigation bar and I need to incorporate it into my main codebase. Currently, I am utilizing vue @components but I am struggling with integrating the imported component. If anyone has insight on how to properly include the npm packaged component in the DOM, your assistance would be highly valued.

Here is a simplified demonstration of what I have attempted:

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>
javascripttypescriptnpmwebpackvue.js

Answer №1

I made a pretty big mistake:

Despite that error, the code will run successfully as long as you register the component correctly.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to declare an object literal with optional keys in a Typescript function signature?

I have a .d.ts file similar to this: declare function myfunc(): { something: (err, { req, res, errorInfo, query, pathname, extra }?) => void; }; This declaration states that the function takes two arguments, with the second argument being an optional ...

typescript

Randomizer File Name Maker

I was questioning the behavior of Multer Filename. If Multer stores files with random filenames, is there a possibility of two files having the same name in Multer? In other words, if I am storing files from a large number of users, could the filenames e ...

javascriptnode.jsnpmmulter

It seems like the Express router is having trouble capturing requests, but the static serving feature is

I am currently in the process of integrating a JSON API endpoint into the standard project generated by the vue-cli webpack template. My goal is to connect my /api endpoint to the JSON API router. However, I have encountered an issue where the /api reques ...

expressvue.js

Align boxes in the center within a DIV container

Here is the box design that I have created: The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in this case, I want the "Bi-monthly" b ...

javascriptjquerycsstwitter-bootstrap

Include a return or delete from the default IO statement

I am utilizing an intersection observer that alters the header's font-color and background-color based on the content intersecting with it. This change is determined by the presence of data-color and data-background attributes declared on the div/sect ...

javascripthtmlcssintersection-observer

Update the database with the new values and display them in an HTML table

I am working with a table that looks like the one below: <script> $("#edit").hide(); // Initially hide the edit table $("#update").click(function() { $("#edit").toggle(); $("#shown").toggle(); ...

javascriptphpjqueryhtmlajax

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

I've implemented a JavaScript code snippet that loops through an array of fields to find specific properties and then adds them to a dictionary. For another example, you can check out this site. return this.getFields() .reduce((mappings, field) =& ...

javascripteslintcode-formatting

Discover the initial item in Observable that meets a certain criteria

I am trying to retrieve the first item of type avatar from payload.result within an observable: let result = this.fileService.getAvatarByUserId(2).pipe( map((payload: Payload<FileModel[]>) => payload.result), first((result: FileModel[]) => ...

angulartypescriptrxjsangular9

Install npm in a project utilizing docker-compose for development

My current project is dockerized and contains three apps along with three databases. The apps are written in node.js and utilize npm for package management. To simplify the setup process for development purposes, I have a script that clones the three repo ...

node.jsdockernpmdocker-compose

Uploading images seamlessly through ajax

Despite the abundance of tutorials, I am struggling to make them work. In my input form for file upload, I have: <input onChange="userPreviewImage(this)" type="file" accept="image/*" style="display:none"/> Here is my Javascript code: function use ...

javascriptjqueryajax

Error: The specified element to insert before is not a direct descendant of this parent node

As I work on converting a jquery dragable script to plain javascript, I encountered an issue at the insertBefore point. The error message that pops up is: NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. This particula ...

javascripthtml

The custom select component is failing to update its value

I'm facing an issue with a component that has the following code: <template> <select class=" py-1.5 px-2 outline-none border-primary-lightblue border-2 rounded-xl transition duration-500 ...

vue.jsuser-interfacevuejs2v-model

What is the best way to send pg-promise's result back to the controller in Express?

While working with Ruby on Rails (RoR), I am familiar with the MVC (Model-View-Controller) concept. In this framework, the controller is responsible for receiving data from the model, processing it, and rendering the view. An example of this structure look ...

javascriptpostgresqlexpresspromisepg-promise

Definition of TypeScript array properties

Having some trouble creating a type for an array with properties. Can't seem to figure out how to add typings to it, wondering if it's even possible. // Scale of font weights const fontWeights: FontWeights = [300, 400, 500]; // Font weight alia ...

typescript

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Just starting out with JS and working on a react project. I need to toggle the visibility of a button from false to true when a checkbox is checked. Here's my code, I believe the logic is correct but it's not updating the UI. Any suggestions are ...

javascriptreactjsreact-hooksevent-listener

New approach in Typescript: Enhancement of child class with additional Event Listener overloads

One of my classes is structured like this: interface A extends EventEmitter{ on(event: "eventA", listener: () => void): this; } There is another class defined as follows: interface B extends A{ on(event: "eventB", listener: ...

typescriptinheritanceevent-listenereventemitter

The completion event was not triggered during the AJAX request

I am having an issue with a function that I have created to make an ajax call. Despite using the .done method, it does not seem to be firing as expected. Upon checking my console for errors, I came across the following message: https://i.sstatic.net/CbYBR ...

javascriptajax

Tips for creating a website with an integrated, easy-to-use editing tool

Recently, I designed a website for a friend who isn't well-versed in HTML/CSS/JavaScript. He specifically requested that the site be custom made instead of using a web creator. Now, he needs to have the ability to make changes to the site without nee ...

javascripthtmlcsseditor

Ways to update a component from another in React

My React code includes an Employees page that renders both a Table component and a Filter component. The Filter component manipulates some data stored in the Employees page, updates the Filter's state through useEffect, and passes the data as a prop t ...

javascriptreactjs

Acquire multiple instances of NestJs dependencies using dependency injection within a single class

Below is a class called Product @Injectable() export class Product { brand: string; } I am injecting the Product class into ProductService export class ProductService { constructor(private readonly product: Product) {} update(products) { ...

node.jstypescriptdependency-injectionnestjs