More than 1 year has passed since last update.

【Rails】WebpackerでインストールしたVueが表示されない

Posted at 2022-04-29

Webpackerを利用してVue.jsをインストールしたところ、Hello Vue!を表示させることができませんでした。
解決法を得るのに時間がかかってしまったので、同じ状況に遭遇した方向けに情報を残しておきます。
結論から言うとインストールされたVueのバージョンが原因でした。

前提

まず、不具合が発生するまでの過程をまとめると下記の流れです。

まずは下記のコマンドでWebpackerをインストール

$ rails webpacker:install

次にWebpackerでvueをインストール

$ rails webpacker:install:vue

config/routes.rb

Rails.application.routes.draw do
  get 'home', to: 'home#index'
end

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

ここまでを行い、rails sでサーバーを起動してhttp://localhost:3000/homeにアクセスすると、通常ならHello Vue!が表示されるはず、、、
ですが今回僕の場合はただのまっしろな画面でした

原因はrails webpacker:install:vueでインストールされたVueのバージョンが3系だったことみたいです。
なので、package.jsonを編集してvueを2系にバージョンダウンしました。
最初にインストールされていたのが下記

package.json

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

これを下記に変更して

package.json

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

$ yarn installを実行して再インストールすることで、http://localhost:3000/homeでHello Vue!が表示されるようになりました。