LiveVue
1.0
Vue Sigil
Write Vue components directly in your LiveView with the
~VUE
sigil. No separate file needed.
What this example shows
VS Code Extension
Get syntax highlighting for the
~VUE
sigil in VS Code with the community extension.
How it works
1 Write Vue inline
Replace ~H
with ~VUE
and write a standard Vue SFC. Props are passed automatically from socket assigns.
def render(assigns) do
~VUE"""
<script setup lang="ts">
const props = defineProps<{ count: number }>()
</script>
<template>
<div>{{ props.count }}</div>
</template>
"""
end
2 Phoenix bindings work
Use phx-click, phx-submit,
and other Phoenix bindings directly in the Vue template.
<button phx-click="vote">Vote!</button>3 Current limitations
The ~VUE
sigil doesn't yet support TypeScript type-checking or autocomplete inside the sigil.
There's ongoing work to bring full editor support. For now, use
.vue
files when you need rich editor tooling.
4 When to use the sigil
The ~VUE
sigil is perfect for
small, self-contained components and rapid prototyping. For larger components or
when you need type safety, use separate
.vue
files.