Getting started

Install

npm install \
  @propeller-commerce/propeller-v2-cms-vue \
  @propeller-commerce/propeller-v2-core-ui \
  @propeller-commerce/propeller-sdk-v2

There is no CMS adapter to install from npm. Write one against the CmsAdapter contract for your CMS, or start from the Strapi and Prepr providers in the Propeller Vue boilerplate's frontend/src/lib/cms/providers.

Wire the provider

At the Vue root, alongside whatever Propeller-UI plugin you already use:

<!-- src/App.vue -->
<script setup lang="ts">
import { CmsAdapterProvider } from '@propeller-commerce/propeller-v2-cms-vue';
import { adapter } from '@/lib/cms'; // your CmsAdapter implementation
</script>

<template>
  <CmsAdapterProvider :adapter="adapter">
    <RouterView />
  </CmsAdapterProvider>
</template>

Alternative — call the imperative provideCmsAdapter() from your root component's setup():

<!-- src/App.vue -->
<script setup lang="ts">
import { provideCmsAdapter } from '@propeller-commerce/propeller-v2-cms-vue';
import { adapter } from '@/lib/cms';

provideCmsAdapter(adapter);
</script>

If the shop has no CMS configured, pass null (component) or skip the provide step (imperative) — useCms() will return null and any optional UI will gracefully hide. See Patterns.

Fetch and render a page

Server-side via Vite SSR or the data-fetching layer of your choice:

<!-- src/views/CmsView.vue -->
<script setup lang="ts">
import { CmsPageRenderer, useCms } from '@propeller-commerce/propeller-v2-cms-vue';
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import HeroBlock from '@/components/cms/HeroBlock.vue';
import TextBlock from '@/components/cms/TextBlock.vue';

const route = useRoute();
const cms = useCms();
const page = ref<CmsPage | null>(null);

onMounted(async () => {
  if (!cms) return;
  page.value = await cms.getPage(route.params.slug as string);
});

const renderers = { hero: HeroBlock, text: TextBlock };
</script>

<template>
  <CmsPageRenderer v-if="page" :page="page" :renderers="renderers" />
  <NotFoundView v-else-if="page === null" />
</template>

In production SSR pipelines the fetch happens on the server before the component mounts; the pattern above is the client-only fallback.

Install​

Wire the provider​

Fetch and render a page​

Read next​

Install

Wire the provider

Fetch and render a page

Read next