What is the best approach to build a MPA project?

Hello! I’m new to VueJS, and so I have a question to the professionals here. :slight_smile:

I’m preparing myself in terms of materials and project structure, before starting my graduation project.

I’ll be using Spring Boot as my server side, and as such, as my router, in my MPA project.

Also, I’m thinking about using Vuetify in my project, for the frontend.

I’ve tried to use Vue CLI, but I found it a little difficult to compile and move the files, to my backend to be served.

Nonetheless, I noticed that the Vue CLI project structure is designed for SPA project, which is clearly not my situation.

So my question is, what is the best method of creating such projects as mine?

Should I use CDN for VueJS and Vuetify, or CLI?

If I should use CLI, then how should I combine it with a Spring Boot backend?

If there are any better approaches, I’ll be more than glad to hear from you.

Sincerely, Haim.

Not if you use https://router.vuejs.org for example. Or https://nuxtjs.org

I would typically use the backend to serve the initial view of the app and then be responsible to answer (data) requests made from the app or its components.

In this case, will I have full controll over the routes in my app from my backend?
(in case, for example, if I need to restrict some pages to access, if the user is not logged in, etc.)

No. You’d have to use something like navigation guards (https://router.vuejs.org/guide/advanced/navigation-guards.html) and supply data visible to logged in users from your backend only if your user is logged in.

If you want to have full control from your backend by serving different pages (where access each of which is checked by the backend) you are effectively serving multiple Vue apps (one for each page). This will work but you are responsible of transferring the data entered on one page (or its status) to the next page you independently serve from your backend.

1 Like

Thank you! I’ll take that into account!