Rails since 5.1 comes with built in support for Webpack. When issuing a
rails new command we can add
[--webpack=WEBPACK] which has the explanation:
rails new [my app] --api --webpack=vue -T where the
-T skips test files because I use the RSpec testing framework. Webpack is handled by the Webpacker gem, deets here. A lot of Ruby and Node.js magic happens courtesy of this command compared to a simple Rails install.
The main reason I’m writing this tutorial is because even though there are other tutorials out there that show how to use Rails API with Vue.js they all use Vue-CLI to install a batteries-included Vue.js instance with Vue.js handling the routing. Now given that I’m using Rails I sort of want Rails to handle the routing and given that I’m handling Vue.js via the Webpacker gem I just hand the off the view to Mr. Vue from within Rails.
The problem is that
rails --api makes controllers inherit from an
ApplicationController which in turn inherits from
ActionController::API! This is great for apps which have complete separation of concerns but as it stops us from rendering regular Rails views out of the box it blocks us from testing out the installed Vue.js quickly. If we want to get up and running then we can tell one controller to inherit from
ActionController::Base (note, that says Action, not Application) and then use the
Webpacker creates a tiny Hello Vue! app for us. To see it in operation this is what we do:
Run the Webpack dev server. Bundler installs the binary stub in
./bin like any other binary stub. Open two new terminal windows or tabs in your application directory and run:
./bin/rails s to get Rails Server up and running in one and run:
./bin/webpack-dev-server to get Webpack building and serving modules in the other. Both Rails server and the Webpack dev server monitor file changes, the latter even does hot reloading out of the box for Rails which is novelty for Rails developers.
- Generate a simple scaffold:
./bin/rails g scaffold Example.
app/controllers/examples_controller.rband change the class parent to
- Add a simple method, say
- and a route to
get 'hello_example', to: 'examples#hello'to route to the method.
- Add a folder
examplesfor the view,
- and a
html.erbfile which loads Hello Vue!
app/views/examples/hello.html.erband lastly as a bonus,
- observe that changing the
datafield in the example code
./bin/rails webpacker:yarn_install by adding the dependencies you need to
package.json the same way we do with
bundle install by adding dependencies to
Gemfile. The only change I would like to make is to have both Gem packages and Node.js packages together in a special
Any questions? Did I get something wrong or leave out something important? Leave a comment.