@rulecms/source-components-vue

@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

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