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

Question

I'm developing VueJS 3 in a Laravel project, and I'm using a JS file that provides me elements for a Markdown toolbar. Basically it's a set of functions that gives me a button to apply the selected markdown option. Everything works fine, but I get those console errors that I want them to go away.

They are all similar to this:

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 means that md-linedivider elements should be excluded from component resolution via compilerOptions.isCustomElement. I did look around for a solution and only found this, but I don't have vue.config.js in my laravel project to apply it. I tried doing this in webpack.mis.js and app.js without success.

Does anyone know?

Answer 1

For Nuxt3, you can set the value in nuxt.config.ts as shown below.

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

Answer 2

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),
    },
  },
});

---

Update 4.8.22 - For Vite projects: 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),
        }
      }
    })
  ]
})