How to Share Your Vuejs Component with the World by Publishing it on npm

I have recently developed a Vue.js 2 project using webpack which consists of 2 components. My goal is to share this project as an npm package so that the components can be easily reused in multiple projects.

After publishing the project on npm with npm publish and installing the package using npm install my-components, I noticed that the project was added to the node_modules directory along with the entire source code, making it look like a copied version of the project.

Furthermore, when attempting to run the command npm build dist, I encountered the following error:

npm ERR! Darwin 16.6.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dist"

npm ERR! node v6.9.2

npm ERR! npm v3.10.9

npm ERR! missing script: dist

npm ERR! If you need help, you may report this error at: https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request: npm ERR!
/Users/myuser/Documents/Projects/my-components/npm-debug.log

In my project repository (https://github.com/Trelllis/my-components), there is a component named vue-version that I am unable to utilize, and the project my-components seems unresolved.

Could anyone provide guidance on how to properly publish this project with all its components included?

Thank you.

Answer №1

It is common to include the full code in the npm module. To exclude a folder from npm, you can create a .npmignore file at the project's root, following the same syntax as .gitignore files. Learn more about npmignore in the documentation available here.

Regarding your second issue, it seems like you should run npm run build, which will execute this specific file. Based on what I see, using npm build dist does not seem appropriate for your project as there is no 'dist' folder. Refer to the general documentation for npm scripts and the documentation for npm build for further clarification.

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

Using Material-UI version 1, pass the outer index to the MenuItem component when clicked

Within my component, there is a Table that displays rows generated from a custom array of objects. In the last TableCell, I aim to include an icon button that, upon being clicked, opens a Menu containing various MenuItem actions (such as edit and delete). ...

Having trouble getting Javascript to reveal hidden elements based on their class

I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

I have implemented Bootstrap 4 tabs to showcase content fetched through an AJAX call. However, I encountered an issue upon completion of the call. The error message displayed is: Uncaught TypeError: $(...).tab is not a function The tabs are initially hi ...

Encountering a Node.js error while using ssh2: ECONNRESET read error

I have been attempting to utilize npm's ssh2 package to establish an SSH connection and remotely access a machine. The code functions properly for connections from Windows to Linux/MacOS, but encounters issues when connecting from Windows to Windows ( ...

`Unveil the hidden edges of the Google timeline chart`

Does anyone know how to remove the chart border from a Google timeline chart using this script? <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load ...

Error Found in Angular2 Console Inspection

So, when I check the webpage inspection console, I see this error: Uncaught SyntaxError: Unexpected token { at Object.<anonymous> (main.bundle.js:3885) at __webpack_require__ (polyfills.bundle.js:51) at eval (eval at <anonymous> (m ...

Access Flask variable in JavaScript code

Currently working on a CTF challenge, my query is not seeking assistance in solving it, but rather pertains to syntax. The task involves retrieving the secret key from Flask server's configuration. This key is stored within the app.secret_key variable ...

Tips for enhancing the speed of drawing circles in mouse movement using JS and CANVAS

My current script allows me to draw a circle during mousemove, but it's not as fast as I'd like. Before drawing the circle, I gather the color pixel during mousemove in order to draw a circle on the canvas with the picked color. I came across ...

Git bash encounters issues when attempting to run the npm install command

I'm encountering a persistent error in Git Bash while attempting to perform an npm install: 64 verbose stack Error: command failed 64 verbose stack at ChildProcess.<anonymous> (C:\Users\baseuser\AppData\Roaming\npm&b ...

What is the process for accessing getBoundingClientRect within the Vue Composition API?

While I understand that in Vue we can access template refs to use getBoundingClientRect() with the options API like this: const rect = this.$refs.image.$el.getBoundingClientRect(); I am now attempting to achieve the same using template refs within the com ...

Creating a custom component results in an extended duration to 'eliminate' its children

1I am currently facing an issue with a time-table component created using vue.js. It contains approximately 200 nested child timeline components, making it quite complex (I wanted to share an image but lacked the reputation to do so). The main problem lie ...

JavaScript code is functioning properly on Chrome and Internet Explorer, however, it may not be working on FireFox

Despite searching through the console, I am unable to find a solution to this issue. There are two images in play here - one is supposed to appear at specific coordinates while the other should follow the mouse cursor. However, the image intended to track ...

Efficiently adjusting the height of a sticky sidebar

I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, set ...

Adding content in real-time at the current cursor position within a Contenteditable element using Angular

I have a contenteditable div where I am facing an issue with pasting text. Whenever I try to paste some text into the div, it always gets pasted at the end. I am using ViewChild to access the reference of the contenteditable div and utilizing innerText to ...

React state variable resetting to its initial value unexpectedly

I have encountered a puzzling issue with the React useState hook. After setting the state of a value, it gets reset to null unexpectedly. The main problem lies in the click event that should update the startDate value to the current date and time. This cli ...

"Initiate an Ajax call in Full Calendar before an event is displayed on the calendar

I need guidance on how to integrate ajax calls with the Full Calendar documentation. Specifically, I want to make an ajax call to a WordPress database before each event is rendered on the calendar. The response from the call will determine the color of the ...

Trigger an Ajax form submission upon a change occurring

My Ajax form needs to be submitted as soon as the user selects an image, but I'm encountering an issue with the form not submitting. Any guidance on resolving this problem would be greatly appreciated. -- Below is the form --- <form id="bgimagefo ...

Tips for uploading separate icons using FontAwesome version 6

I have a Laravel web app that utilizes an NPM/Webpack build process, and I am currently importing the SCSS icon sheet versions of FontAwesome like this: @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontaw ...

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...