'Vue: How to enable multi page in an existing SPA project?

I have a single page (SPA) application written in Vue.

Now I need a separate page that should be available without being signed in.

To me it seems like a need to enable multi page app (MPA). I see in the documentation (https://cli.vuejs.org/config/#pages) that I need to set this up in vue.config.js. But I the documentation is unclear to me. Do I need to edit/rerun the Vue CLI setup? Or do some webpack changes. Just adding a new page entry with corresponding files does not work (webpack does not insert anything in html-file).

vue.jsvuejs2


Solution 1:[1]

From SPA View, i would likely go like this

Inside /views folder

- HomePage.vue (no auth)
- Login.vue 
  - /users/ subfolder (auth needed)
    - DashBoard.vue
    - About.vue
    etc

Then define the routes (paths,components,etc.) with requiresAuth as auth-check, redirects back to the route with HomePage.vuecomponent then.

and SPA mostly comes with MPA Challenges such as SEO, SSR concerns. The routing roughly the same to Vue/Nuxt.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SC Kim

Related Questions