PhoenixVapor.Reactive (PhoenixVapor v0.3.0)

Copy Markdown View Source

Server-side Vue reactivity via QuickBEAM.

Use via: use PhoenixVapor, file: "X.vue", runtime: :reactive

Compiles <script setup> + <template> from a .vue file into a fully functional LiveView with auto-generated mount, render, and event handlers.

A persistent PhoenixVapor.Runtime (QuickBEAM + Vue reactivity) is started per LiveView process. ref() values become reactive state, computed() auto-update when deps change, and functions execute in the persistent JS context — state survives across events.

Usage

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view
  use PhoenixVapor, file: "Counter.vue", runtime: :reactive
end

Given Counter.vue:

<script setup>
import { ref, computed } from "vue"

const count = ref(0)
const doubled = computed(() => count * 2)

function increment() { count++ }
</script>

<template>
  <p>{{ count }} × 2 = {{ doubled }}</p>
  <button @click="increment">+</button>
</template>

This generates:

  • mount/3 — starts a Runtime with refs, computeds, and functions
  • render/1 — reads state from runtime, renders via Vapor split
  • handle_event/3 — calls the function in the runtime, assigns new state