Rails 5.1+ Vuejs Webpacker: Normal Rails MVC vs Rails API

Question

I am starting a new app using Rails 5.1 and Vue.js, with the built-in Webpacker Vue.js pack (generated via the --webpack=vue flag).

I am trying to understand the pros & cons of using a normal Rails MVC app vs a Rails API app (generating a Rails app with the --api flag).

$ rails new someapp --webpack=vue
      vs.
$ rails new someapp --api --webpack=vue

Given the fact that Rails API has been merged into core since 2015, and built-in Webpack via the Webpacker gem is brand new (Rails 5.1, 2017), what would be the best way to build a Rails app, where the frontend is going to be Vuejs? Or, mostly Vuejs?

Stick to regular Rails with Webpacker Vue, or Rails API with Webpacker Vue? And what are the tradeoffs?

Some of this answer will simply come down to a conversation about full-stack MVC apps vs SPA apps with API. However, are there any specific Rails Way +Vue.js components workflow things I should consider, beyond the "this is a question of an fullstack MVC app vs. a SPA app."

I want to note that I realize that the answers are going to be somewhat stylistic preference. Some might prefer one over the other.

Both will work, but I would like to think about ease of use, compatibility and trade-offs of doing it one way verse the other.

Thank you.

Code-MonKy Code-MonKy · Accepted Answer · 2017-09-01T10:21:37

For using Rails in API --api mode there is official documentation about that to be found here:

http://guides.rubyonrails.org/api_app.html

This sets up a JSON API, so no view layers or any middleware for that.

When using the command --webpack=vue you do get the view layers. A good example of how you could work with that can be found at GoRails:

https://gorails.com/episodes/tagged/VueJS (Using VueJS for Nested Forms)

What you'll see is that like this you could have multiple SPA's spread out over your rails views directory.

I personally will choose for a separation of the two codebases. This would mean a Rails 5 API and then figuring out how VueJS can communicate back to it so everything works properly.

Setting up a solid Rails 5 API that's well tested is described here:

http://aalvarez.me/blog/posts/testing-a-rails-api-with-rspec.html

Also excellent and to the point:

https://paweljw.github.io/2017/07/rails-5.1-api-with-vue.js-frontend-part-0-stack-choices/

Please let me know your findings.

Rails 5.1+ Vuejs Webpacker: Normal Rails MVC vs Rails API

1 Answers