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

user_17917955 0
Viewed 22038

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?

vuejs3 laravel vue.js compiler-errors javascript
6 Answers

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:

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

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

In my case, I had a global component named view, but i used it as View怂 That's why I got the warning.

user_76209350

Also i have faced this mistake in Vue3, in the code i wrote component : but it must be components . I think it gives that warning in typing errors.

user_194690310

vue.js with vite:

in your vite.config.js/ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag.startsWith('ion-') // (return true)
          }
        }
      }
    })
  ]
})

With a Vue.js that includes the runtime compiler (aka "full build") you can do it this way:

in your main.js/ts

// treat all tags starting with 'ion-' as custom elements
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-') // (return true)
}

see vue3 docs on this topic: https://vuejs.org/api/application.html#app-config-compileroptions

user_95880920

This library deals with custom components, very straightforward: https://github.com/antfu/unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})
user_21484180

TL;DR

Vue likes to know if the developer use custom Elements. For this case you can use the Vue compnents property.

import MdLinedivider from "../path/file.vue";

export default {
  components: {
    MdLinedivider
  },
  ...
}

Afterwards then you can use: <md-linedivider /> or <MdLinedivider /> Tag in your HTML.

user_148071110
Related