open-index/open-npm huggingface dataset:
npm package: @magnolia-services/vue-editor
Description: Magnolia Vue Editor (pre-release services)
Author: Magnolia International Ltd.
Latest version: 0.1.1

# 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:

```js
<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](https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/vue-editor/CHANGELOG.md) file.