Provider

Two ways to wire a CmsAdapter into the Vue tree:

• <CmsAdapterProvider> — declarative wrapper component.
• provideCmsAdapter() — imperative helper for a root setup().

Both end up at the same injectable key (CmsAdapterKey) that useCms() reads.

import {
  CmsAdapterProvider,
  provideCmsAdapter,
  CmsAdapterKey,
} from '@propeller-commerce/propeller-v2-cms-vue';

<CmsAdapterProvider>

<CmsAdapterProvider :adapter="adapter">
  <slot />
</CmsAdapterProvider>

Props:

Prop	Type	Required	Notes
adapter	CmsAdapter | null	yes	Pass null for shops without a CMS.

Single default slot. Renders its slot inside a single wrapping <div> with no class (use a class attribute fall-through if you need to style it).

provideCmsAdapter()

provideCmsAdapter(adapter: CmsAdapter | null): void

Imperative variant. Wraps Vue's provide(), so call it inside a component's setup() (typically the root component):

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

provideCmsAdapter(adapter);
</script>

For app-level wiring in main.ts, use the exported key directly: app.provide(CmsAdapterKey, adapter).

Use this when:

• You want to wire the adapter from script instead of wrapping the template in <CmsAdapterProvider>.
• You're integrating with Nuxt or another framework that has its own app-level plugin pattern.

Passing null

A shop that wants to ship without a CMS can wire null:

<CmsAdapterProvider :adapter="null">
  <slot />
</CmsAdapterProvider>

useCms() then returns null, and any optional UI guarded by if (!cms) return null quietly disappears.

CmsAdapterKey

The InjectionKey<CmsAdapter | null> used internally. Exposed so consumers writing custom plugins can provide(CmsAdapterKey, …) themselves if they need to bypass the helpers above. Most shops don't.