How to prevent Vue error "Unknown custom element" for namespaced HTML elements

Question

I use Vue in an environment where I have to output namespaced elements, let's say <foo:aside> for example. Those elements are currently not even handled by Vue in any way (binding values to attributes, adding event handlers, nothing like that), they are just present in the templates. However, they may contain children that must be handled and my contain mustache syntax to display variables, etc., so v-pre will disable those and is therefore not a solution for my usecase.

Everything works fine, but the console is flooded with the following error:

[Vue warn]: Unknown custom element: <foo:aside> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.

The namespace is defined on the root element via xmlns:foo, but that shouldn't make a difference to Vue anyway.

Is there any way to prevent this, by somehow telling Vue to ignore namespaced elements or at least defining which namespaces should be allowed on ordinary HTML elements?

Answer 1

Thanks to the linked possible duplicate (though I disagree that it's a duplicate due to applying to a whole namespace and requiring child elements to work) and Silencesys' comment, I ended up with this solution:

Vue.config.ignoredElements = [/^foo:/];

From Vue 2.5 onwards, you can use regular expressions for ignoredElements, and that's the perfect way to ignore a whole namespace without having to add every possible tag name, while still preserving Vue functionality on those elements and their child elements.

Answer 2

You can use v-pre to tell vue that the element should be ignored, check vue.js api.

For example:

<foo:aside v-pre>