Destroying a Vue instance

In this short post, I want to show you how you can destroy a Vue instance. Usually you won’t need to do this yourself, though. When we get into talking about components, we will see that it is better to control the lifecycle of child components by using directives such as the v-if directive. That’s for a future post, though, but I just want you to know that you typically won’t need to worry about manually destroying Vue instances. So unless there is a good reason for you to do this, then you don’t have to worry about it. Nevertheless, I am going to show you how to do it in case you will need it.

<div id="app">
  <h1>Counter: {{ counter }}</h1>
  <button @click="counter++">Increase Counter</button>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		counter: 1
	}
});

So I have a Vue instance with a counter data property and a button which increases the number stored within this property. After five seconds, I want to destroy the Vue instance just so we can see that the button stops responding to the click event.

setTimeout(function() {
	vm.$destroy();
}, 5000);

If you start clicking the button, you will see that the counter stops increasing after five seconds. At this point, the Vue instance has been completely destroyed.

Notice that while the Vue instance is now gone, the DOM is left as is. So the DOM will be left as it was at the point of destroying the Vue instance.

That’s all it takes to destroy a Vue instance. No more, no less.