Examples Counter

Counter

The classic counter example demonstrating the core LiveVue pattern: server state flows down as props, user interactions bubble up as events.

What this example shows

Server State

count lives in LiveView

Local State

diff slider is Vue-only

Phoenix Events

phx-click in Vue template

Vue Transitions

<Transition> on prop changes

Count

Step1

The count assign in LiveView becomes a prop in Vue. When the server state changes, Vue automatically re-renders with the new value.

<.vue count={@count} v-component="Counter" v-socket={@socket} />

The diff slider value is managed entirely in Vue using ref(). No server round-trip for UI-only state.

const diff = ref(1)  // Local Vue state

Standard Phoenix event bindings like phx-click work directly in Vue templates. Use Vue's :phx-value-* binding to pass dynamic values.

<button phx-click="inc" :phx-value-diff="diff">+{{ diff }}</button>

Vue's <Transition> component animates when props change from the server. The :key binding triggers the transition on each value change.

<Transition name="count" mode="out-in">
<div :key="props.count">{{ props.count }}</div>
</Transition>

Next up: Event Handling