LiveVue v1.0 released

After four release candidates and a lot of community feedback, LiveVue 1.0 is stable

I’ve built a dedicated website with interactive examples: livevue.skalecki.dev

And wrote the full story behind the library: The Story of LiveVue

What Changed

New Composables

useLiveForm — Server-side validation with Ecto changesets, nested objects, dynamic arrays. Fully typed:

<script setup lang="ts">
import { useLiveForm, type Form } from 'live_vue'

type UserForm = {
  name: string
  profile: { bio: string; skills: string[] }
}

const props = defineProps<{ form: Form<UserForm> }>()

const form = useLiveForm(() => props.form, {
  changeEvent: 'validate',
  submitEvent: 'submit'
})

// Type-safe field access — typos caught at compile time
const nameField = form.field('name')
const bioField = form.field('profile.bio')
const skillsArray = form.fieldArray('profile.skills')
</script>

<template>
  <input v-bind="nameField.inputAttrs.value" />
  <span v-if="nameField.errorMessage.value">{{ nameField.errorMessage.value }}</span>

  <div v-for="(skill, i) in skillsArray.fields.value" :key="i">
    <input v-bind="skill.inputAttrs.value" />
    <button @click="skillsArray.remove(i)">Remove</button>
  </div>
  <button @click="skillsArray.add('')">Add Skill</button>

  <button @click="form.submit()" :disabled="!form.isValid.value">Submit</button>
</template>

LiveView side stays exactly as you’d expect:

def handle_event("validate", %{"user" => params}, socket) do
  changeset = User.changeset(%User{}, params) |> Map.put(:action, :validate)
  {:noreply, assign(socket, form: to_form(changeset, as: :user))}
end

useLiveUpload — File uploads with progress tracking and drag-and-drop:

<script setup>
import { useLiveUpload } from 'live_vue'

const { entries, showFilePicker, addFiles, progress } = useLiveUpload(
  () => props.upload,
  { submitEvent: 'save' }
)
</script>

<template>
  <div @drop.prevent="e => addFiles(e.dataTransfer.files)" @dragover.prevent>
    Drop files or <button @click="showFilePicker">browse</button>
    <div v-for="entry in entries" :key="entry.ref">
      {{ entry.client_name }} — {{ entry.progress }}%
    </div>
  </div>
</template>

useLiveConnection — Reactive WebSocket status for offline indicators:

<script setup>
import { useLiveConnection } from 'live_vue'
const { isConnected, connectionState } = useLiveConnection()
</script>

<template>
  <div :class="isConnected ? 'text-green-500' : 'text-red-500'">
    {{ connectionState }}
  </div>
</template>

useEventReply — Bi-directional events with server responses:

<script setup>
import { useEventReply } from 'live_vue'

const { data, isLoading, execute } = useEventReply('fetch_user')
</script>

<template>
  <button @click="execute({ id: 123 })" :disabled="isLoading">
    {{ isLoading ? 'Loading...' : 'Fetch User' }}
  </button>
  <div v-if="data">{{ data.name }}</div>
</template>

Performance: JSON Patch Diffs

Props now use RFC 6902 JSON Patch. Only differences are sent:

[{"op": "replace", "path": "/users/1/name", "value": "Robert"}]

Inserting at the beginning of a 100-item list? One operation, not 100 — thanks to ID-based matching.

Phoenix Streams

Streams work transparently as reactive arrays:

<.vue messages={@streams.messages} v-component="Chat" v-socket={@socket} />

<script setup>
// messages is a reactive array — streams handled automatically
const props = defineProps<{ messages: Message[] }>()
</script>

Developer Experience

• One-command install: mix igniter.install live_vue
• No JS build step — TypeScript source exported directly, Vite handles it
• VS Code extension for ~VUE sigil syntax highlighting

Breaking Changes

• shared_props removed — pass props explicitly
• nillify_not_loaded → nilify_not_loaded (typo fix)

Links

• Interactive examples: livevue.skalecki.dev
• Blog post: The Story of LiveVue
• Hex: hex.pm/packages/live_vue
• Docs: hexdocs.pm/live_vue
• GitHub: github.com/Valian/live_vue
• ElixirConf EU talk: Why mixing LiveView and a frontend framework is a great idea

Discuss and upvote also on Hacker News.

Happy New Year!