概要

RailsとVue.jsで開発を行うときにVue.jsの導入で躓いたので共有します
色々記事を見ながら試したんですけどエラーで詰まってハマってしまったので１人でも多くの人に共有できればと思います。

はじめに

Railsの環境構築は終わったものとする(rails new できる状態)

環境構築

環境構築にはhomebrewとrbenvを使用します
まだの方はこちらからインストールしてください

rbenv: https://github.com/rbenv/rbenv#installation
homebrew: https://brew.sh/index_ja

使用する環境

MacOS(m1)
Rails 6.1.5
Ruby 3.1.0
yarn 1.22.17
Homebrew 3.4.8

はじめにアプリケーションを作成するディレクトリを作成

$ mkdir rails_Vue_app
$ cd rails_Vue_app

Rails プロジェクトの作成

バージョンを指定して作成

$ rails _6.1.5_ new rails_Vue_sampleapp --webpack=vue

プロジェクトへ移動

$ cd rails_Vue_sampleapp

サーバー起動

$ rails s

http://localhost:3000 にアクセスしてこの画面が出たら成功です

HelloVueまで

railsプロジェクトの作成をしたのでHelloVueの表示をしていこうと思います

コントローラーの作成

$ rails g controller home index

Javascript_pack_tagを使ってjavascriptを読み込むようにする

javascript_pack_tag を使用することで app/javascript/packs 配下にあるファイルの読み込みが可能になります
今回は、読み込む対象としてhello_vue.js を指定します。
rails new の時にVueを指定するとVueファイルが自動で生成されるので今回は作らなくて大丈夫です

app/views/home/index.html.erb

  <h1>Home#index</h1>
  <p>Find me in app/views/home/index.html.erb</p>
+ <%= javascript_pack_tag 'hello_vue.js' %>

ルーティングを変更

config/routes.rb

- get 'home/index'
- # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+ root 'home#index'

これでrailsサーバーを再起動するとHelloVueが表示されるとの記事が多いのですが自分の環境だと何も表示されない😅

何故だああああああああああああああ😭😭
色々な記事を読んで調べるものの手がかりがなくて1日ほど経過

解決方法

Vue.jsのバージョンの問題かもしれないとの記事を発見

$ npm list vue

これでVue.jsのバージョンを確認できる
自分の場合は3.2.33だった

どうやら２系にすると上手くいくらしい

早速package.jsonファイルを編集していく

package.json

- "vue": "^3.2.33",
+ "vue": "^2.6.14",

に書き換えてインストール

$ npm install

バージョン確認

$ npm list vue

ちゃんと2.6.14になってた

さいどrailsサーバーを再起動

何故だーーーーー😱😱

先輩が調べてくださり、Vueを２系にするなら他のやつも依存関係が原因かもとのこと
試してみる