Vue Ignore Custom Component Tag

On my site I am using Google CSE (custom search engine by google). Here is my HTML:

... ...

Solution 1:

Vue thinks that you are trying to load a Vue component named gcse:search.

In order to ignore this tag, add the v-pre directive:

<gcse:searchv-pre></gcse:search>

---

Or, you could add the gcse:search tag to Vue's list of ignoredElements:

Vue.config.ignoredElements = ['gcse:search']

Solution 2:

In addition to the answer of thanksd, you can ignore the unknown tags by adding these tags in the ignoredElements property:

Vue.config.ignoredElements = ['gcse:search']

And you can also ignore these tags by using regex instead of using strings:

Vue.config.ignoredElements = [/gcse:*/]

This is very useful if you want to ignore more tags/components with a specific pattern. In this case, you could ignore all tags starting with "gcse"

Solution 3:

In Vue 3 it's different.

There are two ways to configure it.

1. If You are using runtime compiler

Note that this will not work if you are usingruntime-only build

const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')

2. Using runtime-only build

Here you have to add a rule in webpack.config.js for vue-loader

rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('ion-')
      }
    }
  }
  // ...
]

Extra

if you are using laravel-mix the pervious ways will not work for you, the right way is to pass options in vue function of laravel-mix

mix.js('resources/js/app.js', 'public/js')
 .vue({
 options: {
  compilerOptions: {
   isCustomElement: tag => tag.startsWith('ion-')
  }
 }
})

References:

1. https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-compileroptions-iscustomelement
2. https://v3.vuejs.org/guide/migration/custom-elements-interop.html#_2-x-syntax
3. https://vue-loader.vuejs.org/guide/#manual-setup

Share