HEEX sigil override that injects LiveVue shared props and v-socket into every <.vue ...> tag and LiveVue shortcut component tag.

Shared props are configured via config :live_vue, :shared_props and automatically injected into all literal <.vue> tags and LiveVue shortcut component tags at compile time, together with a builtin v-socket={get_in(assigns, [:socket])} attribute when one is not already present. That keeps LiveView's change tracking working correctly (unlike the old runtime-based shared_props which was removed in v1.0).

Configuration

In your config/config.exs:

config :live_vue,
  shared_props: [
    :flash,
    {:current_user, :user},
    {[:current_scope, :workspace], :workspace}
  ]

Supported formats:

• :atom - maps assigns[:atom] to a prop named atom
• {:source, :target} - maps assigns[:source] to a prop named target
• {[:nested, :path], :target} - maps get_in(assigns, [:nested, :path]) to a prop named target

Setup

In your lib/my_app_web.ex, override the ~H sigil in contexts that use LiveVue component tags:

defp html_helpers do
  quote do
    # ... existing imports ...
    use LiveVue

    # Override ~H to inject shared props and v-socket into LiveVue tags
    import Phoenix.Component, except: [sigil_H: 2]
    import LiveVue.SharedPropsView, only: [sigil_H: 2]
  end
end

This works by rewriting the HEEX template string at compile time, injecting shared props and v-socket as explicit attributes before the template is compiled by Phoenix. This preserves LiveView's reactivity since the props appear as regular template expressions.