@rulecms/source-components-vue

Vue source components for RuleCMS widgets — the Vue counterpart of @rulecms/source-components-react.

Provides the same default-library type ids. Register as the default library on @rulecms/widget-vue:

libraries: { default: sourceComponents }

Installation

npm install @rulecms/widget-vue @rulecms/source-components-vue

Usage

<script setup>
import { RuleCMSWidget, RuleCMSWidgetProvider } from '@rulecms/widget-vue';
import * as sourceComponents from '@rulecms/source-components-vue';

const token = 'your-token';
const publishedKey = 'your-widget-key';
const libraries = { default: sourceComponents };
</script>

<template>
  <RuleCMSWidgetProvider :token="token" :libraries="libraries">
    <RuleCMSWidget :published-key="publishedKey" />
  </RuleCMSWidgetProvider>
</template>

Components

| Type | Description | |---|---| | r-text | Text in a configurable enclosing tag, with inline links | | cloudinary-advanced-image | Responsive Cloudinary image | | r-video | Cloudinary video with poster | | r-icon | A single Lucide <svg> | | r-button | A <button>, or an <a> when it links somewhere, styled by preset | | r-divider | A single <hr> separating two sections | | r-embed | A third-party <iframe> from a pasted URL | | r-list | A <ul> or <ol>, one item per authored line | | r-accordion | A <details>/<summary> disclosure — a summary that expands to its detail, with no JavaScript | | r-mount | A slot for a host-app component registered on RuleCMSWidget :mounts by name |

The package also exports the library contract that @rulecms/widget-vue consumes:

• manifest, components, editor
• getSourceComponentsPlugin(), getComponentMetadataForEditing(), getPreviewComponents()
• link helpers (isSafeHref, resolveLinkAttributes, parseInlineLinkMarkers)
• button presets, list/embed/accordion allowlists

Icons

r-icon renders geometry carried on its own attribute rather than looking a name up at render time. The composer stamps that value when the author picks an icon.

Name resolution lives behind a separate entry point that only the composer should import:

import { buildIconAttributeValue, searchIconNames } from '@rulecms/source-components-vue/icon-registry';

Host onClick

r-button reads onClick from widgetInstanceProps. Address the instance on RuleCMSWidget :component-props by column id.

Develop locally

cd source-components-vue
npm install
npm test
npm run lint
npm run typecheck
npm run build

Publishing

Follow __docs__/RUNBOOK_version-bump-and-release.md.

Push the version tag. GitHub Actions publishes via trusted publishing (.github/workflows/publish.yml). Do not run npm run release or npm publish locally except for the first-ever version of a new package.

git push && git push --tags
npm view @rulecms/source-components-vue version

License

Proprietary — RuleCMS, LLC