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 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.
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 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.