Vue.js Component Inheritance Example

gistfile1.vue

<!-- Markup -->
<!-- Components get injected here dynamically -->
<component
    v-for="w in dashboardWidgets"
    :is="w.type">
</component>

<!-- Base Widget Template -->
<script type="text/x-template" id="template-base">
    <div class="grid-item widget {{widgetName}}">
        <div class="grid-inner">
            <div class="grid-header">
                <a href="" class="widget-edit"><span class="ss-icon">gear</span></a>
                <h3>{{title}}</h3>
            </div>
            <div class="grid-body">
                <partial :name="widgetView"></partial>
            </div>
        </div>
    </div>
</script>

<!-- Countries Widget View -->
<script type="text/x-template" id="widget-template-top-countries">
        <ul class="countries">
            <li v-for="country in countries" class="project-row clearfix">
                {{country.name}}
            </li>
        </ul>
</script>



/*
 * Base Dashboard Widget
 */
var DashboardWidget = Vue.component('base-widget', {
    template: '#template-base',
    data: function() {
        return {}
    },
    ready: function() {
        this.load();
    }
});

/*
 * Top Countries Widget
 */
Vue.partial('widget-view-top-countries', document.getElementById('widget-template-top-countries').innerHTML);
var TopCountries = DashboardWidget.extend({
    data: function() {
        return {
            title: 'Top Countries',
            widgetView: 'widget-view-top-countries',
            widgetName: 'dashboard-countries',
            countries: []
        };
    },
    methods: {
        load: function() {
            var self = this;
            $.getJSON('/service/countries', {
                count: 4,
				sort: 'alpha'
            }, function(pData) {
                self.countries = pData.countries.slice(0, 4);
            });
        }
    }
});
Vue.component('widget-top-countries', TopCountries);


/**
 * MAIN APP
 */
var MainApp = new Vue({
    // We want to target the div with an id of 'events'
    el: '#app',
    data: {
        dashboardWidgets: [{
            type: 'widget-top-countries'
        }, {
            type: 'widget-top-activity'
        }]
    },

    // Anything within the ready function will run when the application loads
    ready: function() {
        console.log('Dashboard Loaded.')
    },

    // Methods we want to use in our application are registered here
    methods: {

    }
});