How to mount a vue component?

Question

I normally import my components like so:

Vue.component('comments', require('./components/Comments.vue'));

But I wish to manually mount the .vue file depending on a condition. The docs state:

var MyComponent = Vue.extend({
    template: '<div>Hello!</div>'
})

var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

But how do I mount a component in a separate vue file?

Answer 1

Don't manually mount components, it's generally only useful in testing and certain circumstances where you can only mount after an element becomes available (i.e. when integrating with legacy code).

In the case of single file components, your base component is already mounted so Vue will handle this for you. In your case you should use v-if which only mounts the component when the condition is met; you don't have to do it manually.

Here's the JSFiddle: https://jsfiddle.net/5p3nq001/