LiveVue 1.0
Examples Event Handling

Event Handling

Two ways to send events from Vue to LiveView: Phoenix bindings like phx-click and programmatic pushEvent() via the useLiveVue() hook.

What this example shows

1
phx-click
Phoenix bindings in Vue
2
pushEvent()
Programmatic events
3
useLiveVue()
Access Phoenix hook
Preview LiveView Vue
Send event with pushEvent()
Send event with phx-click
Messages from server
0 total
No messages yet. Send one above!

How it works

1 Phoenix bindings work directly in Vue

Standard Phoenix event bindings like phx-click work in Vue templates. Pass data with phx-value-* attributes. 

<button phx-click="phx_click_message" phx-value-text="Hello!">

2 useLiveVue() provides the Phoenix hook

The useLiveVue() composable returns the Phoenix LiveView hook instance. Use it for programmatic event handling. 

const live = useLiveVue()

3 pushEvent() sends data to LiveView

Call pushEvent(name, payload) to send events programmatically. This is useful when you need to send computed values or handle complex interactions. 

live.pushEvent("add_message", { text: inputText.value })

4 handle_event receives both event types

LiveView handles events from both phx-click and pushEvent() the same way. The params contain the payload you sent. 

def handle_event("add_message", %{"text" => text}, socket)
Next up: Server Events with useLiveEvent()
View example →