Examples Navigation

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

Link Component

href, navigate, patch

useLiveNavigation()

Programmatic navigation

Query Params

Patching with replace

Preview LiveView Vue

navigation_live.ex

defmodule MyAppWeb.NavigationLive do
  use MyAppWeb, :live_view

  def render(assigns) do
    ~H"""
    <.vue
      currentPath={@current_path}
      queryParams={@query_params}
      v-component="Navigation"
      v-socket={@socket}
    />
    """
  end

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def handle_params(params, uri, socket) do
    %URI{path: path} = URI.parse(uri)

    {:noreply,
     assign(socket,
       current_path: path,
       query_params: params
     )}
  end
end

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)

Next up: Simple Form with useLiveForm()

View example →