はじめに

バージョン
Ruby '2.6.5'
Rails '6.0.3'
Vue.js '2.6.11'

Railsは6.0以降。

Vue.jsの導入

Webpackerを用いてインストール

ターミナル

rails webpacker:install:vue

Vue.jsを読み込む

app/view/layouts/application.html.erb

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

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
　　<%# 以下の一行を追加 %>
    <%= javascript_pack_tag 'hello_vue' %>
  </head>

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

localhost:3000へアクセスして、"Hello Vue!"と表示されていれば、
導入と読み込みは上手くいっています。

RailsにVue.jsを導入する準備

はじめに

Vue.jsの導入