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

Question

I am launching a new application using Rails 5.1 and Vue.js with the integrated Webpacker package Vue.js (generated via the --webpack = vue flag).

I'm trying to understand the pros and cons of using a regular Rails MVC application and a Rails API application (creating a Rails application with the -api flag).

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

Given the fact that the Rails API has been integrated with the kernel since 2015, and the embedded Webpack through Webpacker pearls is completely new (Rails 5.1, 2017), what would be the best way to create a Rails application, Vuejs will be the frontend? Or, basically, Vui?

Stick to regular Rails with Webpacker Vue or Rails API with Webpacker Vue? And what are the trade-offs?

Some of these answers will simply come to talk about applications with a full MVC stack and SPA applications with APIs. However, are there any specific workflows of the Rails Way + Vue.js components that I should consider other than "this is a question about the fullstack MVC application and the SPA application."

I want to note that I understand that the answers will be somewhat stylistic preferences. Some may prefer one after another.

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

Thanks.

Answer 1

For using Rails in API mode --api there is official documentation about this, which can be found here:

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

This installs the JSON API, so it does not require any presentation layers or any middleware.

Using the command --webpack=vue you get view layers. A good example of how you could work with this can be found in GoRails:

https://gorails.com/episodes/tagged/VueJS (using VueJS for nested forms)

What you will see is that you can have several spa packages in your rails submission directory.

I personally will choose to separate the two codebases. This will mean the Rails 5 API, and then figure out how VueJS can exchange data, so everything works correctly.

This describes the configuration of the robust Rails 5 API, which is well tested:

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

In addition, excellent and accurate:

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

Please let me know your findings.