Vis Js as Vue Js’ Component
Programming #VueJS# VisJS

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

less than a minute read 17th Jun 2016

About

A entrepreneur, running an early stage venture, VizitDoc and a MVP-First Service Based Companay ThecodeWork.

A dreamer, having care for alternative education.

Archives - 1

  • Code

    20 Articles

    List of code snippet and articles I wrote when I started blogging in early 2016 😃