Skip to content
Last update: March 15, 2024 Integration is a headless CMS that provides a visual editor for creating and managing content. The integration with allows you to create and manage content in and display it in the Virto Commerce vue-b2b-theme. The integration is achieved through the use of the API, which allows you to fetch content from and display it in the vue-b2b-theme. The integration also provides a way to manage content in and update it in the vue-b2b-theme.

This guide explores how to integrate with the Virto Commerce vue-b2b-theme and provides a practical example of the integration.

Integrate with Virto Commerce vue-b2b-theme

To integrate with the Virto Commerce vue-b2b-theme:

  1. Create a account. Sign up for a free account on the website.
  2. Create a space in A space is a container for your content, and it allows you to organize and manage your content in
  3. Create custom components in This allows you to add existing components from the Virto Commerce vue-b2b-theme to and use them to create content.
  4. Create content in by adding components to your space and filling them with content.
  5. Fetch content in the vue-b2b-theme using the API. The API provides a way to fetch content from and display it in the vue-b2b-theme. You can fetch content using composable, where you should pass content ID. The API returns the content as JSON, which you can then display in the vue-b2b-theme.

Readmore Documentation

Connect with Virto Commerce vue-b2b-theme

To connect with VC vue-b2b-theme:

  1. Install, SDK for Vue 3. We use version 0.3.1, as it is more stable and has better compatibility with the Virto Commerce vue-b2b-theme.

    yarn add^0.3.1
  2. Get your API token from the dashboard (Your space → Settings → Public API Key). You will use this key to authenticate your requests to the API.

  3. To facilitate registration of the custom components, create a composable useBuilder:

    const registeredComponents = [];
    export const useBuilder = () => {
      function registerCustomComponents(components) {
        for (const [, component] of Object.entries(components)) {
      return {

Next Steps