@flare-im/vue-ui

@flare-im/vue-ui

Shared Vue 3 + TypeScript + Naive UI presentation layer for Flare IM example apps (Web, Electron, Tauri, uni-app H5).

Not an SDK runtime. Components receive view-state props and emit intents; example apps map intents to FlareImClient / platform-specific raw clients.

Install

npm i @flare-im/vue-ui

@flare-im/tokens 会作为依赖自动装上。Vue 3 与 Naive UI 是 peer dependencies， 需要宿主工程自行安装（见下方 Peer dependencies）。

本包发布的是 .ts / .vue 源码，不是编译后的产物。

入口指向源文件，所以需要宿主工程的打包器来编译它。Vite / Nuxt 默认就能处理； Webpack 需要为 @flare-im/vue-ui 加一条 include 规则（node_modules 默认被 loader 排除），并确保配了 vue-loader。

发源码是有意的：组件要跟随宿主的 Vue 版本与主题变量编译，预编译反而会锁死这些。

Exports

Source layout

Usage

<script setup lang="ts">
import { FlareUiProvider, FlareConversationList, FlareConversationRow } from "@flare-im/vue-ui/components";
import "@flare-im/vue-ui/style.css";
</script>

<template>
  <FlareUiProvider layout-mode="auto">
    <FlareConversationList :items="rows" active-id="c1">
      <template #item="{ item, active }">
        <FlareConversationRow :item="item" :active="active" @select="onSelect" />
      </template>
    </FlareConversationList>
  </FlareUiProvider>
</template>

Peer dependencies

• vue ^3.5
• naive-ui ^2.44

Design boundary

This package owns product UI foundations and reusable interaction surfaces only. Host apps own App.vue, router creation, route guards, URL shape, runtime transport, login credentials, native shell adapters, and final SDK lifecycle bootstrapping.