vue-morph

Adds support for breakpoint dependent modules

Vue config

Load the plugin in your entrypoint

import MorphPlugin from 'vue-morph';
 
Vue.use(MorphPlugin, {
        order: ['xs', 'sm', 'md', 'lg', 'xl'],
        breakpoints: {
            xs: [0, 543],
            sm: [544, 767],
            md: [768, 991],
            lg: [992, 1280],
            xl: [1280],
        }
    });

This will then register a new component called vue-morph

Component Usage

 
<vue-morph
    default-component="dyn-footer-category"
    :components="{'<=sm': 'dyn-accordion-item'}"
    >
    ...
</vue-morph>

Props

• defaultComponent - Defines the default component that will be rendered
• components - Defines which component should be rendered on which breakpoint
• slots - If your modules required slots, you have to add them here
• All other properties will be directly bound to the subcomponent. So properties that are required by a subcomponent, can be added to the morph component and the bound to the child

Slots

Slots are a bit tricky here. Since we get in trouble adding the same slotnames in the morph component as in the component you want to render, we have a bit of work to do here.

First, all the slots have to be available with the same name for every possible component within the components config.

After setting the slots on the morph component, you can can add the slots in the component. The slots available in the morph component are prefixed with morph- (In order to avoid naming conflicts)

Exmaple

<vue-morph
        default-component="dyn-footer-category"
        :slots="['title', 'content']"
        :components="{'<=sm': 'dyn-accordion-item'}"
>
    <h4 slot="morph-title">Foo</h4>
    <ul slot="morph-content">
        <li>Hello</li>
        <li>World</li>
    </ul>
</vue-morph>

Component: dyn-footer-category.vue

<template>
    <div class="footer-category">
        <slot name="title"/>
        <slot name="content"/>
    </div>
</template>

Listeners

update

When you fire an update event to the component, the breakpoint will be recalculated

Events

updated

updated is fired, as soon as the component changes