Introduce Vue.js to Rails

memorandum

This time I introduced Vue.js to the application under development with rails, so I will record it as a memorandum. I hope it helps people who use Vue.js with rails for the first time. Also, since it is a beginner, please point out any mistakes! ruby 2.6.5 Rails 6.0.3.3

Step 1 Install webpacker

If you have installed it, please skip it. Described in Gemgile

gem "webpacker", github: "rails/webpacker”

If you can write it, bundle install.

After installation, execute the following in the terminal

$ bin/rails webpacker:install

This completes the webpacker installation

Step 2 Install Vue.js

Enter the following command in the terminal

$ rails webpacker:install:vue

Now you have created the files you need for Vue.js.

Step 3 Load Vue.js

Describe the following in the application.html.erb file under app / views / layouts

 <%= javascript_pack_tag "hello_vue" %>

When loaded normally, it will be displayed in the view as shown in the picture. https://gyazo.com/57e56686d2113920659f3dc9410f3a15

Finally

Now you can install Vue.js with rails! It's relatively easy to install, so please use it if you like! If you make a mistake, please teach me!

Recommended Posts

Introduce Vue.js to Rails
Until you introduce fonts to Rails
How to introduce jQuery in Rails 6
[Rails] Introduce Carrierwave
Introduce Rails Presenter
I tried to introduce CircleCI 2.0 to Rails app
Introduce two-factor authentication to your Rails application
Introduced Vue.js to an existing Rails app
Preparing to introduce jQuery to Ruby on Rails
[Rails 5.x] How to introduce free fonts
How to write Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
How to uninstall Rails
Introduce dotenv to Docker + Rails to manage environment variables
[Rails] How to easily introduce slick (slider function)
Introduce devise in Rails to implement user management functionality
Rails6 I tried to introduce Docker to an existing application
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to introduce Basic authentication
How to read rails routes
Introduce Maven to Tomcat project
How to use rails join
[Rails] Add column to devise
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
Pass parameters to Rails link_to
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
How to write Rails routing
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
Introduced gRPC client to rails
Introduction to RSpec-Everyday Rails Summary-
[Rails] How to use Scope
[With back tricks] How to introduce React to the simplest Rails
Try to introduce OpenCV to Android application
[Rails] How to install Font Awesome
Rails new fails to install mysql
[Rails] How to use devise (Note)
[Rails] Two ways to write form_with
[Rails] Learn yield to understand content_for
[Rails] How to write in Japanese
Introducing full calendar to Rails application
[Rails] How to prevent screen transition
[Rails] Various ways to delete data
How to use Ruby on Rails
[Rails] Easy way to check columns
[Rails] How to introduce kaminari with Slim and change the design
How to deploy Bootstrap on Rails
Build environment with vue.js + rails + docker
Docker + rails + Vue.js localhost connection refused
[Rails] How to speed up docker-compose