Vue.js 3 with Esbuild a-CodePudding

I am trying to use Vue.js 3 inside a Rails app to use a few components but I got this error in dev console

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".

I tried installing using the "without build tools" version and it works.

app/javascript/components/index.js

import { createApp } from 'vue'
import MyComponent from './dropdown'

document.addEventListener('DOMContentLoaded', function(){
    createApp(MyComponent).mount('#app')
})

app/javascript/components/dropdown.js

export default {
    data() {
        return {
            message: 'Hello Vue!'
          }
    },
}

app/views/index.html

<div id="app">{{ message }}</div>

package.json

{
    "vue": "^3.2.36"
  },
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

CodePudding user response：

esbuild doesn't have an alias feature out of the box. Just import esm bundler directly:

import { createApp } from "vue/dist/vue.esm-bundler.js"

There is a plugin for configuring aliases esbuild-plugin-alias:

https://www.npmjs.com/package/esbuild-plugin-alias