トップ > Vue.js > railsにvue.jsをインストールしたときのエラー

railsにvue.jsをインストールしたときのエラー

Vue.js rails エラー 
rails webpacker:install:vue

railsにwebpackerを使って導入する。

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>

app.vueを

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ConveRecipe</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

rails webpacker:compileここでcompileをすると以下のエラーが発生した。

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

以下の記事が参考になりました。どうやらvue-laterのバージョンを落としてあげることにより解決できるとのこと。

【Vue Rails】Vue + Railsで"Hello Vue!"表示 - Qiita