VueJS - DOM template parsing and custom elements

Question

basically I need VueJS to warn me about unregistered components when in DOM template parsing mode. It currently looks like Vue is not caring about custom HTML when using DOM templates, meanwhile errors are correctly issued when using single-file components, string templates and x-templates (as per the docs).

One simple way to reproduce the issue is to register a component:

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

and then mount a simple Vue instance

new window.Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('mounted')
  }
})

where, in the DOM under the #app element, there is an unregistered element, as in

<div id="app">
  {{text}}
  <existing></existing>

  <!-- Should give an error -->
  <non-existing></non-existing>
</div>

I've prepared a CodePen to reproduce this simple environment.

thanksd · Accepted Answer · 2019-05-06 17:57:46Z

1

Vue does throw a [Vue warn] error in this case.

However, you're using a production build of Vue in your CodePen example (vue.min.js), which suppresses these warnings.

Here's an example using a non-production build of Vue:

Vue.config.devtools = false;

Vue.component('existing', {
  template: `
    <div>
      <p>Existing component</p>
    </div>
  `
})

new Vue({
  el: '#app',
  data() {
    return {
      text: 'text'
    }
  },
  mounted() {
    console.log('root mounted')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{text}}
  <existing></existing>
  
  <!-- Should give an error -->
  <non-existing></non-existing>
</div>

edited May 6, 2019 at 17:57

answered May 6, 2019 at 17:52

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ibanjo Over a year ago

Actually that was (trivially) it. Thank you!

Collectives™ on Stack Overflow

VueJS - DOM template parsing and custom elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related