Using multiple Vue instances on the same page

Published on April 18, 2017 by

We have created a lot of Vue instances in this course so far, but did you ever wonder if you could use multiple Vue instances on the same page? Indeed you can, as you can probably tell based on the below example.

<div id="vm1">
  <h1>{{ name }}</h1>
</div>

<div id="vm2">
  <button @click="showName">Show name</button>
</div>
var vm1 = new Vue({
	el: '#vm1',
	data: {
		name: 'Vue Instance #1'
	}
});

var vm2 = new Vue({
	el: '#vm2',
	methods: {
		showName: function() {
			alert("The name of the other Vue instance is: ");
		}
	}
});

setTimeout(function() {
	vm1.name = 'Hello from the other side!';
}, 2000);

I have slightly expanded on the example from the previous post and added a new Vue instance. This instance refers to an element within the template which simply contains a button which has a simple click event listener. This listener just displays an alert, which we can see if we click the button.

As you can see, we have successfully added two Vue instances to the same page, which operate on different parts of the DOM. This is very useful for adding widgets to a page, for instance. Perhaps one Vue instance would be responsible for a contact form on the right hand side of the page, and another would control the navigation menu.

But what if I want this alert to display the name of the other Vue instance, i.e. its data property?

I can use the same approach as in the previous post and simply refer to its name directly on the vm1 variable.

alert("The name of the other Vue instance is: " + vm1.name);

But wait a minute, is this approach really such a great idea? If you think about it, wouldn’t it be better if each Vue instance was self-contained and didn’t rely on other Vue instances? Sure, this would be ideal. Luckily Vue contains something called components, which we will talk about in details later in this series.

The reason I mention this, is just that I want to strongly discourage that you make use of an approach like the one I have just showed you. Even if you think it’s not a big problem at a small scale, it can quickly lead to code that is very hard to maintain. Because your Vue instances would no longer be isolated from each other, it can be very hard to figure out the dependencies between them, and changing something in one Vue instance could easily break another. We will take a look at a proper approach later in the course, but for now, I just want to recommend that you stay away from this approach.

That being said, it’s perfectly valid that you include multiple Vue instances on the same page – there is nothing wrong with that, as long as they are self-contained. Also note that it’s still fine to access Vue instances after they have been initialized, because this doesn’t break the principle of loose coupling, and they can therefore still be isolated from each other.

Now that we’ve seen how multiple Vue instances can easily be used on the same page, let’s dive deeper into how Vue.js proxies our data.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

2 comments on »Using multiple Vue instances on the same page«

  1. Tom Russell

    Isn’t it kind of doggy style to allow the DOM tags to declare to which Vue instance attributes are scoped? Shouldn’t it instead be required to specify “{{ vm1.name }}”?

  2. Pedro Henrique

    Good article, thanks!

Leave a Reply

Your e-mail address will not be published.