Vue templates as native LiveView rendered structs.

Usage

Sigil — Vue syntax in any LiveView

use PhoenixVapor

def render(assigns) do
  ~VUE"""
  <div>{{ count }}</div>
  """
end

SFC — .vue file as a LiveView

use PhoenixVapor, file: "Contacts.vue"

The compiler reads the .vue file and auto-detects the mode:

• No <script setup> — pure server template, zero client JS
• <script setup> with only defineProps — pure server, zero client JS
• <script setup> with ref() — hybrid mode, Vue 3 on the client
• runtime: :full — full Vue runtime in QuickBEAM (for component libraries)

Single-file Elixir

Embed Elixir code in the .vue file with <script lang="elixir">:

<script lang="elixir">
def mount(_params, _session, socket) do
  {:ok, assign(socket, items: Repo.all(Item))}
end
</script>

<script setup>
const props = defineProps(["items"])
const search = ref("")
</script>

<template>
  <input v-model="search" />
  <div v-for="item in filtered">{{ item.name }}</div>
</template>

Programmatic

PhoenixVapor.render("<div>{{ msg }}</div>", %{msg: "Hello"})