Static GitHub Issues

[1768] SPA mode how to's

prev: Axios JWT Token Cookies
next: Client.js -> TypeError: Cannot read property 'load' of undefined

I am opening this issue to resolve all the mysteries around the SPA mode. Seems like I am not the only one having problems with spa mode.

First of all I do not require ssr that's why I switched it off.

SPA mode setup

First of all I would like to add instructions how to setup spa mode. There are no instructions in documentation how this is done correctly. I am still not sure if I am doing it right but based on some other issues opened here I came to this:

  1. Add mode: 'spa' to the nuxt.config.js
  2. Modify package.json and change scripts key to this:
"scripts": {
    "dev": "nuxt --spa",
    "build": "nuxt build --spa",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  1. run npm run dev and navigate to localhost:3000

Can someone confirm this is the right setup?

SPA mode issues and questions

ISSUE 1 404 page not found. For some reasons some of the pages in the get 404 error. I have opened issue > https://github.com/nuxt/nuxt.js/issues/1767. If I switch to universal mode page is working. There is another possible issue related to this > https://github.com/nuxt/nuxt.js/issues/1661

QUESTION 1 Are the page and layout middleware(s) executed in the spa mode on the client side? Are they executed on page refresh?

QUESTION 2 - Are asyncData() or fetch() the right places to call backend API to get page data or should we use mounted() or created() hook to call the API?

QUESTION 3 - Where to add authentication checks in spa mode? Should this be added as a registered NuxtJS plugin and registered in nuxt.config.js or should this be part of the page/layout middleware?

Thanks for answers.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1588">#c1588</a>)</em></sub></div>