[FIXED] How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project

Issue

I'm working on VueJS 3 inside Laravel project and I'm using a JS file which providing me with elements that I use for markdown toolbar. Basically it's a set of functions that provides me with buttons that applies the selected markdown option. Everything works just fine but I'm getting those console errors that I want them to gone.

They are all similar to this one:

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>

This is saying that md-linedivider element should be excluded from component resolution via compilerOptions.isCustomElement. And I really looked everywhere for a solution and I only found this one but I don't have vue.config.js in my laravel project to apply that to. I tried to do this in webpack.mis.js and app.js but it didn't work.

Does anyone has any idea?

Solution

Try this in your webpack.mix.js

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

Answered By - daniel

Answer Checked By - Robin (PHPFixing Admin)