vue-morph
v1.0.1
Published
Adds support for breakpoint dependent modules
Downloads
23
Maintainers
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