@signage-editor/vue

Vue runtime bindings for the signage editor. This package re-exports @signage-editor/core, provides the Pinia editor store, and supplies Vue renderers/player components for preview and device playback.

Installation

pnpm add @signage-editor/vue vue pinia

@signage-editor/core is installed as a dependency of this package.

Quick Start

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import '@signage-editor/vue/style.css'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

<script setup lang="ts">
import { DOMPlayer, type TemplateBundle } from '@signage-editor/vue'

defineProps<{
  bundle: TemplateBundle
}>()
</script>

<template>
  <DOMPlayer :bundle="bundle" />
</template>

Renderer Guide

Custom elements created through @signage-editor/core need a Vue renderer before they can appear in preview or on the device player.

<!-- CountdownRenderer.vue -->
<script setup lang="ts">
defineProps<{
  element: {
    targetTime?: string
    format?: string
  }
}>()
</script>

<template>
  <div class="countdown-renderer">
    {{ element.targetTime || '未设置时间' }}
  </div>
</template>

import { registerRenderer } from '@signage-editor/vue'
import CountdownRenderer from './CountdownRenderer.vue'

registerRenderer('countdown', CountdownRenderer)

Guidelines:

• The renderer type must match the core element plugin type.
• Renderers receive the element object through the element prop.
• Device playback and management preview should register the same renderer for the same element type.
• If a renderer is not registered, the player shows a fallback placeholder instead of failing.

Main Exports

This package re-exports all public exports from @signage-editor/core, so consumers can import schema types, element registry helpers, and player primitives from @signage-editor/vue when they are already using the Vue layer.

| Export | Description | | --- | --- | | useEditorStore() | Pinia store used by the editor UI | | DOMPlayer | Vue player component for preview/device playback | | PlayerPage | Simple page wrapper around the player | | registerRenderer(type, component) | Register a Vue renderer for an element type | | resolveRenderer(type) | Resolve a renderer or fallback | | HlsRenderer | Built-in HLS/m3u8 renderer | | DataSourceServiceKey | Vue injection key for data source services |

License

MIT