LiveVue - v1.1 released with v-inject, node-less SSR via quickbeam and headless components

Your Libraries & OS Mentoring Library Updates / Feedback
, , ,
1

After around 4 months of development, squashing numerous bugs, adding some substantial features it’s time for a new LiveVue release!

Embedded SSR with QuickBEAM

Introducing additional SSR backend - QuickBEAM which runs inside the BEAM. It’s now possible to get rid of nodejs from production deployment :partying_face:

LiveVue.SSR.QuickBEAM uses quickbeam to execute your Vue server bundle directly in the runtime. It’s the new default for production. Node.js and Vite SSR modes are still available, but for most apps you can drop Node from your production Docker image entirely.

Persistent Vue Layouts with v-inject

Vue components can now survive LiveView navigations. Use v-inject to render a component into a persistent layout slot:

# In your layout — the shell persists across navigations
<.vue v-component="AppShell" id="shell" />

# In a page LiveView — injected into the shell's default slot
<.vue v-component="Dashboard" v-inject="shell" />

# Named slots work too
<.vue v-component="Sidebar" v-inject:sidebar="shell" />

This gives you the equivalent of nested layouts in Vue Router, but driven by LiveView. Navigation sidebar, media player, notification tray — anything that should persist across page changes.

Cross-Component Prop Sharing

<.vue> tags without v-component are now headless — invisible state containers. Any component can access another component’s reactive props by ID:

<%!-- Headless data source — no visible output --%>
<.vue id="user-data" user={@current_user} permissions={@permissions} />

<%!-- Multiple components read from it --%>
<.vue v-component="UserCard" />
<.vue v-component="PermissionsPanel" />

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

// Access the headless component's props reactively
const live = useLiveVue('user-data')
const props = live.vue.props
</script>

No custom events, no prop drilling, no stores. One LiveView assign, multiple consumers.

Shared Props Are Back

v1.0 removed shared_props because they broke LiveView’s change tracking. v1.1 brings them back properly with LiveVue.SharedPropsView — a compile-time ~H sigil override that injects shared props as explicit template attributes:

# config/config.exs
config :live_vue, :shared_props, [:flash, current_user: :user]

# In your LiveView — just `use`
use LiveVue.SharedPropsView

# Now every <.vue> tag automatically receives flash and current_user
# with full LiveView change tracking — no manual prop passing needed

as an additional benefit, it automatically passes v-socket to vue components. It’s no longer necessary to do it by yourself!

Build & Dependency Upgrades

The installer now targets the latest ecosystem:

  • Vite 8 (Rolldown-based — significantly faster builds)
  • TypeScript 6, vue-tsc 3, @vueuse/core 14
  • TailwindCSS 4.2
  • vue is now a peerDependency instead of being injected by the installer

SSR manifests are embedded at build time via a new live_vue/ssrManifest virtual import, eliminating runtime file reads from production bundles.

Bug Fixes

  • Fixed Vue components not refreshing props after LiveSocket reconnect
  • Fixed useLiveUpload() sending stale upload refs after reconnect
  • Fixed empty SSR output falling through to hydration instead of clean client mount
  • Fixed missing .mjs chunk preload links in production SSR

Migration Guide

The only action item: if you want the new manifest embedding (optional but recommended), update your server entrypoint:

import components from "../vue"
import manifest from "live_vue/ssrManifest"
import { getRender } from "live_vue/server"

export const render = getRender(components, manifest)

Everything else is backwards compatible.

Links

Hope you’ll like it! :hugs:

11 Likes