Magnolia Vue 2 Editor

This page describes the installation, components and functions of the Magnolia Vue Editor — a lightweight, fully-featured library connecting Vue projects with the WYSIWYG authoring experience of the Magnolia Pages app.

Magnolia Vue 2 Editor only supports Vue 2.
For Vue 3 version visit this site.

Installation

To install the editor, open the command prompt and enter the following command.

npm install @magnolia-services/vue2-editor

Reference

getContext(requestUrl)

Returns the context in which site is rendered.

For page run inside Magnolia Pages App edit returns edit.

For page run inside Magnolia Pages App preview returns preview.

Returns undefined for all other cases.

<EditablePage>

The wrapping component for Magnolia-managed page content.

It determines which Vue component to render based on the mgnl:template value of the content and the componentMappings supplied to the EditablePage config property.
Page dialog properties and areas are passed to the component as props.

In the editor view of the Pages app, it will add the annotations that are required to render the green bars with the authoring UI.
The annotations are added as HTML comments.

Properties

| Property | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | context | Returns the context in which site is rendered. | | content | Page content response coming from Magnolia Delivery API. | | config | Configuration object containing the componentMappings object with mappings between the mgnl:template values and Vue components. | | templateAnnotations | Template information required for the Page Editor to create the authoring UI (the green bars). |

Example endpoint definition

$type: jcrDeliveryEndpoint_v2
workspace: website
limit: 100
systemProperties:
  - mgnl:template
depth: 10
nodeTypes:
  - mgnl:page
childNodeTypes:
  - mgnl:area
  - mgnl:component

Example of config

import Home from './pages/Home.vue';

const config = {
  componentMappings: {
    'spa:pages/Home': Home,
  },
};

Example of Template annotations request

<MAGNOLIA_INSTANCE>/.rest/template-annotations/v1/<PAGE_PATH>

https://demo.magnolia-cms.com/.rest/template-annotations/v1/travel

Example

<template>
  <EditablePage
    v-if="page"
    v-bind:context="context"
    v-bind:content="page"
    v-bind:config="config"
    v-bind:templateAnnotations="templateAnnotations"
  />
</template>

<script>
import { EditablePage, getContext } from '@magnolia-services/vue2-editor';
import Home from './components/pages/Home.vue';

const config = {
  componentMappings: {
    'spa:pages/Home': Home,
  },
};

export default {
  name: 'App',
  components: {
    EditablePage,
  },
  data() {
    return {
      page: null,
      templateAnnotations: {},
      config,
    };
  },
  async mounted() {
    this.context = getContext(window.location.href);

    const pageRes = await fetch('http://localhost:8080/magnoliaAuthor/.rest/delivery/pages/v1/vue-minimal');
    const page = await pageRes.json();

    if (this.context) {
      const templateAnnotationsRes = await fetch(
        'http://localhost:8080/magnoliaAuthor/.rest/template-annotations/v1/vue-minimal'
      );
      const templateAnnotations = await templateAnnotationsRes.json();

      this.templateAnnotations = templateAnnotations;
    }

    this.page = page;
  },
};
</script>

<EditableArea>

The wrapping component for areas.

The component can be used only inside the Vue components that are instantiated by EditablePage. That is, the Vue component must be in the componentMappings object supplied to the EditablePagevia its config parameter.

The area component loops over all of its children components.

EditableArea renders Vue components for each component node in its content. It determines which component to render based on the mgnl:template value of the node and the componentMappings supplied to the EditablePage config property. The properties of each component and areas (if any) are passed as props to the child components.

In the editor view of the Magnolia Pages app, it will add the annotations that are required to render the green bars with the authoring UI. The annotations are added as HTML comments.

Properties

| Property | Description | | --------- | --------------------------------------------------------------------------------------------------- | | content | Area content that is passed as a property to the parent component where the EditableArea is used. |

Example

<template>
  <div>
    <EditableArea v-if="main" v-bind:content="main" />
  </div>
</template>

<script>
import { EditableArea } from '@magnolia-services/vue2-editor';

export default {
  name: "Home",
  components: {
    EditableArea
  },
  props: ["main"]
};
</script>

<EditableComponent>

The wrapping component for components.

EditableComponent component is used by EditableArea.

The component determines which Vue component to render based on the mgnl:template value of the content and the componentMappings supplied to the EditablePage config property. Component dialog properties and areas are passed to the component as props.