This blog is all about creating Vis Timeline as Vue‘s component. First of all, Vue.js is a MVVM ( Model View – View Model ) framework which is intuitive, fast and composable for building interactive interfaces. And Vis Timeline is great library to creating timeline and timetable sort of web application.

So lets get started.

var Vue = new Vue({
    el: 'body',
})

Here, We’ve made a Vue instance and bound it with body element.

Now Lets Create our First Component

var VisTimeLine = Vue.extend({
    template: '<div id="visualization"></div>',
    props: ['visData'],

    ready: function () {

        var container = document.getElementById('visualization');
          var items = new vis.DataSet(this.visData);
          var options = {};
          var timeline = new vis.Timeline(container, items, options);
    }
});
Vue.component('vis-time-line',VisTimeLine);

Here, I’ve used Vue.extend() while creating component and in bottom used Vue.component('vis-time-line',VisTimeLine) to register the component.
NOTE Always make sure to include Component.js file before main.js file.

Github Repo