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

Transforming a unirest 'GET' call into an axios request

I am currently utilizing TheRundown API to access sports data. The example provided to me makes use of unirest, but I am endeavoring to adapt that example into an axios request. While I have managed to make it work for the most part, my main challenge lies ...

javascriptreactjsapiaxiosnext.js

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

javascripthtmljquerycssjquery-ui

What happens when npm uninstall is called without any options?

Currently, I am tackling a node project where the previous developer advised that if the application is not building correctly, to simply execute npm uninstall (without any additional options or parameters) followed by npm install. I grasp how npm install ...

node.jsnpmnode-modules

Guide on how to initialize a variable in Express.js within a conditional statement in Node.js

Trying to create a variable based on a conditional statement, but even with simple code I am unable to retrieve the new variable. Here is my code: exports.productPatch = (req, res, next) => { const id = req.params.productId; const image = req.body.p ...

javascriptnode.jsexpress

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Here is the current structure I'm working with: I want to figure out how to eliminate any field that has the id 3Q41X2tKUMUmiDjXL1BJon70l8n2 from all subjects. Is there a way to achieve this efficiently? admin.database().ref('UsersBySubjects&ap ...

javascripttypescriptfirebasefirebase-realtime-databasefirebase-admin

Volta revolutionizing the use of global npm packages

I recently experimented with Volta tools on a pre-existing Node project and found them to be very useful :) However, I'm encountering an issue with using global packages. For example, I installed the gitmoji-cli package globally using npm like so: n ...

node.jsnpmvolta

Exploring the world of jQuery waypoints and the art of modifying

This is only the second question I'm asking here, so please be gentle! I've been experimenting with jQuery waypoints to dynamically show and hide a border under my navigation menu based on scroll position. For instance, when the sticky nav is ov ...

javascriptjqueryhtmlcsswordpress

Determining the height of dynamically rendered child elements in a React application

Looking for a way to dynamically adjust the heights of elements based on other element heights? Struggling with getting references to the "source" objects without ending up in an infinite loop? Here's what I've attempted so far. TimelineData cons ...

javascripthtmlreactjstypescript

Using the information retrieved from Google Place Autocomplete and saving it for future reference

I am interested in utilizing the Google API "Place Autocomplete" widget to enhance user experience on my website. The specific widget I have in mind can be found here. My goal is to streamline the process of obtaining property addresses from Real Estate A ...

javascripthtmlcssgoogle-maps-api-3autocomplete

The error "Unable to create an instance of mssql.Schema" indicates that the

Seeking assistance from experienced ReactJS developers to address the issue outlined below. The code provided is based on a tutorial I was following. Despite numerous attempts, I have been unable to resolve the issue. Here is the code snippet from User.js ...

javascriptreactjssql-serverreact-native

Enhance Your Form Validation with jQuery UI Dialog Plugin

Currently, I am utilizing the bassistance validation plugin for form validation. I have set up a pop-up modal dialog box to contain a form that requires validation, but for some reason, the form is not getting called. I have checked all my ID's and re ...

javascriptjqueryjquery-uijquery-validatejquery-ui-dialog

Angular: Concealing a Component within a Controller

Being new to Angular, I am trying to figure out how to programmatically hide/show a component using the controller. I am having trouble understanding how to access my component and set ng-hide to false. Currently, my controller includes a service call. Af ...

javascriptangularcontroller

The command in node_moduleskeytar has encountered an error and failed to execute successfully

I keep encountering the following error. Can somebody please assist? npm ERR! code 1 npm ERR! path C:\WebApp\NPulseWeb\node_modules\keytar npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c pre ...

node.jsangularnpm

Mongoose - Mastering the Art of Executing Multiple Update Statements in a Single Operation

In the MongoDB documentation, I found out that you can execute multiple update statements in a single command. How can this be accomplished with Node.js and Mongoose? db.runCommand({ update: <collection>, updates: [ { q: <q ...

javascriptnode.jsmongodbmongoose

Having issues with connecting the front-end (Vue) to the API (Node.js), utilizing nginx on an EC2 AWS instance running Ubuntu 20.04

I am currently in the process of setting up web servers. Initially, I decided to use NodeJS with Express for backend, specifically listening on port 3002. app.js is now successfully listening at port 3002 Subsequently, I configured the Ubuntu firewall to ...

node.jsamazon-web-servicesvue.jsnginxaxios

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Is there a way to control the quantity of items being displayed in my ng-repeat directive?

Here are the objects in my array: 01-543BY: Array[1] 03-45BD23: Array[1] 03-67BS50: Array[1] 06-78FR90: Array[1] 07-467BY3: Array[1] 09-23DF76: Array[1] Currently, I have a total of six objects, but I only want to display four. This is how I am using ng- ...

javascriptangularjshtml

Audio waves visualization - silence is golden

I am attempting to create a volume meter, using the web audio API to create a pulsation effect with a sound file loaded in an <audio> element. The indicator effect is working well with this code; I am able to track volume changes from the playing aud ...

javascriptjqueryhtml5-audio

Steps to clear the form in vue after the ajax request has been successfully submitted

Exploring Vue.js Web Form Validation with a Scenario If you are interested in the vue-form validator library, it can be found at https://github.com/fergaldoyle/vue-form For a demonstration of this scenario, check out the following jsfiddle link: https:/ ...

javascriptvalidationvue.jsvuejs2vue-component

Dealing with AJAX errors in React components after mounting

Facebook suggests that the optimal method for loading initial data in a React component is to execute an AJAX request within the componentDidMount function: https://facebook.github.io/react/tips/initial-ajax.html It would look something like this: ...

javascriptjqueryajaxreactjs