On Page ® Render library

With this library you can render the templates you created with On Page ® in your vue project.

Quick start

Install the package:

npm install onpage-render
# or
yarn add onpage-render

Declare the component in your main.ts:

import { OnPageComponent } from 'onpage-render'

app.component('OnPageComponent', OnPageComponent)

Almost done!

To include a render in your project, you just need an API token and a component ID. Once you have this information at hand, just include the OnPageComponent in your project as follows:

<OnPageComponent
  token="MY-API-TOKEN"
  :component_id="123"
  :params="{}"
  :lang="en"
/>

Props

The accepted props are:

• token: authentication token used to access onpage-js
• component_id: the id of the component to be rendered
• params (optional): eventual params needed by the component
• lang (optional): set the language used to render the component if not provided it'll use the default Schema language

Advanced usage

The OnPageComponent will work most of the times, but if you need more control over how the schema or the render are loaded, you can instanciate a Render yourself and pass it to the OnPageRender component.

<template>
  <OnPageRender v-if="render" :render="render" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Render, OnPageRender, loadDesignerStore } from 'onpage-render'
import { Api } from 'onpage-js'

export default defineComponent({
  components: {
    OnPageRender,
  },
  data() {
    return {
      render: undefined as Render | undefined,
    }
  },
  async created() {
    // Initialize On Page API
    const api = new Api(<company>, <token>)

    // Download the schema
    const schema = await this.api.loadSchema()

    // Download the designer store
    const store = await loadDesignerStore(this.api)

    // Initialize a render instance
    this.render = new Render(
      schema,
      store,
      component: <component_id>, // the component you want to render
      {}, // the parameters
      'en' // the language to use for the render
    )
  }
})
</script>

Important Notes

Functions, classes and interfaces not documented here are subject to change and therefore should not be used.