"export 'default' (imported as 'Vue') was not found in 'vue' error in ruby on rails and vue integration. established setup by webpacker: install:vue

user_18244268 0
Viewed 97

the below code is hello_vue.js file

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
  render: h => h(App)
}).$mount()

document.body.appendChild(app.$el)
  console.log(app)
})

this is app.vue

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

<script>
  export default {
    data: function () {
      return {
        message: "Hello Vue!"
      }
    }
  }
</script>

<style scoped>
  p {
    font-size: 2em;
    text-align: center;
  }
</style>

and added below comment in root view page

<%= javascript_pack_tag 'hello_vue.js' %>
vue.js ruby-on-rails
1 Answers

When you run the command rails webpacker:install:vue will try to install the latest version of Vue which is v3, but the autogenerated syntax for the hello_vue.js file comes from an older version of Vue v2 which is unsupported. Modify the hello_vue.js with this:

import { createApp } from "vue"; 
import App from "../app.vue";  
document.addEventListener("DOMContentLoaded", () => {   
  const app = createApp(App);   
  app.mount("#app"); 
});

And also the rails command forget to add a devDependency to package.json to support this new Vue v3 syntax.

yarn add --dev @vue/compiler-sfc
user_151379500
Related