How to create a Laravel + Vuejs + SSR project?

Question

css

Good afternoon!
My task: to create a seo friendly commercial project using laravel + vuejs + mysql. The site is multilingual. For optimal loading of each of the pages - make separate js and css files.
But I had a few problems:
1. If I use the option: Lara views + vuejs components, all I see in the page code (the bot too) is only the component spinner. Accordingly, you need to use rendering on the server side.
2. If you use rendering, you need to do routing on vuejs, as far as I understand. It turns out that I will need to duplicate the routes both on the Laravel side and on the Vu side? And if you really have to do vuejs routes, then can you do it in the spa key, without reloading?
3. Which kind of rendering is best/can I use among: nuxt, vue-server-renderer, vueneue/ssr etc?
4. If I have to have several languages ​​on the site, should I do localization on the vue and laravel side?
5. How will routing work (with the option without reloading) if we split a separate js for each page? During the transitions, only the info that is necessary and belongs to this page will be rendered? Because there is still experience in implementing the usual spa with global js for all pages. Accordingly, the first download was long, as it loaded the scripts and styles of all pages.
I'm not asking for ready-made solutions from your side, at least sources where I can find answers to my questions or advice from you) Thank you in advance!)

Answer 1

drag bg onto the text - here is an example https://css-tricks.com/image-under-text/
and here is to move. you need to pull 2 ​​backgrounds both on the text and on the background and move them through js.

Answer 2

background-attachment:fixed; the parallax effect is called , you can do it in css, but if it’s more complicated you need to do it in javascript

Answer 3

1. background-clip: text + fallback via modernizr if text is dynamic
2. svg with texture on foreground + image on background - text is static/dynamic with JS
3. png with transparent text "holes" on foreground + background - text is static
PS Personally, I would do option 2.

Answer 4

You see a clean API on the stall, a full-fledged SPA on Vue. You do site routing only in the client. For SSR, you either install a node or v8js ( example of SSR with v8js ). That's all there is to it.
Well, use code splitting in webpack to cut the bundle into separate chunks.

Answer 5

Well, in my understanding, Laravel will have a pure API (rest or graphql)
then there is a separate nuxt application (well, if you do it in a simple way) inside which is your entire front, and localization, well, or you can synchronize single localization files between Laravel and Nuxt.
Nuxt looks at the front, all requests come to it, inside it makes requests to Laravel, and draws vue (there are separate methods for this, read the documentation).
If the transitions occur on the client, then the standard ajax requests to the Laravel service go away. We reloaded the page, nuxt made an ajax request to the Laravel service and returned the already rendered content.