Examples SSR Control

SSR Control

Control server-side rendering for components that need browser-only APIs. Use v-ssr=false to disable SSR when needed.

What this example shows

SSR by default

Components render on server

v-ssr=false

Client-only rendering

Browser APIs

window, navigator, etc.

Preview LiveView Vue

ssr_control_live.ex

defmodule MyAppWeb.SsrControlLive do
  use MyAppWeb, :live_view

  def render(assigns) do
    ~H"""
    <div class="space-y-6">
      <div class="p-6 bg-landing-card/50 border border-landing-border rounded-xl">
        <div class="text-sm font-medium text-landing-muted mb-3">
          With SSR (default)
        </div>
        <.vue
          v-component="SsrControl"
          v-socket={@socket}
        />
      </div>

      <div class="p-6 bg-landing-card/50 border border-landing-border rounded-xl">
        <div class="text-sm font-medium text-landing-muted mb-3">
          Without SSR (v-ssr={false})
        </div>
        <.vue
          v-component="SsrControl"
          v-socket={@socket}
          v-ssr={false}
        />
      </div>
    </div>
    """
  end

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

How it works

1 SSR enabled by default

LiveVue components are server-side rendered by default for faster initial page loads. The component renders to HTML on the server, then Vue hydrates it on the client.

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

2 Disable SSR when needed

Add v-ssr=false to skip server rendering. The component shows a placeholder during SSR and only renders on the client after hydration.

<.vue v-component="SsrControl" v-socket={@socket} v-ssr={false} />

3 Browser APIs require special handling

When using browser-only APIs like window, navigator, or document, you can either check if they exist or disable SSR entirely.

const userAgent =
  typeof window !== 'undefined'
    ? navigator.userAgent
    : 'SSR'

4 When to use v-ssr=false

Use v-ssr=false for components that heavily rely on browser APIs, third-party libraries that aren't SSR-compatible, or when the component doesn't benefit from SSR (like maps, charts, or client-only visualizations).

Next up: Slots for composable components

View example →