Getting started with NuxtJS: A Vue beginner — Part 2
If you haven’t gone through the previous part, you can view it here. I have talked about the basic folder structure of a sample project.
In Part 1, I talked about how the Vue components created inside the pages folders are automatically converted to pages that can be accessed from the browser. Well, this is one of the many features that is provided to us by Nuxt.
Routing in Nuxt
For simple routing, it doesn’t require extra configuration to function. For example, let us create simple components in the project.
Nuxt would easily generate the routes for the files which will be similar to this.
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'work',
path: '/contact',
component: 'pages/Contact'
},
{
name: 'contact',
path: '/test',
component: 'pages/Test'
},
{
name: 'branch1',
path: '/branch1',
component: 'pages/branch1/index.vue'
},
{
name: 'branch1-leaf1',
path: '/branch1/leaf1',
component: 'pages/branch1/leaf1.vue'
}
]
}If you know Vue, then you might be thinking that as we have two files inside of the “branch1 ”folder, the name should be “branch1 for the last two routes. We can create such routing by changing the folder structure a little. You can see the image below. This particular method has been named as nested routing. If you closely notice, in nested routing, the path name has been named as :
[folder-name]-[file-name].
Clearly all I did was create the component with the same name as folder in the pages folder. But this will change the route generated by Nuxt and the new routes generated can be seen as below.
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'work',
path: '/contact',
component: 'pages/Contact'
},
{
name: 'contact',
path: '/test',
component: 'pages/Test'
},
{
name: 'branch1',
path: '/branch1',
component: 'pages/branch1.vue',
children:[
{
name: 'branch1-leaf1',
path: '/branch1/leaf1',
component: 'pages/branch1/Leaf1.vue'
}
]
},
]
}Nuxt creates routes easily but there is another interesting routing feature provided to us. Nuxt names it as “Dynamic Routing”.
Dynamic Routing:
Let us consider a case where we want our routes to be as following.
localhost:3001/user/[user-id]. Here the user-id will be dynamic, i.e. will depend on the user. It could be a number like 1,2 …x or random set of characters. The routes that need to be dynamic should be named with a ‘_’ before them. Creating a dynamic page within the branch1 folder.
A single route will be added to the routes generated by Nuxt, which is:
{
name: 'branch1',
path: '/branch1',
component: 'pages/branch1.vue',
children:[ ... {
name: 'branch1-id',
path: '/branch1/:id',
component: 'pages/branch1/_id.vue'
}
]
},
What happens when you want create a dynamic directory for it. Well it would work in a similar way.
The route to the about component inside the leaf2 would be created as below:
{
name: 'branch1',
path: '/branch1',
component: 'pages/branch1.vue',
children:[ ... {
name: 'branch1-leaf2-about',
path: '/branch1/:leaf2/about',
component: 'pages/branch1/_leaf2/about.vue'
} ]
},
This concludes the basic overview of the various routes created by Nuxt from the components and directories created by in the pages directory.
VueX: State management for Vue
As the project grows in size, the relation between the components and the global states that need to be maintained grows. For this, React used Redux which followed a flux architecture for state management. Later on, it could be done via effective use of hooks. These two different methods in React have a fairly easy learning curve once you get to know the lifecycle of states. I found the syntax of these two quite hectic at times. The repetition of code even though I followed the best practices. However, Vue with its whole architecture has simplified the bad aspect of the state management found in React. As discussed in the part 1. We can create a index.js file in the store directory where we can declare the states, getters, mutations and actions. To learn about what these terms are, you can follow the tutorial from ‘The Net Ninja’ on YouTube or follow the official documentation. We will create all of them within the index file for now. But it is a good practice to keep them separately for good practices.
// store/index.js
const state = () => ({
tempVal: 123,
})
const getters = {
getTempData: (state) => {
return state.tempVal
},
getDoubledTempData: (state) => {
return state.tempVal * 2
},
}
const mutations = {
updateTempVal: (state, payload) => {
state.tempVal = payload
},
}
const actions = {
updateTempVal: (context, payload) => {
context.commit('updateTempVal', payload)
},
}
export default {
state,
actions,
mutations,
getters,
}Let any component have the following code. I changed the Test component.
<template>
<div>
<p>Temp Data: {{ getTempData }}</p>
<p>Double Temp Data: {{ getDoubledTempData }}</p>
<button @click="updateTempVal(Math.random() * 100)">
Randomize temp data
</button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'Test.vue',
computed: {
...mapGetters({
getTempData: 'getTempData',
getDoubledTempData: 'getDoubledTempData',
}),
},
methods: {
...mapActions({
updateTempVal: 'updateTempVal',
}),
},
}
</script>
<style scoped></style>The result should be like this if you don’t run into any error.
If you know little bit of programming and JS, you should be able to understand what happened there. Initially, the data stored in the Vuex which was 123 is showed on initial render. The two getters, “getTempValue” and “getDoubledTempValue” are mapped as computed property and thus could be used directly to get the required values. On button click, the tempVal of store is updated to random value generated by Math.random() * 100.
The above is a simple use case of the store/state management provided by Vuex. This is nothing new to Vue users as they can easily implement Vuex to a normal Vue project that doesn’t use any type of framework.
I might continue this series to make a simple web application with Nuxt if I find the time. Thank you for reading. Hope you have a good day!!!
