Comment définir compilerOptions.isCustomElement pour VueJS 3 dans le projet Laravel

Question

Je développe VueJS 3 dans un projet Laravel et j'utilise un fichier JS qui me fournit des éléments pour une barre d'outils Markdown. Fondamentalement, c'est un ensemble de fonctions qui me donnent un bouton pour appliquer l'option de démarque sélectionnée. Tout fonctionne bien, mais j'obtiens ces erreurs de console dont je souhaite qu'elles disparaissent.

Ils sont tous semblables à ceci :

Failed to resolve component: md-linedivider
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Markdowntoolbar> 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__bounceOutUp" mode="out-in" > 
  at <RouterView> 
  at <App> 
  at <Bodycomponent> 
  at <App>

Cela signifie que les éléments md-linedivider doivent être exclus de la résolution des composants via compilerOptions.isCustomElement. J'ai cherché une solution et je n'ai trouvé que celle-ci, mais je n'ai pas vue.config.js dans mon projet Laravel pour l'appliquer. J'ai essayé de le faire dans webpack.mis.js et app.js sans succès.

Est-ce que quelqu'un sait ?

Answer 1

Pour Nuxt3, vous pouvez définir la valeur dans nuxt.config.ts comme indiqué ci-dessous.

export default defineNuxtConfig({
  vue: {  
    compilerOptions: {
      isCustomElement: (tag) => ['lite-youtube'].includes(tag),
    },
  }
})

Answer 2

Essayez-le dans votre webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js').vue({
  options: {
    compilerOptions: {
      isCustomElement: (tag) => ['md-linedivider'].includes(tag),
    },
  },
});

---

Mise à jour 4.8.22 - Pour les projets Vite : vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})