# @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

```bash
pnpm add @signage-editor/vue vue pinia
```

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

## Quick Start

```ts
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')
```

```vue
<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.

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

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

```ts
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