Alva

Copy Markdown View Source

Alva Logo

Alva (Ash Live Vue Adapter) is an Ash Extension and Phoenix LiveView adapter that securely bridges your Elixir backend with a Vue 3 frontend.

It completely eliminates the need for manual API routing, REST endpoints, or GraphQL resolvers. By directly connecting Ash Resources to LiveVue, Alva auto-generates a fully typed TypeScript SDK that lets you execute actions, read streams, process uploads, and listen to PubSub signals from the frontend — all with end-to-end TypeScript safety over LiveView WebSockets.

Installation

Add alva to your list of dependencies in mix.exs:

def deps do
  [
    {:alva, "~> 0.1.0"}
  ]
end

Then run mix deps.get.

Quick Start

  1. Configure Ash Resources with the Alva.Resource extension and define events:

    defmodule MyApp.Catalog.Product do
  use Ash.Resource,
    extensions: [Alva.Resource]

  alva do
    event(:catalog_list_products,
      name: "catalog.list_products",
      action: :list
    )
  end

  actions do
    read :list do
      public?(true)
    end
  end
end

  2. Inject Alva.LiveView into your LiveView:

    defmodule MyAppWeb.StorefrontLive do
  use MyAppWeb, :live_view
  use Alva.LiveView, streams: [...]
end

  3. Run the code generator to produce TypeScript bindings:

    mix alva.codegen

  4. Use the generated SDK in your Vue 3 frontend:

    const alva = useAlva();
const result = await alva.catalog.list_products({});

Documentation

See the guides for detailed walkthroughs:

Full API reference is available at https://hexdocs.pm/alva.