vue.js - Registering components locally and globally

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>

<div id="app2">
  <my-cmp></my-cmp>
  <hr>
  <my-cmp></my-cmp>
</div>

JavaScript

// Vue.component('my-cmp', {}); <- Global way

// Local way
var cmp =  {
	data: function() {
  	return {
    	status: 'Critical'
    }
  },
  template: '<p>Server Status: {{ status }} <button @click="changeStatus">change</button></p>',
  methods: {
  	changeStatus: function() {
    	this.status = 'Normal';
    }
  }
};

new Vue({
	el: '#app',
  components: { 
  	'my-cmp' : cmp
  }
});

new Vue({
	el: '#app2'
});