Comment puis-je créer une bibliothèque qui expose un seul composant Vue pouvant être utilisé par les fichiers .mjs distribués ?

Question

Je souhaite créer un composant Vue regroupé dans un seul fichier .mjs. Un autre projet Vue peut obtenir ce fichier .mjs via HTTP et utiliser le composant. L'installation d'un composant enfichable via npm n'est pas possible car d'autres applications tenteront de l'obtenir en fonction de la configuration au moment de l'exécution.

Éléments à prendre en compte avec les composants enfichables

• Peut utiliser un sous-composant d'un autre framework/bibliothèque d'interface utilisateur
• Peut utiliser du CSS personnalisé
• Peut dépendre d'autres fichiers, tels que des images

Copier la bibliothèque

J'ai créé un nouveau projet Vuetify via npm create vuetify

J'ai tout supprimé dans le dossier src sauf vite-env.d.ts et j'ai créé un composant Renderer.vue

<configuration du script lang="ts">
importer { VContainer } depuis "vuetify/components"

définirProps<{ valeur : inconnue }>()
</script>

<modèle>
  <v-conteneur>
    <span class="red-text">La valeur est : {{ JSON.stringify(value, null, 2) }}</span>
  </v-conteneur>
</modèle>

<style>
.red-text { couleur : rouge }
</style>

et un fichier index.ts

importer le moteur de rendu depuis "./Renderer.vue";

export { Moteur de rendu };

J'ai ajouté le mode bibliothèque dans vite.config.ts

build : {
    lib : {
      entrée : résoudre (__dirname, "./src/index.ts"),
      nom : "Renderer",
      nom du fichier : "rendu",
    },
    Options de cumul : {
      externe : ["vue"],
      sortir: {
        globales : {
          vue : "Vue",
        },
      },
    },
  },</pré>
<p>et étendu le fichier package.json</p>
<pre class="brush:php;toolbar:false;">"fichiers" : ["dist"],
  "principal": "./dist/renderer.umd.cjs",
  "module": "./dist/renderer.js",
  "exportations": {
    "." : {
      "importer": "./dist/renderer.js",
      "exiger": "./dist/renderer.umd.cjs"
    }
  },</pré>
<p>Comme j'utilise du CSS personnalisé, Vite génère un fichier styles.css, mais je dois injecter les styles dans le fichier .mjs. Sur la base de cette question, j'utilise le plugin vite-plugin-css-injected-by-js.</p>
<p>Lors de la construction, j'obtiens le fichier .mjs requis contenant le CSS</p>

<heure />
<p><strong>Utilisation de composants</strong></p>
<p>J'ai créé un nouveau projet Vue via <code>npm create vue</code></p>

<p>À des fins de tests, j'ai copié le fichier .mjs généré directement dans le répertoire src du nouveau projet et j'ai modifié le fichier App.vue en </p>
<pre class="brush:php;toolbar:false;"><configuration du script lang="ts">
import { onMounted, tapez Ref, ref } depuis "vue" ;

const ComponentToConsume : Ref = ref (null);

onMounted (async () => {
  essayer {
    const { Renderer } = wait import("./renderer.mjs"); // récupère le composant pendant l'exécution

    ComponentToConsume.value = Moteur de rendu ;
  } attraper (e) {
    console.log(e);
  } enfin {
    console.log("fait...");
  }
});
</script>

<modèle>
  <div>Composant importé ci-dessous :</div>
  <div v-if="ComponentToConsume === null">"toujours en cours de chargement..."</div>
  <composant-à-consommer v-else :value="123"
</template>

Malheureusement, j'obtiens l'avertissement et l'erreur suivants

[Vue warn] : Vue a reçu un composant qui est devenu un objet réactif. Cela peut entraîner une surcharge de performances inutile et doit être évité en marquant les composants avec markRaw ou en utilisant shallowRef au lieu de ref.

[Vue warn] : Injection 'Symbol(vuetify:defaults)' introuvable.

[Vue warn] : Une erreur non gérée s'est produite lors de l'exécution de la fonction de configuration

[Vue warn] : une erreur non gérée s'est produite lors de l'exécution d'une actualisation du planificateur.

Non capturé (promis) Erreur : [Vuetify] Instance par défaut introuvable

Est-ce que quelqu'un sait ce qui me manque ou comment y remédier ?

Answer 1

Vuetify ne fournit pas de composants isolés, le plugin doit être initialisé, vous devez le faire dans l'application principale :

app.use(Vuetify)

Assurez-vous que vuetify ne sont pas dupliqués dans les dépôts du projet afin que la bibliothèque et l'application principale utilisent la même copie.

lib doit utiliser vuetify作为开发依赖，并在Rollup external comme dépendance de développement et le spécifier dans Rollup external pour empêcher que les éléments globaux du projet ne soient regroupés avec la lib :

external: ["vue", "vuetify"]