回る男の備忘録

どこかでプログラム書いてシャニマスして野球見てTwitterやってる人間の駄文

【Rails】既存のRailsアプリにVueを導入する

タイトルの通りです

手順

webpackerを導入する

Gemfileに以下を追加

gem 'webpacker'

そしてbundle installをします。

yarnを導入する

webpackerを導入するにはyarnがインストールされていることが前提条件らしいのでyarnを導入します。

Vueを導入する

以下のコマンドを叩きます

rails webpacker:install
rails webpacker:install:vue

これでVueが導入できると思います。

動作確認

application.html.erbに以下を追加して確認しましょう。

      <%= javascript_pack_tag 'hello_vue' %>
      <%= stylesheet_pack_tag 'hello_vue' %>

hello_vueはVueを導入したときにhello_vue.jsというファイルが作られ、それを呼び出してる感じ?なんですかね?
一応これで導入完了です。

動作確認が出来ない場合

私がトラブったのですが、webpackerが動いていなかったのが原因のエラーが発生していたため、先にRailsを再起動しwebpackerを起動したところうまく動作できました。

まとめ

一応なんとかRailsプロジェクトにVueを導入することができました。
動いてはいるものの、少し怪しい挙動があるのでまだまだ調査が必要です・・・