Alva

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:

• Getting Started
• Ash Backend Setup
• LiveView Integration
• Queries and Actions
• Forms and Mutations
• Frontend Composables
• Uploads
• Streams
• Signals

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