LiveVue 1.1
Examples Shared Props

Headless Shared Props

v1.1

Use a headless LiveVue component (no v-component) as a global state provider. Other components read shared props via useLiveVue(id).

What this example shows

1
Headless Component
.vue with id but no v-component
2
useLiveVue(id)
Read shared props by id
3
Reactive Updates
Server changes propagate to consumers
Preview LiveView Vue
Dashboard

User and theme are read from a headless component via useLiveVue("shared-state"). No props passed directly — all shared state comes from the headless provider.

How it works

1 Render a headless component with just an id

A <.vue> without v-component renders nothing visually but registers its props under the given id. In a real app, this lives in a sticky LiveView so it persists across page navigation. 

<.vue id="shared-state" v-socket={@socket} user={@user} theme={@theme} />

2 Read shared props with useLiveVue(id)

Any Vue component on the page can call useLiveVue("shared-state") to access the headless component's props reactively. No prop drilling required. 

const shared = useLiveVue("shared-state")
const user = computed(() => shared?.vue.props.user)

3 Server changes propagate automatically

When the server updates assigns on the headless component (e.g. switching user or theme), all consumers that read via useLiveVue() re-render with the new values. Try toggling theme or switching users above.

Explore more examples
View all examples