title: Throw an exception from a Vue component and prevent any further processing
body: <p>I’m writing Vue components and I would like to throw an exception when one of the properties are missing or invalid, also, I would like to prevent Vue from rendering the template and stop any further processing to a point where the template won't be rendered and finally added to the DOM.</p>
  
  <p><strong>So here is a slimmed down version of one of the components I wrote:</strong></p>
  
  <pre><code>&lt;script lang="ts"&gt;
  import { Component, Vue, Prop } from "vue-property-decorator";
  
  @Component({
      components: {}
  })
  export default class Checkbox extends Vue {
      @Prop() public id?: string;
  
      public mounted() {
          if (this.id == null) {
              this.$el.remove();
              throw new Error("The id property is missing.");
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, this works but it has a drawback because it requires removal of the element from the DOM and this makes testing harder for the following reasons:</p>
  
  <ol>
  <li><p>When the component is mounted without an id it throws an exception, as I intended.</p></li>
  <li><p>Because I throw an exception from the <code>mounted</code> lifecycle hook method I can't mount the component and get an instance to check whether the element was removed and to an extent this doesn't make sense to me.</p></li>
  </ol>
  
  <p><strong>Here is the actual test:</strong></p>
  
  <pre><code>describe("When the id property is not assigned", () =&gt; {
      it("then the checkbox should throw an exception", () =&gt; {
          expect(() =&gt; shallowMount(Checkbox)).to.throw(); // works fine as expected.
      });
  
      it("then the checkbox should not exist", () =&gt; {
          const wrapper: VueWrapper = shallowMount(Checkbox); // throws because we didn't provide any id, again, as expected.
  
          /* This is what I would like to do but I don't get an instance back so obviously I can't do it. */
          const checkbox = wrapper.vm.$el; 
          expect(checkbox).to.not.exist;
      });
  });
  </code></pre>
  
  <p>I’ve tried to throw the exception from the <code>created</code> lifecycle hook method as opposed to <code>mounted</code> but it doesn’t stop Vue from adding the element to the DOM.</p>
  
  <p>Just to clarify I wrote in the test that "this is what I would like to do" but really what I would prefer is not to remove the element at all and prevent any insertion of the rendered component into the DOM, this way I wouldn't even need to test for it. </p>