One major important thing to bear in mind when developing a Nuxt SPA is the Nuxt context that's given to the asyncData and fetch methods, will lose their req and res objects because these objects are Node.js HTTP objects. In this section, we'll create a simple user login authentication, which you should already be familiar with. However, this time, we will make it in the Nuxt SPA. We will also create a page for listing users using dynamic routes, as we learned about in Chapter 4, Adding Views, Routes, and Transitions. Let's get started:
- Prepare the following .vue files or just make a copy from the previous chapter, as follows:
-| pages/
---| index.vue
---| about.vue
---| login.vue
---| secret.vue
---| users/
-----| index.vue
-----| _id.vue
- Prepare the Vuex store with the store state, mutations, actions, and the index file for handling user login authentication, as follows:
-| store/
---| index.js
---| state.js
---| mutations.js
---| actions.js
As we mentioned...
