Embed published RuleCMS widgets in Vue

A Vue app is a complete RuleCMS customer. Editors still build heroes and landing blocks in the visual composer, preview phone through desktop, and promote from staging to production. You install two packages, register the default cards, and render RuleCMSWidget. Peer dependency: Vue 3.3 or newer.

The Vue SDK ships the default RuleCMS components — text, images, video, icons, buttons, dividers, embeds, lists, and accordions. That is enough to run the customer journey without a React rewrite. If you later want the composer to host a custom design system, that registration path is documented on the React guide. You do not need it to start, or to stay on Vue.

@rulecms/widget-vue fetches and lays out the item tree. @rulecms/source-components-vue is the default library you pass in. Without that registration, the layout has nowhere to paint cards.

1<script setup>2import { RuleCMSWidget, RuleCMSWidgetProvider } from "@rulecms/widget-vue";3import * as sourceComponents from "@rulecms/source-components-vue";45const token = "your-environment-token";6const publishedKey = "your-widget-key";7const libraries = { default: sourceComponents };8const componentProps = {9  "b721c4e2-…": { onClick: (event) => console.log("cta", event) },10};11</script>1213<template>14  <RuleCMSWidgetProvider :token="token" :libraries="libraries">15    <RuleCMSWidget16      :published-key="publishedKey"17      :component-props="componentProps"18    />19  </RuleCMSWidgetProvider>20</template>

• Staging and production: plain token + environmentId---widget-… published key.
• Development: dev. token + draft widget key for live drafts.

For SSR or SSG, fetch with fetchRuleCMSWidget and render mode="pre-fetched". The browser does not refetch and does not need the token. Breakpoint variants keep the server HTML honest across viewports.

1import { fetchRuleCMSWidget } from "@rulecms/widget-vue";23const data = await fetchRuleCMSWidget({4  publishedKey: process.env.RULECMS_PUBLISHED_KEY,5  token: process.env.RULECMS_TOKEN,6});

Credentials live in project settings. The Vue sample lab is a public teaching project with a live demo — use it to see the wiring, not as a production template.

Pass componentProps by column id so an r-button can open a Vue drawer or hit your router. Bare ids apply to every copy of a repeated collection; a / path targets one embedding. Longest match wins. In development, a dead key logs once so you can fix the id before you publish.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.