<p>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.</p> <p>Éléments à prendre en compte avec les composants enfichables</p> <ul> <li>Peut utiliser un sous-composant d'un autre framework/bibliothèque d'interface utilisateur</li> <li>Peut utiliser du CSS personnalisé</li> <li>Peut dépendre d'autres fichiers, tels que des images</li> </ul> <heure /> <p><strong> Copier la bibliothèque</strong></p> <p>J'ai créé un nouveau projet Vuetify via <code>npm create vuetify</code></p> <p>J'ai tout supprimé dans le dossier src sauf vite-env.d.ts et j'ai créé un composant Renderer.vue</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>et un fichier index.ts</p> <pre class="brush:php;toolbar:false;">importer le moteur de rendu depuis "./Renderer.vue"; export { Moteur de rendu };</pre> <p>J'ai ajouté le mode bibliothèque dans vite.config.ts</p> <pre class="brush:php;toolbar:false;">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></pre> <p>Malheureusement, j'obtiens l'avertissement et l'erreur suivants</p> <blockquote> <p>[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 <code>markRaw</code> ou en utilisant <code>shallowRef</code> au lieu de <code>ref</code>. </p> </blockquote> <blockquote> <p>[Vue warn] : Injection 'Symbol(vuetify:defaults)' introuvable. </p> </blockquote> <blockquote> <p>[Vue warn] : Une erreur non gérée s'est produite lors de l'exécution de la fonction de configuration</p> </blockquote> <blockquote> <p>[Vue warn] : une erreur non gérée s'est produite lors de l'exécution d'une actualisation du planificateur. </p> </blockquote> <blockquote> <p>Non capturé (promis) Erreur : [Vuetify] Instance par défaut introuvable</p> </blockquote> <p>Est-ce que quelqu'un sait ce qui me manque ou comment y remédier ? </p>

app.use(Vuetify)

external: ["vue", "vuetify"]