Perché Prop non viene applicato al componente nella libreria dei componenti vue js?

Question

Sono impegnato a spostare i miei componenti dai nostri progetti in una libreria di componenti per motivi di facilità d'uso e manutenibilità. Sto usando questo modello Vue/Nuxt Library seguendo la struttura e i processi delineati.

Attualmente ho solo 2 componenti in un TestButton.vue e un LoaderModal.vue .

Il pulsante di test funziona bene quando viene importato/chiamato da un'applicazione quando si trova nella libreria come mostrato come previsto e sembra che dovrebbe poiché in realtà è un pulsante mdb (che ho appena usato per testare le importazioni di componenti). (usiamo MDB come nostro componente principale lib

Il problema è con il caricamento modale. Normalmente dovresti impostare la proprietà show del modale per mostrarlo o nasconderlo in questo modo.

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

usando oggetti di scena per mostrare, nascondere e controllare il testo in questo modo

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

e funziona bene se lo eseguo nella libreria dei componenti stessa utilizzando

vue serve ./src/components/LoaderModal

ma quando imposto il prop showLoader su true dall'applicazione che importa la libreria non viene visualizzato. Vedo che il modale è nel DOM ma il display è impostato su nessuno. Non ci sono errori nella console e se cambio il Display per "bloccare" il LoadingModal Shows.

Ecco l'html copiato dal DOM che mostra che è lì, ma il display è semplicemente impostato su "nessuno"

<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 ha il seguente aspetto

{
  "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"
  }
}

e il plugin appare come segue nel mio progetto principale.

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

Quindi viene anche aggiunto a nuxt.config come plug-in. Per favore aiuto

EDIT Di seguito è riportato il valore degli oggetti di scena dal pannello vue dev

Aggiornare

Di seguito il link al progetto codesandbox per la libreria dei componenti. La libreria è anche su Npm. Prova a utilizzare il componente LoaderModal in qualsiasi progetto nuxt per vedere il problema. Libreria dei componenti della sandbox del codice

Esempio di implementazione del componente Nuxt js

Answer 1

vedo il tuo codesandbox. C'è un piccolo errore nell'usare gli oggetti di scena nel tuo codice per LoaderModalcomponent. Se si utilizza un valore direttamente per propsnon è necessario associarlo ( :text). Quindi puoi usare il componente come di seguito.

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

se usi un elemento dati come oggetti di scena, allora associalo:

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

Ecco la demo funzionante del tuo codesandbox

Answer 2

Il vero problema sembra essere stato che tutti i componenti css richiesti di mdblibrary non venivano importati nonostante fossero importati nell'indice della libreria dei componenti.

Sembra che quando si aggiunge un plugin a nuxt chiami il metodo install e nient'altro. La soluzione era importare il css nel componente stesso e renderlo "con ambito" altrimenti influirà sui componenti nell'applicazione principale.

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