npm package: @magnolia-services/vue2-editor
Description: 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.
Latest version: 2.0.2

# 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](https://docs.magnolia-cms.com/product-docs/6.2/Developing/SPA-development-and-Magnolia/Magnolia-front-end-helpers-for-SPA/Magnolia-Vue-Editor.html).

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

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

#### Example of config

```js
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

```js
<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 `EditablePage`via 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

```js
<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.