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>