What prevents the application of Prop to a component in a Vue.js component library?

As part of streamlining our development process, I am currently in the process of migrating my components from various projects into a centralized component library. This move is aimed at improving ease of use and maintainability.

To achieve this, I am utilizing the Vue/Nuxt Library template provided at this link, following the recommended structure and processes.

At present, my component library only consists of two components: TestButton.vue and LoaderModal.vue.

The Test Button component functions as expected when imported and called within an application. It displays correctly, resembling an MDB button as intended for testing component imports (MDB documentation here).

However, I have encountered an issue with the Loading Modal component. Typically, setting the show property of the modal controls its visibility. Here is an example code snippet:

...

I have defined props to control the display and text content of the modal, which works flawlessly when run within the component library itself.

vue serve ./src/components/LoaderModal

Yet, when I set the showLoader prop to true from an external application that imports the library, the modal does not appear visible. While inspecting the DOM, I can see that the modal exists but its display property is set to "none". Changing this to "block" manually makes the modal visible.

The configuration in my Library's package.json file is outlined below:

...

Additionally, the plugin setup in my main project looks like this:

...

Furthermore, the value of the props can be seen in the Vue dev panel:

https://i.sstatic.net/pKUkz.png

Edit:

Update

You can access the complete codesandbox project for the component library here: Code Sandbox Component Library

Feel free to try using the LoaderModal Component in any Nuxt project to observe the problem. Component Implementation Example Nuxt js

javascriptvue.jsvue-componentmdbootstrap

Answer №1

I noticed your codesandbox. It seems there is a small error with how you are using props in the code for the LoaderModal component. If you are directly providing a value for the props, there is no need to bind it using (:text). You can simply use the component like this:

<LoaderModal :showLoader="true" text="Some Loading Text"/>

If you are using a data element as a prop, then you should bind it like this:

<LoaderModal :showLoader="true" :text="variableName"/>

Check out this working demo of your codesandbox

Answer №2

The issue seemed to arise from the fact that despite importing all the necessary CSS components of the mdblibrary in the index file of the component library, they were not actually being imported.

Upon further investigation, it was discovered that when adding a plugin to nuxt, only the install method is called and nothing else. To resolve this, the CSS needed to be directly imported into the component itself and set as "scoped" to prevent it from affecting other components in the main application.

<style
scoped
>
@import "../../node_modules/mdbvue/lib/css/mdb.min.css"; 
</style>

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

Does the round function always produce the most accurate floating point approximation?

Will the result of using round(3.12143345454353,2) always be equivalent to simply using the literal value 3.12? The floating point approximation would suggest so (3.12000000000000010658141036401502788066864013671875). In simpler terms, can we rely on the ...

javascriptpythonfloating-point

Disregarding if condition based on window size in Javascript

My website features drop down menus in the navbar using Bootstrap elements and customized JavaScript. I've set it up so that the dropdown effect only occurs when the screen width is greater than 480 (the xs size for Bootstrap). However, the script see ...

javascriptjqueryhtmlbootstrap-4

I am experiencing issues with editing the text field in React Tab as it keeps getting out of focus

https://i.sstatic.net/AUxlN.png Whenever I try to type, the text box loses focus and only allows me to type one letter at a time. Below is the code snippet that I am using: <TabPanel value={value} index={0}> {[...Array(commentCount)].map((item, in ...

javascriptreactjsmaterial-uitabs

What is causing my Angularjs View to not update upon clicking, even though I am successfully retrieving the content?

<div class="example" ng-controller="Ctrl"> <div ng-repeat="item in items"> <button ng-click="removeItem(item.id);">remove</button> <div class="element" id="{{itemId}}"></div> </div> <div> var a ...

javascriptjqueryangularjs

Ways to create space around Navbar MUI for a more balanced design

Currently, I am working on designing a navigation bar using MUI. My goal is to create a navbar with some space on both sides similar to the one seen on https://i.sstatic.net/lPXyC.png If you take a look at Stackoverflow's navbar, you will notice that ...

