It's nice to see Ruby on Rails remaining relevant within the tech community by embracing web-trends such as API-mode, Webpack support and web-app frameworks. With these new features, developers can now mix-and-match their backend service with other tools such as Angular, React, and Vue.

Unlike React and Angular, Vue.js simplifies front-end development through a straightforward syntax, clear documentation, tooling, and third-party libraries. If you need a few data points to show its popularity, Hackernoon has a few helpful stats. From my experience developing web apps, what I like about Vue is the simplicity in both the setup and development process. For example, although Angular is excellent for large-scale applications, I've noticed that the initial learning curve is somewhat high.

As a producer, what I appreciate about Vue.js + Rails is that the frameworks provide more apparent separation of client and server responsibilities. You can have one team working on the front-end development, and a second-team working on the server-side development and even decouple them entirely if through Rails API-only mode.

Downsides

There are downsides to a Vue/Rails combo. Here is a non-comprehensive list:

• Juggling two project directories can get messy, and contextually switching between two frameworks might also prove counterproductive for a single developer.
• Abandoning Ruby Helpers such as authenticate_user!, user_signed_in?, current_user, user_session and form helpers is a big deal. Not an excellent idea if you're looking to do rapid prototyping.
• Developers will need to abandon Rails router for Vue router. It's all or nothing.
• Vue is component-based, and that may prove challenging to traditional Rails developers familiar with layout development using ERB, SLIM.

This article will not answer these strategic questions. But, it will help you get started using both technologies so that you can draw your conclusions.

This article is also specifically for Rails 5.x developers who want to use Vue.js. The critical difference is that Rails 5 users need to install Webpack. If you have the luxury of starting a Rails 6 app, Webpack is pre-installed.

---

Step 0 - Install Package Managers

Read this tutorial on how to install package managers for Mac.

Step 1 - Create a Rails App

Using this specific version of Ruby, install this specific version of Rails and include webpack and SQLite3 database.

RBENV_VERSION=2.5.3 rbenv exec rails _5.2.1_ new rails_vue_app --webback=vue -d sqlite3

Change directory into the folder.

cd rails_vue_app

Step 2 - Set Up Vue.js

Once you've installed Ruby, Rails, and Vue, our next step will be to add a few extra libraries to make them work together.

Install Vue.js

yarn global add @vue/cli

Install Vue client

yarn global add @vue/cli-service-global

Step 3 - Configure Rails

Install Rails libraries

Once your Rails app has been created, open Gemfile and append these two libraries to the bottom.

# Custom Libraries
gem 'webpacker', '>= 4.x'
gem 'vueonrails', '~> 1.x'

Run the install.

bundle install

Install webpacker

webpacker is a wrapper around Webpack and yarn. It helps with Javascript pre-processing and is meant to provide a clear interface for Vue.js to manage assets and interact with Rails. webpacker co-exists with Rails' asset pipeline ("sprockets") and is intended to manage the assets of your Vue components.

rails webpacker:install

vueonrails makes it easy to scaffold Vue components onto Rails projects. It provides the required configurations and dependencies to give a Rails generator-like experience.

rails webpacker:install:vue

Step 4 - Configure Vue

This step goes beyond the webpacker:install commands and adds Vuex, Vue_component helpers, and other things to simplify the problem of state management and passing data between Vue and Rails. It makes life easier for developers by easily mapping Rails resources to Vuex state.

rails vue:setup

Step 5 - Start Building

Create a Rails Controller

Create a controller named PagesController with a method named home.

rails g controller pages home

Create a Vue.js component

Similar to a new controller, create a new component called home.

rails g vue home

Add Vue.js tags

As a simple example, paste these tags into app/views/layouts/application.html.erb.

<%= javascript_pack_tag "home" %>
<%= stylesheet_pack_tag "home" %>

Run Server

Start the Rails server and visit http://localhost:3000/pages/home

rails s

---

Appendix

• Vue Lifecycle Diagram