This article aims to do Hello Vue! With Rails and Vue.
Anyway, it's rails new, isn't it? By the way, at this point you can install vue from the beginning with the --webpack = vue option, but this time I will introduce other methods. All you have to do is hit rails webpacker: install: vue later.
% rails -v
Rails 6.0.3.4
% rails new memo-memo -d mysql --skip-test
% cd memo-memo
Actually, I stumbled on the installation of mysql and wrote that article, so please refer to it. This time I will proceed with a body that has not failed. rails new fails to install mysql
% rails db:create
Created database 'memo_memo_development'
Created database 'memo_memo_test'
Hello World!
% rails s
Webpacker configuration file not found xxx/memo-memo/config/webpacker.yml.
Please run rails webpacker:install Error:
No such file or directory @ rb_sysopen - xxx/memo-memo/config/webpacker.yml (RuntimeError)
I was angry that webpacker was not installed
% rails webpacker:install
% rails s
=> Booting Puma
=> Rails 6.0.3.4 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.7 (ruby 2.6.3-p62), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop
Now that I've been able to say hello to the world, I'm going to use Vue with Webpacker. For those who don't know what Webpacker is, Webpacker is a library for putting Webpack in Rails, and it makes Webpack settings good. Webpack is a file that brings together files such as JS. To put it coolly, it's a module bundler. The reason for grouping the files together is to speed up the loading of the browser. It takes an overwhelming amount of time to get the file compared to calculating with the CPU, and reducing the number of times the file is read has a great effect on the loading speed of the browser. By the way, compilation is not the original function of Webpack, but it is realized by putting loader in webpacker. Also, in practice, with Webpacker, when an error occurs, it becomes difficult to understand what is the cause, so it seems that Webpack is used without fun. However, if you are a beginner like me, I think there is no problem entering from Webpacker. The story is going to be long, so I'll move on.
% rails webpacker:install:vue
I think some files have been added, but the important files are app/javascript/packs/hello_vue.js and app/javascript/app.vue. You can do hello vue! With these files.
app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
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>
The reason why hello_vue.js is required in addition to app.vue is that the vue file is read via the js file instead of being read directly. If you load hello_vue.js with html.erb, hello_vue.js is loading app.vue, so you can display app.vue. Hello Vue! Is defined in the variable called message in the script tag of the app.vue file, and the variable message is written in the p tag in the template tag, so Hello Vue! Is output. I think you can understand it somehow. I will omit the detailed explanation.
I'm going to create a simple page to display Hello Vue !. The flow is routing → controller → view. Here, when I access'localhost: 3000/home', I want to be routed to the index action of the Home controller and display app/view/home/index.html.erb from the index action. Display Hello Vue! By loading the hello_vue.js file with its index.html.erb.
Now let's set up the routing.
routes.rb
get 'home', to: 'home#index'
Do you know what happens if you access localhost: 3000/home in this state? I think it says'uninitialized constant HomeController'. It's natural because the Home controller is not defined. I will make a Home controller.
% rails g controller home
create app/controllers/home_controller.rb
invoke erb
create app/views/home
invoke helper
create app/helpers/home_helper.rb
invoke assets
invoke scss
create app/assets/stylesheets/home.scss
Open the created app/controllers/home_controller.rb file and add an index action.
class HomeController < ApplicationController
def index
end
end
This completes the definition of the index action. You don't have to define anything because render is implicitly called to execute the template associated with the action by name.
By the way, do you know what happens if you access localhost: 3000/home in this state?
It's a missing a template, isn't it?
Next, create app/view/home/index.html.erb. After creating it, load hello_vue.js.
Use javascript_pack_tag'
<%= javascript_pack_tag 'hello_vue' %>
Now, go to http: // localhost: 3000/home and see if "Hello Vue!" Is displayed!
thank you for your hard work. When it comes to actual development, it is better to execute the bin/webpack-dev-server command in addition to rails s. This command will do a hot reload of the JS file. It is also possible to write rails s and bin/webpack-dev-server in one file and execute two commands with one command. I won't go into details, but it requires a gem called foreman. You can find it by checking'foreman rails s bin/webpack-dev-server'. Also, for bin/webpack-dev-server, this article may be helpful.