Installing Vue + Rails 5.x
How to install Vue.js framework on Ruby on Rails.
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.
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
user_sessionand 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.
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.
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.
webpacker is a wrapper around Webpack and
webpacker co-exists with Rails' asset pipeline ("sprockets") and is intended to manage the assets of your Vue components.
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.
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.
Step 5 - Start Building
Create a Rails Controller
Create a controller named
PagesController with a method named
rails g controller pages home
Create a Vue.js component
Similar to a new controller, create a new component called
rails g vue home
Add Vue.js tags
As a simple example, paste these tags into
Start the Rails server and visit http://localhost:3000/pages/home