[Vue Rails] "Hello Vue!" Displayed with Vue + Rails

Vue + Rails app creation

◆ Rails app creation

// "-webpack=vue"Optional Vue.js available
$ rails new <Application name> -webpack=vue

◆ model creation

//Column name: name Data type: text
$ rails g model sample name:text

◆ Migration file editing (not required for Hello.Vue! Display)

db/migrate/20200627045139_create_sample.rb


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

◆ Migration

$ rails db:create      //Database creation
$ rails db:migrate    //Migration implementation

◆ Controller creation

app/controllers/home_controller.rb


class HomeController < ApplicationController
  def index
  end
end

◆ Edit routes.rb

config/routes.rb


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

◆ Edit index.html.erb

app/views/home/index.html.erb


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

◆ hello.vue.js (set by default)

app/javascript/packs/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 (set by default)

app/javascript/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>

memorandum

◆ before_action --Define a method and set it to before_action

login_controller.rb


class LoginController < ApplicationController
  before_action :set_answer
  
  def set_answer
    @sample = "Hello World!"  
  end
end

◆ rescue_from --Exception handling. Set the screen for error handling --Write in `ʻapp / controller / application_controller.rb``

app/controller/application_controller.rb


class ApplicationController < ActionController::Base

  rescue_from ActiveRecord::RecordNotFound, with: :rescue404

end

Error encountered

◆ Error details ①

Webpacker::Manifest::MissingEntryError in Home#index

Solution: Webpack installation

$ yarn
$ bin/yarn
$ webpack
$ webpack

◆ Error details ②

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

Solution: vue-loader downgrade

$ npm remove vue-loader
$ npm install --save [email protected]
$ yarn add [email protected]

◆ Error details ③

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

Solution: Edit app / views / layouts / application.html.erb

app/views/layouts/application.html.erb


<!-- javascript_include_Delete tag line-->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

References

-Introduction to modern web applications starting with Ruby on Rails, Vue.js -I made something like a TODO app tutorial with Vue.js and Rails -Useful in practice! How to use before_action of Ruby on Rails [For beginners] -[[Rails] Error collection that tends to trip during installation](Webpacker :: Manifest :: MissingEntryError in Home # index) -Error: vue-loader requires @ vue / compiler-sfc to be present in the dependency tree # 1672 -[Npm / yarn] Downgrade the package

Recommended Posts

[Vue Rails] "Hello Vue!" Displayed with Vue + Rails
Easy to display hello world with Rails + Docker
[Rails 6] RuntimeError with $ rails s
Handle devise with Rails
[Rails] Learning with Rails tutorial
[Rails] Test with RSpec
[Rails] Development with MySQL
Supports multilingualization with Rails!
Hello World with Micronaut
Hello World with Spring Boot
[Rails] Express polymorphic with graphql-ruby
[Rails] Upload videos with Rails (ActiveStorage)
Japaneseize using i18n with Rails
Hello World with Spring Boot!
Preparation for developing with Rails
Hello World with VS Code!
Run Rails whenever with docker
[Docker] Rails 5.2 environment construction with docker
Use multiple databases with Rails 6.0
[Rails] Specify format with link_to
Hello World with Spring Boot
Hello World with SpringBoot / Gradle
[Rails] fields_for is not displayed
[Docker] Use whenever with Docker + Rails
Hello, World! With Asakusa Framework!
How to build Rails + Vue + MySQL environment with Docker [2020/09 latest version]
Create a Vue3 environment with Docker!
Create portfolio with rails + postgres sql
[Rails] Make pagination compatible with Ajax
Create pagination function with Rails Kaminari
Until "Hello World" with Spring Boot
Hello world with Kotlin and JavaFX
Hello World with Docker and C
[Grover] Generate PDF with Rails [2020 version]
[Rails] Initial data creation with seed
(Intellij) Hello World with Spring Boot
Track Rails app errors with Sentry
Hello World with GlassFish 5.1 + Servlet + JSP
Create PDF with itext7 ~ Hello World ~
[Environment construction with Docker] Rails 6 & MySQL 8
Connect to Rails server with iPhone
"Hello world" for ImageJ with Eclipse
Create My Page with Rails devise
Introducing React to Rails with react-rails
Hello World with GWT 2.8.2 and Maven
Initial data input with [Rails] seed_fu!
[EC2 / Vue / Rails] EC2 deployment procedure for Vue + Rails
Timeless search with Rails + JavaScript (jQuery)
Let's unit test with [rails] Rspec!