【Vue Rails】Vue + Railsで"Hello Vue!"表示

3 min read読了の目安(約3400字

Vue + Railsアプリ作成

◆ Railsアプリ作成

// "-webpack=vue"オプションでVue.js使用可能
$ rails new <アプリケーション名> -webpack=vue

◆ model作成

// カラム名:name データ型:text
$ rails g model sample name:text

◆ migrationファイル編集(Hello.Vue!表示には不要)

class CreateSample < ActiveRecord::Migration[6.0]
  def change
    create_table :sample do |t|
      t.text :name, null: false, default: ""
    end
  end
end

◆ マイグレーション

$ rails db:create      //データベース作成
$ rails db:migrate    //マイグレーション実施

◆ controller作成

class HomeController < ApplicationController
  def index
  end
end

◆ routes.rb編集

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

####◆ index.html.erb編集

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

◆ hello.vue.js(デフォルトで設定済)

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('hello'))
  const app = new Vue({
    el,
    render: h => h(App)
  })

  console.log(app)
})

◆ app.vue(デフォルトで設定済)

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

備忘録

◆ before_action

  • メソッドを定義して、before_actionにセットする

◆ rescue_from

  • 例外処理。エラー処理を行う画面を設定する
  • app/controller/application_controller.rbに記述する
class ApplicationController < ActionController::Base

  rescue_from ActiveRecord::RecordNotFound, with: :rescue404

end

遭遇したエラー

◆ エラー内容①

Webpacker::Manifest::MissingEntryError in Home#index

解決策:Webpackインストール

$ yarn
$ bin/yarn
$ webpack
$ webpack

◆ エラー内容②

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

解決策:vue-loaderダウングレード

$ npm remove vue-loader
$ npm install --save vue-loader@15.9.2
$ yarn add vue-loader@15.9.2

◆ エラー内容③

Sprockets::Rails::Helper::AssetNotFound in Home#index
 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

解決策:app/views/layouts/application.html.erb編集

<!-- javascript_include_tagの行を削除 -->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

参考文献