Developing a vue.js component library without the need for constant rebuilding after every edit

Introduction: I have created two projects using vue-cli ~4.2.0:

  • parent-app - the main project
  • dummylib - a library that is imported by parent-app. It contains several .vue components.

Currently, parent-app functions well in dev mode with dummylib being imported into it. All vue-components from dummylib are rendering correctly.

Issue: I would like to make changes to dummylib and see those changes instantly, similar to how it works for parent-app, without having to rebuild it after each modification.

My current process for developing the library:

  1. (dummylib): yalc publish - assuming it has already been built
  2. (parent-app): yalc link dummylib
  3. (parent-app): npm serve - start local development
  4. Editing dummylib...
  5. (dummylib): npm build - !!! Would like to skip this step !!!
  6. (dummylib): yalc publish --push - After doing this, I can see my edits from step 4 being applied...

Are there any alternatives to bypass step 5? I also considered using a monorepo but decided against it for now.

javascriptvue.jsnpmshared-librariesnode-modules

Answer №1

At long last, I was able to make it work by incorporating the following code:

"start": "vue-cli-service build --target lib --name dummylib src/main.js --watch --mode development"

into the scripts portion of the package.json file

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

Limiting the number of checkboxes selected in a Checkbox Group based on

I am working on a checkboxGroupInput that has 4 options (denoted as A, B, C, D). My goal is to restrict the selection to only 2 choices. The user should be able to pick a 3rd option. In this scenario, only the newly selected (3rd) and previously selec ...

javascriptjqueryrcheckboxshiny

Is it possible to add packages directly from the node_modules folder?

My friend sent me his node_modules directory, but I'm trying to avoid manually typing npm i *package* for each package since the package.json file is missing. Is there a way to install these packages from the node_modules directory using the terminal ...

node.jsnpm

The array of objects has vanished into thin air

I am receiving a JSON string from my server through a PHP file, which contains 25 meals. The PHP script is initiated by a JavaScript function. My goal is to convert the JSON into an array of objects. The response stream displays the correct values and eac ...

phpjavascriptjquery

"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 ...

javascriptjqueryajaxcalendarfullcalendar

Error: Authorization requires both data and salt arguments

As a novice in NodeJS, I attempted to create an authentication form using NodeJS + express. The issue I am facing is regarding password validation - specifically, when "confirmpassword" does not match "password", it should return nothing. Despite my effo ...

javascriptnode.jsexpresserror-handlingauthorization

Turning JSON data into an array format, omitting the keys

Can someone help me with a query that will retrieve a specific column from the database and return it in this format: [ { "tenantName": "H&M" }, { "tenantName": "McDonalds" } ] I would like to transform ...

javascriptreactjsaxiossequelize.js

Issue with Node REST API: PUT request is failing to update data in the request

Encountering issues while attempting to update data through a PUT request. Despite making the request, the data remains unchanged and continues to display the previous information in Postman. Details of the PUT request sent via Postman: http://localhost: ...

javascriptnode.jsexpressmongoose

Having trouble installing plugins on Ionic 6. Every time I try, an error pops up. Any suggestions on how to proceed?

Failed to fetch plugin https://github.com/katzer/cordova-plugin-background-mode.git via registry. It seems like there is a connection issue or the plugin specification is incorrect. Please check your connection, as well as the plugin nam ...

node.jsangularcordovanpmionic-framework

Regenerate the missing package-lock.json file by reconstructing it from the node_modules directory

When I started working on the project, I noticed that the original developers had not included the package-lock.json file in Git, only the package.json file. Back then, I generated my own package-lock.json file through npm install, but it has been 5 years ...

npm

Troubles When Setting Up Gulp

Having some trouble getting Gulp to function properly on my Ubuntu system. After running the command to install Gulp, there are no reported errors. However, when I try to run gulp -v post-installation, it doesn't seem to work as expected. npm version ...

node.jsubuntunpmgulp

Type of flow: customizable prop types for React components that can be extended

In the scenario where a SelectOption component is present, with props defined as: type OptionType = { +id: string, +label: string, } type Props = {| +options: OptionType[], +onItemPress: OptionType => void |} I intentionally left the OptionType ...

javascriptreactjsflowtype

Dividing an array into categories with typescript/javascript

Here is the initial structure I have: products = [ { 'id': 1 'name: 'test' }, { 'id': 2 'name: 'test' }, { 'id' ...

javascriptarraysjsontypescript

JavaScript slice() method displaying the wrong number of cards when clicked

In my code, I have a section called .registryShowcase. This section is designed to display logos and initially shows 8 of them. Upon clicking a button, it should load the next set of 8 logos until there are no more left to load (at which point the button ...

javascripthtmljquerycss

Creating responsive arrow heads using D3: A step-by-step guide

Currently, I am working on creating a thermometer-style bar chart using D3.js version 3. While I have successfully created a basic responsive rectangle with two filled colors, I am facing difficulties in figuring out how to add arrow heads to the design. B ...

javascriptd3.js

PHP encountering a bad escaped character while parsing JSON using JSON.parse

I'm encountering an issue with JSON parsing. In my PHP code, I have the following: json_encode(getTeams(),JSON_HEX_APOS); This returns a large amount of data. Sample data: To provide more clarity, let's assume I have this: my_encoded_data ...

javascriptphpjqueryjson

When the page is reloaded, JavaScript code remains unprocessed

Within a mobile website, there is a JavaScript snippet that appears as follows: <script type="text/javascript"> (function() { // actual function code is not shown here }()); </script> Upon initial page load, the code is successfully execute ...

javascriptandroidmobilescope

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

javascripthtmlinputimage

Troubleshooting: Vue.js custom select element not responding to blur event

Unique Scenario A custom autocomplete select component has been created that not only autocompletes but also allows for adding a new value if the result is not found. This functionality was discovered to be missing in the vue-select module. Explore the C ...

javascriptvue.js

Deciphering the concept of promises within the Node.js platform

After some research, I have come to understand that there are three main methods of calling asynchronous code: Using Events, for example request.on("event", callback); Callbacks, like fs.open(path, flags, mode, callback); Promises While browsing through ...

javascriptnode.jspromise

Working with variables passed from Node.js in Jade processing

Currently, I have a situation where my script is sending a matrix that looks like this: [[1,2,3,4], [7,6,5,4], [2,3,4,5]]. After sending it using res.send(JSON.stringify(dataArray)); and viewing it in jade with h1#results, I can see that the format appears ...

javascriptajaxnode.jsexpresspug