# Howto integrate builder.io pages into the VC theme

**URL:** <https://www.virtocommerce.org/t/howto-integrate-builder-io-pages-into-the-vc-theme/583>\
**Category:** dev\
**Tags:** storefront, integration\
**Created:** [May 18, 2023, 12:49pm UTC](https://www.virtocommerce.org/t/howto-integrate-builder-io-pages-into-the-vc-theme/583 "2023-05-18T12:49:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![basilkot](https://yyz2.discourse-cdn.com/flex032/user_avatar/www.virtocommerce.org/basilkot/32/888_2.png) [@basilkot](https://www.virtocommerce.org/u/basilkot)\
**Post date:** [May 18, 2023, 12:49pm UTC](https://www.virtocommerce.org/t/howto-integrate-builder-io-pages-into-the-vc-theme/583/1 "2023-05-18T12:49:20Z")

</div>

In this artcile I’m going to create a landing page created in [builder.io](https://builder.io/) CMS.

1. Clone the [latest theme commit](https://github.com/VirtoCommerce/vc-theme-b2b-vue.git)

2. Add new component into the pages folder. Lets call it `Landing`.

```html
<template>
  <div>
    <div v-if="canShowContent">
      <RenderContent model="page" :content="content" :api-key="apiKey" />
    </div>
    <NotFound v-if="pageNotFound" />
  </div>
</template>

<script setup lang="ts">
import { getContent, RenderContent, isPreviewing } from "@builder.io/sdk-vue/vue3";
import { onMounted, ref } from "vue";
import NotFound from "./404.vue";

const canShowContent = ref(true);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const content: any = ref(null);
const pageNotFound = ref(false);
const apiKey = "<public api key>";

onMounted(async () => {
  const result = await getContent({
    model: "page",
    apiKey: apiKey,
    userAttributes: {
      urlPath: window.location.pathname,
    },
  });
  content.value = result;
  canShowContent.value = content.value || isPreviewing();
  if (!content.value) {
    pageNotFound.value = true;
  }
});
</script>

```

public api key is in [account settings](https://builder.io/account/space)

More infomation is in the [official documentation](https://www.builder.io/c/docs/integrating-builder-pages)

1. In order to add a custom component it’s neccessary to add the following code into `landing.vue`

```html
<script setup lang="ts">
...
import Login from "@/shared/static-content/components/login.vue";
import ProductsBlock from "@/shared/static-content/components/products-block.vue";

...
function getRegisteredComponents() {
  return [
    {
      component: Login,
      name: "VirtoCommerce Login",
      canHaveChildren: false,
      image: "https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png",
      inputs: [],
    },
    {
      component: ProductsBlock,
      name: "VirtoCommerce Products",
      canHaveChildren: false,
      image: "https://tabler-icons.io/static/tabler-icons/icons-png/building-store.png",
      inputs: [
        {
          name: "model",
          type: "object",
          defaultValue: {},
          subFields: [
            {
              name: "title",
              type: "string",
            },
            {
              name: "subtitle",
              type: "string",
            },
            {
              name: "query",
              type: "string",
            },
            {
              name: "count",
              type: "number",
            },
          ],
        },
      ],
    },
  ];
}

```

And add the `custom-components` property to the `RenderContent` component

```html
<RenderContent model="page" :content="content" :api-key="apiKey" :custom-components="getRegisteredComponents()" />

```

1. Add route rule in the `router/routes/main.ts` file.

```ts
...
// import component
const Landing = () => import("@/pages/landing.vue");
...
// add rule before the last one
{ path: "/landing/:pathMatch(.*)*", name: "Landing", component: Landing, props: true },
...

```

In some cases, import from `@builder.io/sdk-vue/vue3` throw a compile time error. To solve it, add a new file into project root. Lets name it `vue-builder-io.d.ts` and write in it

```ts
declare module "@builder.io/sdk-vue/vue3";

```

1. Go to the `builder.io` app and add a new page

 ![create a new page](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/e/eabaf0cbf4b234f942b9f9b78e8975cae4748e5c.png)

Then open an [account settings](https://builder.io/account/space) and set the preview url

 ![account settings](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/6/67166a253ede8a5d000a3c24513d1e2fb27cb627.png)

1. Add blocks into page in the page designer

 ![page in builder.io](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/e/eabaf0cbf4b234f942b9f9b78e8975cae4748e5c.png)

For the products block, fill the `query` property with `HP` value.

 ![query=HP](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/e/e759180f2669e3911c7dfacc675db2525e20cc31.png)

or the `bolt` balue

 ![query=bolt](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/8/8d7fb0ee26ff24fc8393064b3f1eddf4e619c4b0.png)

1. Publish page

 ![page publishing](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/9/91ee5292674971d50b7adeea9dfec070a2dd54f2.png)

1. Run local app with the `yarn run dev` command

2. Open [the About page](https://localhost:3000/landing/about)

 ![And a result](https://canada1.discourse-cdn.com/flex032/uploads/virtocommerce/original/2X/0/03950b37529fa2f3bdae4803a0ed18ddeeab4a49.jpeg)

You can find this example on [`github`](https://github.com/VirtoCommerce/vc-theme-b2b-vue/tree/integrations/builder.io).