Package Exports

vue-morph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-morph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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