How can I use Vue.js to make a MPA? (Or should this project be a SPA?)

I have just picked up Vue and am trying to figure out the best way to structure this project.

Requirements:

• A basic MPA (traditional site) with about 6 pages. This will be static info.
• There will need to be a login section where customer will transmit data via form. Payment will happen here as well so will need to be secure.

My question is how should I be using Vue here? (I've already used VueCLI to scaffold out the project)

Should I:

A) use it for some components (Navbar, buttons, forms, etc) and keep structure traditional? How would i build out the User Dashboard to submit form info in this case - just as a new page?

B) or should I build this whole site as a SPA and have the new 'page' info loaded in on click? This would be easier for the login section?

One thing that may be clear on reading this is I don't understand well how the site will recognize users and deal with logins. Would this be easier if it were structured as a SPA? (more secure?)

(Also, I'm using this site to teach myself front-end development, specifically would like to learn more about building SPAs - so I realize I could use a web editor or easier solutions, but want to learn how to do a lot of this from 'scratch')

From what you've described it is entirely up to you. Both SPA or MPA would work fine and either would be totally reasonable given the requirements.

Have you worked with Vue-router before? SPAs don't need to appear as a single page to the user. They can still function as an MPA with different routes, page files, permissions, etc.

If you are hoping to use this project to teach yourself front-end web dev and know you have a particular interest in learning about SPAs, I think that is your answer.

I would go with an SPA and set up vue-router to manage your routes, and pages.