Vue ignore custom component tag

Question

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

Here is my HTML:

<div id="app">
  ...
  <gcse:search></gcse:search>
  ...
</div>
<script type="text/javascript">
    new Vue({ el: '#app' })
</script>

As you can see, I have a "gcse input" placed inside of my vue application.

Therefore I am getting a warning:

[Vue warn]: Unknown custom element: <gcse:search>

So my question is how it possible to stop attempting to initialize this custom component in Vue.js?

Thanks in advance.

Answer 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:search v-pre></gcse:search>

---

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

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