Component Shifter

With componentShifter() you can load (with Vue.ajax) and render your Vue template (html) in your application by dynamic & async Vue.component(). You can also add components and run them nested.

this.componentShifter(object configurations[, function success] [,function error])

Important benefits:

1. You can organize the async and dynamic components by typing less. Check out the events for listeners.
2. You can easily prepare common callbacks and listeners for dynamic components.
3. With the keepAlive option caches the active components. Thus, when inactive components are called, they are loaded quickly without consuming data.
4. With the library option you can create dynamic options for dynamic component instances (data, props, computed, ..., etc).
5. And supports Vue.ajax's all features (history, data, title, ..., etc).

Basic Example

this.componentShifter({
    is: {componentHolder: componentName},
    url: url,
}, function() {
    console.log("Component changed!");
});

Options

Property	Required	Type	Description
is	Yes	Object	Component holder (key) and unique component name (value).
url	Yes	String	Component resources url.
keepAlive	No	Boolean or object	Caches the inactive components. Default: false
library	No	Object	Options of the new component instance (data, props, ..., etc)

keepAlive options

Property	Required	Type	Description
include	No	Array, string (comma-delimited), regex	Only components with matching names will be cached.
exclude	No	Array, string (comma-delimited), regex	Any component with a matching name will not be cached.
max	No	Number	The maximum number of component instances to cache.

Callbacks

Property	Required	Type	Description
success	No	Function	Your custom callback on success. (Second argument)
error	No	Function	Your custom callback on error. (Third argument)

Detailed example

HTML

<div id="app">
    <a href="/page-1" @click.prevent="openPage('page1', '/page-1', 'Page 1')">Page 1</a>
    <a href="/page-2" @click.prevent="openPage('page2', '/page-2', 'Page 2')">Page 2</a>
    <a href="/page-3" @click.prevent="openPage('page3', '/page-3', 'Page 3')">Page 3</a>

    <!-- Your container component -->
    <component :is="pageComponent"></component>
</div>

Vue.js

new Vue({
    el: "#app",
    data() {
        return {
            pageComponent: null, // Component holder
            pageLoaded: false
        }
    },
    methods: {
        openPage(componentName, url, title) {
            
            // Calling componentShifter
            this.componentShifter({
                is: {pageComponent: componentName},
                url: url,
                keepAlive: {
                    max: 10,
                    
                    // Another usages: "page1,page2" and /page1|page2/
                    include: ["page1", "page2"],
                    
                    // Another usages: "page3,page4" and /page3|page4/
                    exclude: ["page3", "page4"]
                },
                library: {
                    data() {
                        return {
                            hasFooter: true
                        } 
                    },
                    props: ["custom"]
                }
            }, function() {
                console.log("Component changed!");
                this.pageLoaded = true;
            }, function(response) {
                console.log("Component could not be changed!", response);
                this.pageLoaded = false;
            });
            
        }
    },
    mounted() {
        if(!pageLoaded) {
            this.openPage("page1", "/page-1", "Page 1")
        }
    }
});

Component Shifter Events

componentshiftercomplete

Register a handler to be called when componentShifter() requests complete.

window.addEventListener("componentshiftercomplete", function(e) {
    console.log(e);
});

componentshiftererror

Register a handler to be called when componentShifter() requests complete with an error.

window.addEventListener("componentshiftererror", function(e) {
    console.log(e);
});

componentshifterstart

Register a handler to be called when componentShifter() requests begins.

window.addEventListener("componentshifterstart", function(e) {
    console.log(e);
});

componentshiftersuccess

Attach a function to be executed whenever an componentShifter() request completes successfully.

window.addEventListener("componentshiftersuccess", function(e) {
    console.log(e);
});