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
;; const config = templates: // Pages 'news-demo-templates:pages/Home': Home // Components 'news-demo-templates:components/Ad': Ad areaProps'@nodes'; ;
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>; const isInAuthor = windowself !== windowtop && windowsinglePageConfig; name: "PageWrapper" components: Page { return page: isInAuthor ? windowsinglePageConfigcontent : undefined ; } methods: {...} { this; };</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>; name: "Default" components: Area props: "main";</script>