LiveVue uses Server-Side Rendering (SSR) to improve SEO and initial page load performance.

The Lifecycle of SSR

1. Dead Renders (Initial Load): When a user first requests a page via HTTP (before a WebSocket connection is established), LiveVue performs a "dead render". It renders the Vue component to HTML on the server so the user sees content immediately.
2. Hydration: Once the LiveView WebSocket connects, the Vue components are hydrated on the client.
3. Live Updates: During subsequent LiveView updates or navigation, SSR is skipped. Updates are sent via WebSockets and applied directly to the already-mounted Vue instances. This avoids the overhead of re-running SSR for every interaction.

Per-Component Control You can override the global SSR setting for specific components using the v-ssr prop:

• <.vue v-component="CriticalContent" v-ssr={true} />: Forces SSR.
• <.vue v-component="InteractiveChart" v-ssr={false} />: Disables SSR (useful for client-only widgets).
• <.vue v-component="RegularComponent" />: Uses the global default.

The AsyncResult<T> type represents the state of an asynchronous operation (like assign_async, stream_async, or start_async) from Phoenix LiveView. It is fully typed for use in Vue components.

Fields:

• ok (boolean): Indicates if the operation has completed successfully at least once.
• loading (string[] | null): A list of loading keys (from assign_async) or null when not loading.
• failed (any | null): The error state, unwrapped from Elixir error tuples for JSON compatibility, or null if no error.
• result (T | null): The successful result data of type T, or null if not yet loaded.

import type { AsyncResult } from 'live_vue'

interface Props {
  userResult: AsyncResult<User>
}

const props = defineProps<Props>()

// Check if data is available
if (props.userResult.ok && props.userResult.result) {
  console.log('User:', props.userResult.result.name)
}

// Handle loading states
if (props.userResult.loading) {
  console.log('Loading keys:', props.userResult.loading)
}

// Handle errors
if (props.userResult.failed) {
  console.error('Failed:', props.userResult.failed)
}

LiveVue minimizes WebSocket payload sizes by tracking only modified props, slots, and handlers. For complex data structures, you can implement the LiveVue.Encoder protocol to enable efficient diffing. By converting structs to consistent map representations, LiveVue can calculate minimal JSON patches (using Jsonpatch) instead of re-sending entire objects.

When a field changes, LiveVue sends a JSON patch operation (e.g., replace) rather than the full struct, which reduces payload size and improves client-side rendering performance.

# For complex types, use Jsonpatch to find minimal diff
old_value ->
  old_value
  |> Encoder.encode()
  |> Jsonpatch.diff(new_value)
  |> update_in([Access.all(), :path], fn path -> "/#{k}#{path}" end)

Example of a patch instead of a full struct:

Instead of sending the entire user struct:

%{user: %{name: "John", email: "new@example.com", created_at: ~U[...]}}

LiveVue sends only the changed field:

[%{op: "replace", path: "/user/email", value: "new@example.com"}]

To handle arrays in a form, use form.fieldArray(path). This returns a FormFieldArray which provides methods for manipulating the collection and accessing its elements.

Basic Operations

• add(value): Adds a new item to the array.
• remove(index): Removes the item at the specified index.
• move(from, to): Reorders items by moving an item from one index to another.

Accessing Array Items

You can access individual items in an array using:

1. Numeric index: array.field(0)
2. Bracket notation: array.field('[1]')
3. Iteration: Accessing array.fields.value to loop through all fields in a template.

type TagsForm = {
  tags: string[]
}

const form = useLiveForm<TagsForm>(/* ... */)
const tagsArray = form.fieldArray('tags')

// Operations
tagsArray.add('')
tagsArray.remove(0)
tagsArray.move(0, 1)

// Accessing items
const firstTag = tagsArray.field(0)
const secondTag = tagsArray.field('[1]')