RailsとVueの組み合わせで'Hello Vue'がうまく行かなかったときの備忘メモ

背景

書籍『【Rails x Vue.js】メモアプリを作成しながらモダンな開発を学ぼう！』
を参考にVueを導入しようとするも、Hello Vue!になかなかたどり着けなかったため、備忘メモ

環境

Rails 6.1.5.1
vue 3.2.33 →　2.6.14 ※今回のエラーの原因

起きていた事象

以下記載があるViewページへアクセスしても、何も表示されない自称が発生
<%= javascript_pack_tag 'hello_vue' %>

コンソールに以下の表示有り。
"export 'default' (imported as 'Vue') was not found in 'vue' RAILS

解決方法

rails new のあとにpackage.jsonを以下の通り編集。

package.json

- "vue": "^3.2.33",
- "vue-loader": "^17.0.0",
- "vue-template-compiler": "^2.6.14"
+ "vue": "^2.6.14",
+ "vue-loader": "^15.7.0",
+ "vue-template-compiler": "^2.6.12" 

編集後、yarn install

原因（推定）

vue2とvue3でファイルのimportの方法が異なるとのこと。
vue2用の記載方法でvue3を動かそうとしていたのが原因の模様。
→vue2をインストールするように記載を変更

※今回は学習を目的としているため、書籍と同じvue2に合わせたが、vue3の設定に書き直すでも良さそう。

参考