Livevue 是一个让你在 Phoenix LiveView 页面里直接使用 Vue 组件的库，实现端到端响应式协作。

核心理念

• 后端状态在 LiveView：页面状态、数据流、事件处理全部由 Phoenix LiveView 管理。
• 前端交互在 Vue：Vue 负责组件渲染、动画、拖拽、复杂表单等本地交互。
• 双向同步：LiveView 的 assigns 自动变为 Vue props，Vue 事件可以回传服务器。

顺带提一下 Phoenix LiveView：它是一种“后端实时 UI 框架”。不需要写前端状态管理和 api，就能做出像 SPA 一样的实时网页。

LiveView 用 WebSocket 长连接 + dom diff，把服务器状态实时同步到浏览器，浏览器只负责渲染。LiveVue 就是在这个基础上，让 Vue 与 LiveView 协同工作。

核心特性

• 端到端响应式：LiveView 的 assigns → Vue props，数据变化自动同步到前端。
• 一行安装：通过 Igniter 安装程序自动安装 LiveVue、Vue、Vite，开箱即用。
• 服务器端渲染 (SSR) Vue：首屏渲染由服务器处理，提高加载速度和 seo。
• ~VUE Sigil：可作为 LiveView DSL 的替代方案，支持 VS Code 语法高亮。
• Phoenix Streams 支持：实时列表、聊天、通知等场景高效渲染。
• 插槽互操作性：LiveView 模板与 Vue slot 内容可以互传。
• 文件上传组合式 API：useLiveUpload() 无缝集成 LiveView 上传功能与 Vue UI。
• 全面表单处理：useLiveForm() 支持通过 Ecto changeset 在服务器端验证表单，UI 与逻辑统一。

使用场景

• ✅ 后台管理系统 / CRUD 页面：表格增删改查、表单校验、权限控制，实时同步多人操作。
• ✅ 实时看板 / Dashboard：监控面板、订单列表、在线用户统计，LiveView 自动推送更新。
• ✅ 多人协作 / 实时数据流：工单系统、审批流程、聊天或通知，状态只有一份，冲突自然消失。
• ✅ 复杂表单：多步骤表单、嵌套对象表单，服务端验证 + Vue UI，开发效率高。
• ❌ 不适合：内容型官网、复杂动画/Canvas/离线 PWA 等前端主导场景。

工作原理

• LiveView 渲染占位元素：输出 <div>，包含 props、事件、slot 信息。
• 客户端挂载 Vue 组件：LiveVue Hook 读取数据，将 Vue 组件挂载到 DOM 上。
• 服务端状态同步：LiveView assigns 更新 → data 属性更新 → Vue props 响应式更新。
• 事件回传：Vue 内触发事件 → WebSocket → LiveView 处理 → DOM 差量更新。

整个流程依然跑在 LiveView 的单条 Socket 上，无需手写复杂 Hook。

快速上手

新建 Phoenix 1.8+ 项目：

mix archive.install hex igniter_new
mix igniter.new my_app --with phx.new --install live_vue

已有项目中安装：

mix igniter.install live_vue

安装完成后，自动配置 Vue、Vite、LiveVue Hook。

使用示例

LiveView 模板挂载 Vue 组件：

def render(assigns) do
  ~H"""
  <.vue
    v-component="Counter"
    v-socket={@socket}
    count={@count}
  />
  """
end

对应 Vue 组件（Counter.vue）：

<script setup>
const props = defineProps<{ count: number }>()
</script>

<template>
  <p>当前计数：{{ props.count }}</p>
  <button phx-click="inc">+1</button>
</template>

这样，Vue 管理交互和 UI，LiveView 管理状态和事件，无需额外 API。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4864