Search code examples
javascriptvue.jsvue-componentmdbootstrap

Why is Prop not applied to component in component library vue js?

I am busy moving my components from our projects into a component library for ease of use and maintainability purposes. I am using this Vue/Nuxt Library template following the structure and processes outlined.

Currently I only have 2 components in there a TestButton.vue and a LoaderModal.vue .

enter image description here

The test button works fine when imported/called from an application when it sits in the library as it shows as expected and looks like it should as it is actually a mdb button (which I just used to test component imports). (we use MDB as our main component lib

The problem is with the Loading Modal. Normally you would set the show property of the modal to show or hide it like so.

<template>
  <mdb-modal centered :show="showLoader">
    <mdb-modal-body class="text-center">
      <div class="d-flex justify-content-center" v-if="selectedLoader==='BALL'">
        <div class="spinner-grow" role="status" style="color: #005250; width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <h3 class="block" style="margin-top:16px" v-if="longLoadingText!=null">{{ longLoadingText }}</h3>
      <h3 class="block" style="margin-top:16px" v-else>{{ text }}</h3>
    </mdb-modal-body>
  </mdb-modal>
</template>

using props to show,hide and control text like so

 props: {
    showLoader: { default: true, type: Boolean },
    text: { default: "Loading", type: String },
  },

and it works fine if I run it in the component library itself using

vue serve ./src/components/LoaderModal

but when I set the showLoader prop to true from the application that imports the library it does not show. I can see the modal is in the DOM but the display is set to none. There are no errors in the console and if I change the Display to "block" the LoadingModal Shows.

Here is the html copied from the DOM that shows it is there, but display is just set to "none"

<div data-v-bfb6b926="" data-v-6a672d6c="" class="modal" style="opacity: 1;">
  <div data-v-bfb6b926="" role="document" class="modal-dialog modal-dialog-centered" style="transform: translate(0px, 0px);">
    <div data-v-bfb6b926="" class="modal-content">
      <div data-v-c35b1502="" data-v-6a672d6c="" class="text-center modal-body">
        <div data-v-6a672d6c="" data-v-c35b1502="" class="d-flex justify-content-center">
          <div data-v-6a672d6c="" data-v-c35b1502="" role="status" class="spinner-grow" style="color: rgb(0, 82, 80); width: 3rem; height: 3rem;"><span data-v-6a672d6c="" data-v-c35b1502="" class="sr-only">Loading...</span></div>
        </div>
        <!---->
        <!---->
        <h3 data-v-6a672d6c="" data-v-c35b1502="" class="block" style="margin-top: 16px;">Loading some stuff</h3>
      </div>
    </div>
  </div>
</div>

My Library Package.json looks as follow

{
  "name": "@myScope/web-commons",
  "version": "0.1.23",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report --target lib --name web-commons ./src/index.js",
    "lint": "vue-cli-service lint",
    "docs:build": "vuepress build docs",
    "docs:dev": "vuepress dev docs"
  },
  "main": "dist/web-commons.common.js",
  "files": [
    "src",
    "assets",https://stackoverflow.com/posts/63504989/edit#
    "dist/*.{js,css}"
  ],
  "dependencies": {
    "mdbvue": "^6.7.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/babel-preset-app": "^4.4.6",
    "@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11",
    "vuepress": "^1.5.2"
  }
}

and the plugin looks as follows in my main project.

import Vue from 'vue'
import * as componets from '@myScope/web-commons'
Vue.use(componets)

Then it is also added to the nuxt.config as a plugin. Please help

EDIT Below is the value of the props from the vue dev panel enter image description here

Update

The following is the link to the codesandbox project for the component library. The library is also on Npm. Try using the LoaderModal Component in any nuxt project to see problem. Code Sandbox Component Library

Component Implementation Example Nuxt js

Solution

  • The actual problem seem to have been that all the required css components of the mdblibrary was not being import despite being imported in the index of the component library.

    It seems that when adding a plugin to nuxt it calls the install method and nothing else. The solution was to import the css into the component itself and making it "scoped" otherwise it will affect the components in the main application.

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