Thoughts on SPA/MPA

With Laravel my solution was to create separate Vue SPA:s for certain parts of my content.

I used Laravel as usual but then i use Vue for let say customers.

Customers is an Vue SPA that contains everything and every function regarding customers like customers, projects, orders and so on.

In my master layout i load the vue customer.js dynamically.

Any thoughts in this when it comes to Adonis/Node?

Hey !

I don’t think you use the correct term here.

SPA means Single Page Application, so you only load an index.html which load tones of JavaScript with Client Side Router, etc.

Do you mean that you are using VueJs Component with Sub Component in a Multi Page App?

Probably using the wrong terms and i’m sorry.

I will build an MPS with Adonis and use it’s routers and edge views.

Then i will have isolated Vue parts for specific parts of the MPA and they will act like SPA:s with vue-router and so on.

The reason is that i don’t want an pure SPA with an huge file for all stuff loaded. I will be able to use Vue only on part that requires two way binding and other things that requires Vue.

So the end result will be an ordinary Adonis MPA and a bunch of individual SPA:s that are included/used only on the part where they needs to be used.

Like you did in your boilerplate you had an VueJs Wrapper <div id="adonis-app"> in master that will contain every vue stuff compiled to a single file called app.js. Think of my solution as an bunch of components that i load from individual .js files dynamically and the reason i call them SPA:s i that they contain everything of an SPA like vue-router, vuex and so on.

Okay :+1:

So where do you struggle? Since your frontend can be exactly the same between Laravel & Adonis.
Remember, the frontend & backend stuff are separated.

No struggle.

This solution were “approved” as an Hybrid solution in the Laravel community so i was just interested in you Adonis/node-guys opinions.

Hi,
I think that if you know what you do and why you do it like that, it’s good. It depends on the projects.
One way to do is not the best for all.

1 Like

I have also done the same before. I created Laravel SPA with Vue, though there were some difficulties at the beginning.