vue-magnolia v1.0.6
This package has been deprecated
Version no longer supported.
See Vue x Magnolia implementation here https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse.
vue-magnolia
Manage Vue app with Magnolia.
Example code using this package can be found here:
https://git.magnolia-cms.com/projects/DEMOS/repos/demo-headless-magnolia-dev/browse
This is an incubator(link to https://wiki.magnolia-cms.com/display/SERVICES/Incubator) module from Magnolia Professional Services. This feature will be productized in Q2 2020.
Requirements
- Magnolia DX Core
- magnolia-services-licence-1.0.2 module
- magnolia-headless-rendering-1.0.5 module
You will need your Magnolia account credentials to download modules.
Getting started
vue-magnolia exposes 2 components to be used in your app:
- Page
- Area
Each represents corresponding entities in Magnolia. Magnolia sees those components as wrappers allowing green bars
to be added.
vue-magnolia requires magnolia.config.js
file in the root folder of your project. This is the main configuration file for the package.
magnolia.config.js
Configuration file consists of:
- templates - used to map Magnolia templates to Vue components
- getChildren - Defines how
Area
retrieves children nodes. Used only when the default (props['@nodes'].map(node => props[node])
) format of delivery endpoint is modified.
Example of magnolia.config.js
import Home from './src/pages/Home';
import Ad from './src/components/Ad';
const config = {
templates: {
// Pages
'news-demo-templates:pages/Home': Home,
// Components
'news-demo-templates:components/Ad': Ad,
},
getChildren: (areaProps) => areaProps['@nodes'].map((node) => areaProps[node]),
};
export default config;
Page
component
Page component will look for mgnl:template
prop and find corresponding Vue component with help of magnolia.config.js
.
If component exists it renders the component passing everything down as props.
In Magnolia author Page
component will add Magnolia's comments that are required to render green bars
.
It requires
page
prop consisting page object representation returned from REST endpoint.
Example
<template>
<Page v-if="page" v-bind:page="page" />
</template>
<script>
import Page from "vue-magnolia/Page";
const isInAuthor = window.self !== window.top && window.singlePageConfig;
export default {
name: "PageWrapper",
components: {
Page
},
data: function() {
return {
page: isInAuthor ? window.singlePageConfig.content : undefined
};
},
methods: {
getPage() {...}
},
mounted() {
this.getPage();
}
};
</script>
Area
component
Area component will loop over all of it's nodes.
If node is a Magnolia component it will look for mgnl:template
prop of that node and find corresponding Vue component with help of magnolia.config.js
.
If component exists it renders the component passing node properties down as props.
In Magnolia author Area
component will add Magnolia's comments that are required to render green bars
.
It requires
area
prop consisting area object representation returned from REST endpoint.
Example with main
area
<template>
<div class="Default">
<Area v-if="main" v-bind:area="main" />
</div>
</template>
<script>
import Area from "vue-magnolia/Area";
export default {
name: "Default",
components: {
Area
},
props: ["main"]
};
</script>