javascriptreactjsmaterial-uinavbar

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

javascriptphphtmldatabasecombobox

Gatsby: Issue with Event Listeners persisting when using React useEffects hook

I'm currently utilizing Gatsby for my project. Within my code, I have implemented a useEffect() hook to manage Event Listeners on the document in order to track outside clicks and close specific menus. However, upon navigating to another route and at ...

javascriptreactjsreact-hooksgatsby

What is the functionality of the HTML code in an AngularJS application that allows it to reveal hidden text on a webpage?

My goal is to extract text from a specific web element contained within an <input> tag in the following HTML. Although the webpage displays "A-1", the actual HTML code does not contain this text, as the developer has implemented dynamic display based ...

javascripthtmlangularjsseleniumselenium-webdriver

Refreshing jQuery list following an ajax update

I have created a plugin that sends requests via ajax to update ul elements based on a list. The plugin is designed for use with jQuery version 2. Currently, I have the following function: function getAgentList(){ var agentList = []; jQuery(' ...

javascriptajaxjquery

Is it considered inefficient to import every single one of my web components using separate <script> tags?

Currently, I am in the process of developing a website with Express + EJS where server-side rendering is crucial. To achieve this, I am utilizing web components without shadow dom. Each page type (home, post, page) has its own EJS view. For instance, when ...

javascriptexpress

Knex.js allows you to use the .whereBetween() method to include dates that

While running a filter query to get records within a specific date range, I noticed that it's including records from a day before the actual range. Here is an example: .whereBetween('created_at', [dateRange.from, dateRange.to]); https://i.s ...

javascriptexpresseloquentknex.js

What is the best way to retrieve the parameters from the current URL within an Express function on the backend? (details below)

Struggling to articulate my issue here. I'm in the process of creating a straightforward express app that utilizes the omdb API to search for movie titles and display the results. The challenge is that the omdb API returns the results in pages, with 1 ...

javascriptnode.jsexpressbackendejs

Jquery pop-up information bubble

I'm currently using: jQuery Bubble Popup v.2.3.1 http://maxvergelli.wordpress.com/jquery-bubble-popup/ The following code should be included within the document ready section: $('.bubble').CreateBubblePopup({ align: 'cent ...

javascriptjquerypopup

Tips for making multiple files accessible in an npm package?

I have developed an npm package called example-package. Typically, users would import it like this: import RootModule from "example-package"; However, I also have a file nested within the package structure. Package Root > src > Feature > inde ...

javascriptnpmnpmjs

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

After installing the npm package, use browserify to bundle the bs58 library

I am trying to bundle the bs58 module using browserify by following the instructions provided on this website: npm install --save bs58 npm install -g browserify browserify < /mypath/lib/bs58.js > /mypath/lib/bs85.bundle.js In my HTML + JS file, I ...

javascriptnpmbrowserifyradix

Utilizing ng-model to control the visibility of a label or anchor tag

Here is the code snippet I am working with: <div class="tabs DeliveryRightDiv"> <label class="selected"><a>One</a></label> <label> <a>Two</a> </label> <label> ...

javascriptangularjs

How can I determine if a value exists in an array within an Angular template?

Is there a method to determine if a value is present in an array within an angular template? I would like something similar to this: <div ng-class="{'myClass': 1 in [1,2,5]}">Yay</div> If 1 is found in the array, myClass will be app ...

javascriptangularjstemplate-engine

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

Running my API in a website application works flawlessly, but encountering SyntaxError when testing it in Postman - specifically "No number after minus sign in JSON at position 1" (line 1 column 2). The data is correctly inputted into the body of Postman a ...

javascripttypescriptnext.jspostman

Returning a PHP variable to AJAX communication

if($rx==$_SESSION['randomx'] and $ry==$_SESSION['randomy']){ echo "Congratulations, you hit the correct cell! You only used:".$_SESSION['poskus']; } else{ $distance=sqrt(($rx-$_SESSION['randomx'])*($rx-$_ ...

javascriptphpjqueryajax