propeller-v2-cms-vue

CMS page renderer + block dispatcher + adapter provider for Propeller Commerce Vue shops.

This package is the rendering + provider layer. There is no CMS adapter to install from npm: write one for your CMS, or start from the Strapi and Prepr providers in the Propeller Vue boilerplate's frontend/src/lib/cms/providers. The framework-agnostic CmsAdapter contract lives in propeller-v2-core-ui.

What's here

• <CmsAdapterProvider> + provideCmsAdapter() — wire a CmsAdapter instance into the Vue tree.
• useCms() — read the adapter from inject, for islands that need optional CMS access.
• <CmsPageRenderer> — render a CmsPage's block list with a per-block renderer map.
• <CmsBlock> — single-block dispatcher; the building block the page renderer calls per item.

Mode-of-operation

<!-- 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>

<!-- A CMS page -->
<script setup lang="ts">
import { CmsPageRenderer } from '@propeller-commerce/propeller-v2-cms-vue';
import HeroBlock from '@/components/cms/HeroBlock.vue';
import TextBlock from '@/components/cms/TextBlock.vue';

defineProps<{ page: CmsPage }>();

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

<template>
  <CmsPageRenderer :page="page" :renderers="renderers" />
</template>

Why no built-in blocks?

Block component styling, layout, and content shape vary too much between shops to share. This package ships the dispatcher, the renderer, and the provider — not the blocks themselves. Register whatever your CMS emits via the renderers map.

The accelerator shop templates ship a small default block set (HeroBlock.vue, TextBlock.vue, ImageBlock.vue, ProductCarouselBlock.vue) as a starting point shops can edit or replace freely.

Pair with

• propeller-v2-core-ui — the framework-agnostic CmsAdapter contract.
• propeller-v2-vue-ui — the commerce components (cart, checkout, catalog).
• propeller-v2-cms-react — the React mirror of this package.

Status

The package is pre-1.0 (0.x). Public API may change between minor versions until it stabilises; breaking changes are called out in the changelog.