VueJS Getting Started

Let's get started with VueJS!

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<template id="commit-chart">
  <div class ="container bordered">
    <div class="row">
      <div class="col-md-12">
      </div>
    </div>
   </div>
</template>
<div id="root">
    <commit-chart :data="chartOptions"></commit-chart>
</div>

JavaScript

Vue.component('commit-chart', {
 template: '#commit-chart',
 props: ['data']
});

new Vue({
  el: "#root",
	data: function() {
    return {
      chartOptions: {
        labels:  ['pizza', 'lasagne', 'Cheese'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3],
          backgroundColor: [
                'rgba(10, 158, 193, 1)',
                'rgba(116, 139, 153, 1)',
                'rgba(43, 94, 162, 1)',

            ],
            borderColor: [
              'rgba(44, 64, 76, 1)',
              'rgba(44, 64, 76, 1)',
              'rgba(44, 64, 76, 1)',

            ],
            borderWidth: 3
        }],
    },
    };
  }
});