LiveVue
1.0
Navigation
LiveView-aware navigation with the
Link
component and
useLiveNavigation()
hook. Choose between full page loads, LiveView navigation, or patching with query params.
What this example shows
How it works
1 Link component for declarative navigation
The Link
component provides three navigation modes:
href
for normal links, navigate
for LiveView navigation with new state, and
patch
for updating params while preserving state.
<Link navigate="/users">Users</Link>2 useLiveNavigation() for programmatic control
When you need to navigate based on logic or user actions, use the
useLiveNavigation()
composable. It provides
navigate()
and patch()
functions.
const { navigate, patch } = useLiveNavigation()3 Patch with query params and replace
Use patch()
to update query parameters without adding a history entry. Pass an object of params and options like
replace: true
to avoid cluttering the browser history.
patch({ tab: 'profile' }, { replace: true })4 handle_params tracks navigation changes
LiveView's
handle_params
callback fires whenever the URL changes. Use it to update assigns based on the new path and query params,
which then flow down as props to your Vue components.
def handle_params(params, uri, socket)