PhoenixVapor.Vue (PhoenixVapor v0.3.0)

Load Vue Single File Components (.vue files) as LiveView function components.

Usage

defmodule MyAppWeb.Components do
  use Phoenix.Component

  PhoenixVapor.Vue.component :card, "assets/vue/Card.vue"
  PhoenixVapor.Vue.component :dashboard, "assets/vue/Dashboard.vue"
end

This compiles the Vue template at compile time via Vize.vapor_ir!/1 and generates a function component that renders the IR against assigns.

The SFC's <template> block is extracted and compiled. <script> and <style> blocks are currently ignored (see PhoenixVapor roadmap for QuickBEAM integration plans).

Summary

Functions

component(name, path)

Define a function component from a .vue file's template.

Functions

component(name, path)

(macro)

Define a function component from a .vue file's template.

Supports <style scoped> — generates scoped CSS and injects the data-v-* scope attribute into the root element.