Mango Page Manager


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @axelspringer/mango-pagemanager in KB


:smiley_cat: Mango Page Manager

Taylor Swift Volkswagen TypeScript MIT license

Getting Started

requires a node version >= 6 and an npm version >= 3.x.x

we do provide a help command to display all possible arguments

# Install the base package and the plugin (could also be global -g)
npm i @axelspringer/mango-pagemanager


Create a pagemanager.ts file with the following content.

import Vue from 'vue'
import IFrame from '../components/post'
import MangoPageManager from '@axelspringer/mango-pagemanager'

// use pagemanager

export default new PageManager({
  blocks: [
      pageBlock: 'inline_frame',
      component: iFrame

This configures the Page Manager to map a page block to a component.

import { Vue, Component } from 'vue-property-decorator'
import HOME_QUERY from '../../graphql/home.graphql'

export default class Home extends Vue {

  public blocks = []

   * Render function
   * @param h
  public render() {
    return (
      <main class='start'>
        <pagemanager-renderer blocks={this.blocks || []} />

The pagemanager exposes $pageblock on the component with the page block data to render. You have to add a name property. This is the property on which the Page Manager data and blocks are matched.

import { Vue, Component } from 'vue-property-decorator'

export function renderInnerHtml(h, atts) {
  return atts.map(att => h('iframe', { attrs: att.value }))

  name: 'iFrame'
export default class iFrame extends Vue {
  public render(h) {
    if (!this.$pageblock) return null

    return (<div>{renderInnerHtml(h, this.$pageblock)}</div>)



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.