Integrate VueJS to Rails with Webpacker

#Technic 01/22/2020

First make sure that you have installed rails, nodeJS and npm, and let’s generate a new Rails app with webpacker.

Rails new hello_vuejs
// into your Gemfile add the following line
gem 'webpacker'
// And install the dependencies
bundle

Then let’s initialize webpacker. Within our rails app folder, execute the following lines :

rails g webpacker:install
rails g webpacker:install:vuejs

This work well if you have an existing application, but for a brand new one, you can go faster with :

gem install webpacker
rails new hello_vuejs --webpack=vue

What did webpacker created

• config/webpack contains configurations for webpacker
  • environement configs
  • extras loaders
  • check webpacker documentation for more details
• app/javascript is where your code will go
  • note the packs folder, that’s where webpacker will be looking for creating your bundles
• node_modules
  • where javascript dependencies are stored

Finally you’ll find on the root of your rails app :

• babel.config.js - configuration for babel, a JS compiler
• package.json - package description for NPM
• postcss.config.js - configuration for webpacker postcss-loader
• yarn.lock - where yarn store what is installed

You’ll probably not have to touch any of those files.

Work localy

So Webpacker is based on yarn, so you can use it to add extra dependencies. For example, if you want (you will) add vuex :

yarn add vuex

To run your rails app, you have to run in one terminal as usual :

rails s

And it’s better to run in another one :

./bin/webpack-dev-server

Any changes you’ll make in the app/javascript files will trigger a compilation and a reload of your page (if you kept turbolinks).

Handle assets

One last thing to do before to start writting serious code business, the assets.

In your app/views/layouts/application.html.erb you have to make couple of changes :

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

By

 <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag  'hello_vuejs', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_vuejs', 'data-turbolinks-track': 'reload' %>

We keep the stylesheet_link_tag as you may want to keep/load general styles from /app/assets/stylesheets/application.sass For instance, things like your bootstrap or other framework …

Then javascript_pack_tag load your javascript, not application, but BUNDLE. And this bundle is the outcome of your app/javascript/packs/hello_vue.js. Webpack is generating it within public/packs folder.

Finally, we have also a stylesheet_pack_tag. As the name suggest, it will also load a BUNDLE. This time, this one comes from VueJS specifities. Indeed, .vue files contain html, js code and styles.

Webpacker take care of packaging all of them into a .css pack as well for us.

What’s next ?

I advise you to read about webpacker more in detail, as it can be quite magic when you are not use to configure it. For production, the precompile rake command will handle the packaging, so nothing to worry about here. So you are ready to code. I would just push you before to create file into /app/javascript to think about your architecture and create some folders there.

That’s it, happy coding.