How to Add Vue to a Rails 5.1 App
- Update Rails with
gem install rails -v 5.1
- I didn't have Node.js installed, so I had to install that next (you might not need to): https://nodejs.org/en/download/
- Install Yarn: https://yarnpkg.com/lang/en/docs/install/ . I used Homebrew. I had to update it first with
brew updateand then I was able to run
brew install yarn
- Run rails new with the webpack vue flag:
rails new my_app --webpack=vue.
- If you haven't already, run
rails db:migrateand fire up Rails server to make sure everything is up and running.
<head>of app/views/layouts/application.html.erb. Do that now.
- Create a controller. I used
rails g controller Teamsand in the controller add an index action:
class TeamsController < ApplicationController def index end end
Rails.application.routes.draw do resources :teams end
In config/environments/development.rb, add
config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080" This will enable
Run the webpack server on another port:
./bin/webpack-dev-server --host 127.0.0.1
Create index.html.erb in views/teams and navigate to http://localhost:3000/teams. If you see the "Hello Vue", you are good to go.