How to gradually implement vue.js?

Question

Ruby on Rails

I'm going to gradually introduce vuejs into a large project. Implementing everything at once is long and difficult. I read that vue / react libraries are convenient and good for this, but how to implement it correctly?
Let's say there is a topbar logical block. I describe it in the components, I connect vue and it is already rendered on the browser side. So, component by component, I can gradually replace all server rendering with vue components.
And what about ajaxes? Now things like loading comments are an Ajax request, where the server returns js that finishes the comments. How to be here? Which way to choose:
1. Ajax return js like app.comments.push({}) and vue re-renders everything by its reactivity.
2. Use the vue plugin to make REST requests to the backend, and return only data in json on the backend.
Technically, you can either way. And how is it done in the modern world?

Answer 1

The standard approach - you pass data, the data gets into the components that display it appropriately.

Answer 2

With ajax, it's quite simple, I use the axios.js library.
I am now also transferring my project to vue, gradually learning it. Everything that is possible is given by ajax, everything that should be within the framework of SEO is given from the server side, from the vue side, using model binding or v-click calls and the like. For some kind of interactive, I use custom directives. For example, a custom directive associates a specific product from the list of products with its display, if it is in the cart, which is loaded via ajax. In general, at first I was racking my brain on how to link the list of products on the page with the basket, so I found a very good solution - a custom directive, and it’s good for SEO, and interactive in both directions, and you can do anything with the element.
Now I'm making a custom directive that replaces href in pagination links with filter parameters that are drawn through vue components.

Answer 3

You can transfer a site to vue in parts, I would even say that you need to do it in parts. In most cases, it makes no sense to do a purely one-page SPA with one global vue application - problems with indexing by search engines, another unusual UX for users, that's all. Highlight the places where active interactivity is needed and make them as vue applications. The initial data can be obtained not by Ajax, by the way, but placed during page generation on the backend in the global variable window and then taken from there in the vue application in beforeMount(). An example can be found here in the readme: https://github.com/spatie/laravel-blade-javascript... . In this case, the user will be relieved of the need to look at the Ajax data loading indicator after loading the page.
And with Ajax requests, of course, you need to do option 2. Only json backend sweat, no scripts - you will get confused. Also, check in advance why it is useful to normalize data for storage on the client, someday it will definitely come in handy - https://habrahabr.ru/post/332628/ , https://github.com/paularmstrong/normalizr
vuex, by the way, you can only use if you have applications that are dependent on each other (for example, a sidebar is made by the application, where numbers should change after user actions). If this is not necessary, then you can do without it.