@magnolia-services/vue-editor

Magnolia Vue Editor

Note: This is a pre-release. Don't use this version for production yet.

This library facilitates integration of front-end projects with Magnolia Page Editor.

Usage

1. Install the package:

npm install --save @magnolia/vue-editor

2. Load Vue Plugin in your Application

import VueEditor from "@magnolia/vue-editor";
Vue.use(VueEditor);

2. Connect to rest endpoints and use <EditablePage> directive in your component:

<template>
  <EditablePage
    v-if="content"
    v-bind:content="content"
    v-bind:config="config"
    v-bind:templateDefinitions="templateDefinitions"
  />
</template>

<script>
import config from "../magnolia.config";
import { helper, EditableMixin } from "@magnolia/vue-editor";

export default {
  name: "PageLoader",
  mixins: [EditableMixin],
  data: function() {
    return {
      content: undefined,
      config,
      inEditorEdit:helper.isEditorEdit,
      templateDefinitions: {}
    };
  },
  methods: {
    async loadPage() {
      const contentResponse = await fetch(getContentUrl());
      const content = await contentResponse.json();

      if (helper.isEditMode(this.$route.fullPath)) {
        const templateDefinitionsResponse = await fetch(
          process.env.VUE_APP_REST_TEMPLATE_DEFINITION +
            content["mgnl:template"]
        );
        const templateDefinitions = await templateDefinitionsResponse.json();
        this.templateDefinitions = templateDefinitions;
      }

      this.content = content;
    }
  },
  mounted() {
    this.loadPage();
  }
};
</script>

3. Render areas inside your components using <EditableArea> directive and add mixin EditableMixin to your component:

<h2>Primary Area</h2>
<div className="col-12">
  <EditableArea :content="mainAreaContent" />
</div>

You can change the surrounding element with elementType property e.g. <EditableArea :content="mainAreaContent" elementType="ul" />

Changelog

See the CHANGELOG.md file.