LiveVue 1.0
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

1
SSR by default
Components render on server
2
v-ssr=false
Client-only rendering
3
Browser APIs
window, navigator, etc.
Preview LiveView Vue
With SSR (default)
Server-side rendered
User Agent:
Rendering on server...
Viewport Size:
Rendering on server...
Hydrated At:
Rendering on server...
This content was rendered on the server without access to window or navigator.
Without SSR (v-ssr=false)

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 →