How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
P粉739942405
P粉739942405 2024-03-25 17:01:01
0
2
685

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?

P粉739942405
P粉739942405

reply all(2)
P粉019353247

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),
    },
  }
})
P粉529581199

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),
        }
      }
    })
  ]
})
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template