@composy/notice-center-vue

@composy/notice-center-vue

Vue 3 adapter for @composy/notice-center-core, with Vue components, composables, and plugin exports.

Install

pnpm add @composy/notice-center-vue

The core package is installed as a runtime dependency. Vue is a peer dependency, and vue-demi provides the compatibility layer.

Quick start

<script setup lang="ts">
import type { NoticeMessage } from '@composy/notice-center-vue'
import { NoticeCenter } from '@composy/notice-center-vue'
import { ref } from 'vue'

const messages = ref<NoticeMessage[]>([
  {
    id: 'approval-1',
    title: '审批待办',
    summary: '有一个审批请求等待处理',
    category: 'todo',
    priority: 'normal',
    status: 'unread',
    createdAt: new Date().toISOString(),
  },
])
</script>

<template>
  <NoticeCenter :messages="messages" @message:read="ids => console.info('已读', ids)" />
</template>

The host application must provide the global Color and Size CSS variables from packages/color and packages/size (--ld-*). The component emits message:read, message:delete, message:click, action:click, category:change, search, preference:change, and theme:change.

Package layout

packages/vue/
├── .ldesign/             # Builder, ESLint, and ESM/CJS TypeScript configs
├── src/                  # Vue components, composables, and plugins
├── tsconfig.json         # Compatibility shim for the canonical ESM config
├── tsconfig.cjs.json     # Compatibility shim for the canonical CJS config
└── package.json

Build outputs

• es/ contains the ESM package entry and declarations.
• esm/ contains the preserved ESM module and Less source exports.
• lib/ contains CommonJS output.
• dist/ contains the UMD entry and CSS files.

The package is built with @composy/builder and rolldown. exports, main, module, types, unpkg, and jsdelivr map to these outputs.

Development checks

From the workspace root, run pnpm run build, pnpm run type-check, and pnpm run lint:check. The ESM and CJS type configurations are stored under packages/vue/.ldesign/.

License

MIT

Controlled message updates

When messages is provided, the component synchronizes it as a controlled snapshot: removed IDs are removed from the Core store, existing IDs are upserted, and new IDs are added in input order. Keep IDs stable across refreshes to avoid visual reordering and to preserve read state decisions in the host application.

The component creates the Core instance inside its mounted container. Core rendering and style injection follow that container's owner document, which also supports iframe and detached-document hosts. The parent application still needs to provide the shared --ld-* Color and Size variables.