All Projects → ayamflow → vue-loader-mixin

ayamflow / vue-loader-mixin

Licence: MIT license
Loader mixin for Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language

vue-loader-mixin

Preloader mixin for Vue.js, internally using resource-loader.

Installation

npm i vue-loader-mixin --save

Usage

var loaderMixin = require('vue-loader-mixin');

var root = new Vue({
    mixins: [loaderMixin],

    events: {
        'load:progress': 'onLoadProgress',
        'load:complete': 'onLoadComplete'
    },

    // Static manifest
    manifest: [
        // ...
    ],

    created: function() {
        // If you need to dynamically create the manifest
        this.$options.manifest = [
            // ...
        ];
    },

    ready: function() {
        // Explicit call
        this.load();
    },

    methods: {
        onLoadProgress: function(event) {
            this.progress = event.progress;
        },

        onLoadComplete: function(event) {
            this.progress = 1;
            // You can use the load:complete event with the `wait-for` directive
        }
    }
});

Events

This mixin emits load:start, load:progress, load:complete and load:error on the target vm.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].