Hey Andrei!
I don't have any clean code examples easily handy, but let me work on it for you. Shoot me an email (email is in my profile) and i'll share a gist with you.
The tl;dr is:
[0] Use single file components
[1] API endpoints return JSON. Nothing super fancy, just taking rails objects and return JSON.
[2] What would have been a rails "view" corresponds with a route in my vue-router config. Nothing special there either.
[3] A top level page (think /index or /item)
[4] Each top level page calls a private endpoint, which is just its own natural route in the browser, and pulls down data it cares about through the JSON request. Each json object corresponds with an ES6 class which wraps any object specific logic (usually end up having to dupe some code between ruby + js here).
[5] Each top level page is broken down into components (widgets, major sections of the page), for code clarity.
[6] Anytime I find myself doing a for-each loop, I usually look to see if whatever the sub element is should be its own component. Usually the answer is yes (just depends on whether it has its own independent logic).
Everything is passed top down as an object, but I do break the "cardinal sin" of mutating props on the object. Traditionally, props should be immutable in Vue, which requires use of Vuex or an event bus to change state. I haven't had a case yet where this has been an issue, likely because each page transition reloads whatever data it needs, and the same object isn't being mutated by multiple components in a way that would cause debugging nightmares.
A few patterns I use to keep myself sane are wrapping objects with their own save methods (so I can just .save() ) an object and persist it back to the server.
I dunno, probably a lot more there, but I haven't given this any deep thought. Reach out, and let's exchange thoughts!
This is also exactly how I build Express APIs. One thing I'd add: when building an API, use Swagger (or something similar, but Swagger/OpenAPI have basically won, just do it). It makes API clients way, way easier to wrangle and removes a lot of the surprise from your application development. I sometimes forget that not everyone using React or Vue uses Swagger-based APIs that really do just kinda work, but they're a large part of why, for me, writing a fully-featured frontend is way better than entering Rails template hell or whatever. It's really, really easy: just a bit of state in the React component, kick off a fetch during componentWillMount, and drop a spinner that remains 'til you get an error or your data. If you're using TypeScript (and you should be), you'll have some pretty happy autocomplete based on the contents of your state and can just write code off the returned objects. Life's fun this way.
On the server side I use Express in Node and either `tsoa` or `inversify-express-utils`, while in Ruby I use my own Modern[0] library to autogenerate a Swagger document from the controllers I specify.
The tl;dr is: [0] Use single file components [1] API endpoints return JSON. Nothing super fancy, just taking rails objects and return JSON. [2] What would have been a rails "view" corresponds with a route in my vue-router config. Nothing special there either. [3] A top level page (think /index or /item) [4] Each top level page calls a private endpoint, which is just its own natural route in the browser, and pulls down data it cares about through the JSON request. Each json object corresponds with an ES6 class which wraps any object specific logic (usually end up having to dupe some code between ruby + js here). [5] Each top level page is broken down into components (widgets, major sections of the page), for code clarity. [6] Anytime I find myself doing a for-each loop, I usually look to see if whatever the sub element is should be its own component. Usually the answer is yes (just depends on whether it has its own independent logic).
Everything is passed top down as an object, but I do break the "cardinal sin" of mutating props on the object. Traditionally, props should be immutable in Vue, which requires use of Vuex or an event bus to change state. I haven't had a case yet where this has been an issue, likely because each page transition reloads whatever data it needs, and the same object isn't being mutated by multiple components in a way that would cause debugging nightmares.
A few patterns I use to keep myself sane are wrapping objects with their own save methods (so I can just .save() ) an object and persist it back to the server.
I dunno, probably a lot more there, but I haven't given this any deep thought. Reach out, and let's exchange thoughts!