How to setup Vue.js with Elixir Phoenix 1.6 and esbuild

Phoenix 1.6 uses esbuild instead of Webpack. I cannot find any examples on how to setup Vue.js (Version 2 or 3) with Phoenix 1.6 and esbuild.

If anyone could provide a step by step description on how to do that I would really appreciate it. Thank you

Solution 1:

The final working code can be found here: https://github.com/weeksseth/phoneix_vue_chat

Create a Phoenix project

Assuming you have installed Elixir, Hex, and Phoenix (v 1.6+), create a new Phoenix project using mix phx.new <project_name>. I added the --no-ecto flag since I am not using a database at the moment.

Configure esbuild

Change directory to the assets folder and install the required dependencies:

npm i esbuild esbuild-vue -D
npm i vue ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view

Create a assets/build.js file and add the following code to it:

const esbuild = require('esbuild')
const vuePlugin = require("esbuild-vue")

const args = process.argv.slice(2)
const watch = args.includes('--watch')
const deploy = args.includes('--deploy')

const loader = {
  // Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
}

const plugins = [
  vuePlugin()
]

let opts = {
  entryPoints: ['js/app.js'],
  bundle: true,
  target: 'es2017',
  outdir: '../priv/static/assets',
  logLevel: 'info',
  loader,
  plugins
}

if (watch) {
  opts = {
    ...opts,
    watch,
    sourcemap: 'inline'
  }
}

if (deploy) {
  opts = {
    ...opts,
    minify: true
  }
}

const promise = esbuild.build(opts)

if (watch) {
  promise.then(_result => {
    process.stdin.on('close', () => {
      process.exit(0)
    })

    process.stdin.resume()
  })
}

Modify the watcher in config/dev.exs to use node:

config :hello, HelloWeb.Endpoint,
  ...
  watchers: [
-     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+     node: ["build.js", "--watch", cd: Path.expand("../assets", __DIR__)]
  ],
  ...

Modify the aliases in mix.exs to install npm packages during setup:

defp aliases do
    [
-     setup: ["deps.get", "ecto.setup"],
+     setup: ["deps.get", "ecto.setup", "cmd --cd assets npm install"],
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
-     "assets.deploy": ["esbuild default --minify", "phx.digest"]
+     "assets.deploy": ["cmd --cd assets node build.js --deploy", "phx.digest"]
    ]
  end

Remove the esbuild configuration from config/config.exs:

- config :esbuild,
-   version: "0.14.0",
-   default: [
-     args:
-       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
-     cd: Path.expand("../assets", __DIR__),
-     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
-   ]

And finally remove the esbuild dependency from mix.exs:

  defp deps do
    [
      {:phoenix, "~> 1.6.6"},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:phoenix_live_view, "~> 0.17.5"},
      {:floki, ">= 0.30.0", only: :test},
      {:phoenix_live_dashboard, "~> 0.6"},
-     {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
      {:swoosh, "~> 1.3"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.18"},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"}
    ]
  end

Add Vue

Create a new Vue component in assets/js/components/Component.vue with the following content:

<template>
  <h1>Hello world!</h1>
</template>

Replace the code in assets/js/app.js with the following:

import Component from "./components/Component.vue";
import Vue from "vue";

new Vue({
  el: "#app",
  render: (h) => h(Component),
});

Add the following code to the end of lib/<project_name>_web/templates/page/index.html.heex:

<section id="app">
</section>

Finally, start up your Phoenix server with mix phx.server and you should see the default Phoenix app with a section at the end saying greeting the planet. If you modify the Vue component and save it, the page should automatically rerender with your changes.