Vue 3 bindings for Komodo Elixir library

Pre-installation

If you wish to write single-file Vue components, you'll need to work with the Vue compiler somehow - this library does not cover that.

However, with the standard Phoenix ESBuild setup, it's easily done by:

1. Following the instructions in the Phoenix docs for using esbuild plugins
2. Adding a Vue ESBuild plugin such as esbuild-plugin-vue3
3. Adding vue as a dependency to your assets npm install vue --prefix assets

NOTE: if you're using the tailwind hex package, you may find the styles generated by the esbuild plugin at priv/static/assets/app.css clash with the output configured by tailwind. If so, you can change the tailwind config in config.exs to output to a different file (and update your root.html.heex accordingly).

If you are only using Vue components as opposed to writing your own, you should be able to skip this step.

Installation

• Follow the instructions from the Komodo library to render js components with Phoenix Liveview.

• Add the npm dependency komodo-vue in the assets folder, e.g.

npm install --save komodo-vue --prefix assets

Usage

If we have a Vue Counter component that we would normally use in Vue like so

<Counter
  :counter="4"
  @inc="(amount) => console.log(`Increment by ${amount}`)"
/>

then we can render it from a LiveView with

  def render(assigns) do
    ~H"""
      <.js_component
        id="my-counter"
        component="Counter"
        props={%{counter: @counter}}
        callbacks={%{inc: "increment"}}
      />
    """
  end

  def handle_event("increment", amount, socket) do
    IO.puts("Increment by #{amount}")
    {:noreply, socket}
  end

To do the above you need configure the hook in your app.js like so:

// ...
import { registerJsComponents } from "komodo";
+import componentFromVue from "komodo-vue";
+import Counter from "path/to/vue/counter/component.vue";
// ...

let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
    // ...
    komodo: registerJsComponents({
      // ...
+      Counter: componentFromVue(Counter)
    }),
  },
});