Rails 7 - Vue 3 - Stimulus controller

app-javascript-controller-hello_controller.js

import { Controller } from "@hotwired/stimulus"
import { createApp } from "vue"
import App from "../hello/App.vue"

export default class extends Controller {
  connect() {
    this.app = createApp(App);
    this.app.mount(this.element);
  }
  disconnect() {
    this.app.unmount();
  }
}

app-views-hello-show.html.erb

<div data-controller="hello"></div>

esbuild.config.mjs

...
import rails from "esbuild-rails"
import vuePlugin from "esbuild-plugin-vue3" // <------ yarn add esbuild-plugin-vue3
import chokidar from "chokidar"
...
const watchDirectories = [
  "./app/javascript/**/*.js",
  "./app/javascript/**/*.vue", // <------ To watch for changes in .vue templates
  "./app/views/**/*.html.erb",
  "./app/assets/builds/**/*.css",
  "./config/locales/**/*.yml",
]
const config = {
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  bundle: true,
  entryPoints: entryPoints,
  minify: process.env.RAILS_ENV == "production",
  outdir: path.join(process.cwd(), "app/assets/builds"),
  plugins: [rails(), vuePlugin()], // <------ add vuePlugin()
  sourcemap: process.env.RAILS_ENV != "production"
}
...

tailwind.config.js

...
  content: [
    './app/components/**/*.rb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/javascript/**/*.vue', // <------ To include classes from .vue templates
    './app/views/**/*.erb',
  ..