Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @bloomreach/vue-sdk with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. var vueSdk = require("@bloomreach/vue-sdk")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bloomreach/vue-sdk v14.3.3

Bloomreach SPA SDK for Vue.js

Bloomreach Vue.js SDK

NPM License

Bloomreach Vue.js SDK provides simplified headless integration with Bloomreach Experience Manager for Vue-based applications. This library interacts with the Page Model API and Bloomreach SPA SDK and exposes a simplified declarative Vue.js interface over the Page Model.

What is Bloomreach Experience Manager?

Bloomreach Experience Manager (brXM) is an open and flexible CMS designed for developers and marketers. As the original headless CMS, brXM allows developers to build quickly and integrate with the systems. While it’s built for speed, it also provides top-notch personalization and channel management capabilities for marketers to drive results.

Features

Get Started

Installation

To get the SDK into your project with NPM:

npm install @bloomreach/vue-sdk

And with Yarn:

yarn add @bloomreach/vue-sdk

Usage

The following code snippets render a simple page with a Banner component.

src/main.ts

In the app's entry file, it needs to import and install the BrSdk plugin to make the SDK components available globally.

import Vue from 'vue';
import { BrSdk } from '@bloomreach/vue-sdk';

Vue.use(BrSdk);

// ...

src/App.vue

In the App component, it needs to pass the configuration and brXM components mapping into the br-page component inputs.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template v-slot:default="props">
      <header>
        <a :href="props.page.getUrl('/')">Home</a>
        <br-component component="menu" />
      </header>
      <section>
        <br-component component="main" />
      </section>
      <footer>
        <br-component component="footer" />
      </footer>
    </template>
  </br-page>
</template>

<script>
import Banner from './components/Banner.vue';

export default {
  data() {
    return {
      configuration: { /* ... */ },
      mapping: { Banner },
    };
  },
};
</script>

src/components/Banner.vue

Finally, in the Banner component, it can consume the component data via the component prop.

<template>
  <div>Banner: {{ component.getName() }}</div>
</template>

<script>
export default { props: ['component'] };
</script>

Configuration

The br-page component supports several options you may use to customize page initialization. These options will be passed to the initialize function from @bloomreach/spa-sdk. See here for the full configuration documentation.

Mapping

The br-page component provides a way to link Vue components with the brXM ones. It requires to pass the mapping property that maps the component type with its representation.

  • The Container Items can be mapped by their labels.

    <template>
      <br-page :configuration="configuration" :mapping="mapping" />
    </template>
    
    <script>
    import NewsList from './components/NewsList.vue';
    
    export default {
      data() {
        return {
          configuration: { /* ... */ },
          mapping: { 'News List': NewsList },
        };
      },
    };
    </script>
    
  • The Containers can be only mapped by their type, so you need to use constants from @bloomreach/spa-sdk. By default, the Vue.js SDK provides an implementation for all the container types as it is defined in the documentation.

    <template>
      <br-page :configuration="configuration" :mapping="mapping" />
    </template>
    
    <script>
    import { TYPE_CONTAINER_INLINE } from '@bloomreach/spa-sdk';
    import InlineContainer from './components/InlineContainer.vue';
    
    export default {
      data() {
        return {
          configuration: { /* ... */ },
          mapping: { [TYPE_CONTAINER_INLINE]: InlineContainer },
        };
      },
    };
    </script>
    

    From within the Container component, the Container Items can be accessed via the getChildren method. This can be used to reorder or wrap child elements.

    <template>
      <div>
        <span v-for="(child, key) in component.getChildren()" :key="key">
          <br-component :component="child" />
        </span>
      </div>
    </template>
    
    <script>
    export default { props: ['component'] };
    </script>
    

    That is also possible to render children via the default slot.

    export default {
      render(createElement) {
        return createElement(
          'div',
          this.$slots.default.map((node) => createElement('span', [node])),
        );
      },
    };
    
  • The Components can be mapped by their names. It is useful for a menu component mapping.

    <template>
      <br-page :configuration="configuration" :mapping="mapping" />
    </template>
    
    <script>
    import Menu from './components/Menu.vue';
    
    export default {
      data() {
        return {
          configuration: { /* ... */ },
          mapping: { menu: Menu },
        };
      },
    };
    </script>
    

Inline Mapping

There is also another way to render a component. In case you need to show a static component or a component from the abstract page, you can use inline component mapping.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template>
      <br-component component="menu">
        <template v-slot:default="{ component, page }">
          <menu :component="component" :page="page" />
        </template>
      </br-component>
    </template>
  </br-page>
</template>

<script>
import Menu from './components/Menu.vue';

export default {
  components: { Menu },
  data() {
    return {
      configuration: { /* ... */ },
      mapping: {},
    };
  },
};
</script>

In a brXM component, it is also possible to point where the component's children are going to be placed.

<template>
  <div>
    @copy; Bloomreach
    <br-component />
  </div>
</template>

<script>
export default { props: ['component'] };
</script>

The component data in case of inline mapping can be accessed via the template context.

<template>
  <br-page :configuration="configuration" :mapping="mapping">
    <template>
      <br-component component="menu">
        <template v-slot:default="{ component, page }">
          <ul>
            <li><a :href="page.getUrl('/')">Home</a></li>
            <li v-for="(item, key) in component.getModels()" :key="key">...</li>
          </ul>
        </template>
      </br-component>
    </template>
  </br-page>
</template>

<script>
export default {
  data() {
    return {
      configuration: { /* ... */ },
      mapping: {},
    };
  },
};
</script>

Reference

The Vue.js SDK is using Bloomreach SPA SDK to interact with the brXM. The complete reference of the exposed JavaScript objects can be found here.

br-page

This is the entry point to the page model. This component requests and initializes the page model, and then renders the page root component recursively.

PropertyRequiredDescription
configurationyesThe configuration of the SPA SDK.
mappingyesThe brXM and Vue.js components mapping.
pagenoPreinitialized page instance or prefetched page model. Mostly that should be used to transfer state from the server-side to the client-side.

This component also supports a default slot transclusion. <template> from the component contents will be rendered in the root component context.

VariableDescription
componentThe root component.
pageThe current page instance.

br-component

This component points to where children or some component should be placed. br-component can be used inside br-page or mapped components only. If it contains <template> in the contents, then the template will be rendered in the context of every matched component. Otherwise, it will try to render all children components recursively.

PropertyRequiredDescription
componentnoThe component instance or a path to a component. The path is defined as a slash-separated components name chain relative to the current component (e.g. main/container). If it is omitted, all the children will be rendered.

The template context holds references to the current component and the current page instance.

VariableDescription
componentThe current component.
pageThe current page instance.

br-manage-content-button

This component places a button on the page that opens the linked content in the document editor. The button will only be shown in preview mode.

PropertyRequiredDescription
contentyesThe content entity to open for editing.

br-manage-menu-button

This directive places a button on the page that opens the linked menu in the menu editor. The button will only be shown in preview mode.

PropertyRequiredDescription
menuyesThe related menu model.

Links

FAQ

License

Published under Apache 2.0 license.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free