Vue.js Multiple Vue Instances

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Vue.js allows you to work with multiple instances of Vue.js, and even interact between them. Here's how:

Working With Multiple Vue.js Instances

This is the "vue-app-one" div.

{{title}}


This is the "vue-app-two" div.

{{title}}



<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

</head>
<body>

<h3>Working With Multiple Vue.js Instances</h3> <div id="vue-app-one" style="border: thin solid silver; padding: 5px;"> This is the "vue-app-one" div. <h3>{{title}}</h3> </div> <div id="vue-app-two" style="border: thin solid silver; padding: 5px;"> This is the "vue-app-two" div. <h3>{{title}}</h3> <button v-on:click="changeTitle()"> Click me to update Vue One's title. </button> </div> <br><br> <script> var one = new Vue({ el:'#vue-app-one', data: { title: 'This is the Vue App One instance.' }, computed: { greet:function(){ return "Hello from vue-app-one"; } } }); var two = new Vue({ el:'#vue-app-two', data: { title: 'This is the Vue App Two instance.' }, methods: { changeTitle:function(){ one.title="Vue Instance One's title has been updated."; } }, computed: { greet:function(){ return "Hello from vue-app-Two"; } } }); </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-multiple-vue-instances/