Creating Dynamic Routes in a Nuxt Application

This article will demonstrate how to create dynamic routing in Nuxt applications through an e-commerce example deployed on Netlify. This is a common scenario: you get data from the API, which may be unknown, large in number or change at any time. Fortunately, Nuxt makes the process of creating dynamic routing very smooth.

Let's get started!

Demo site GitHub repository

Create a page

In this example, I created some virtual store data using mockaroo and stored it in a static folder. Usually you will use fetch or axios and actions in the Vuex store to collect this data. Either way, we store the data in store/index.js with Vuex, which contains the UI status and an empty cart array.

import data from '~/static/storedata.json'

export const state = () => ({
  cartUIStatus: 'idle',
  storedata: data,
  cart: []
})

It should be noted that in Nuxt, we only need to create a .vue file in the pages directory to set the route. So we have an index.vue page as home page, a cart.vue page as shopping cart, etc. Nuxt will automatically generate all routes for us for these pages.

To create dynamic routes, we will create a directory to store these pages. In this case, I created a directory called /products because the route will point to the details view of each product.

In this directory I will create a page with an underscore, and a unique identifier that I want to use to create the route. If you look at the data in the cart, it looks like this:

[
  {
    "id": "9d436e98-1dc9-4f21-9587-76d4c0255e33",
    "color": "Goldenrod",
    "description": "Mauris enim leo, rhoncus sed, vestibulum sit amet, cursus id, turpis. Integer aliquet, massa id lobortis convallis, tortor riskus dapibus augue, vel accumsan tellus nisi eu orci. Mauris lacinia sapien quis libero.",
    "gender": "Male",
    "name": "Desi Ada",
    "review": "productize virtual markets",
    "starrating": 3,
    "price": 50.40,
    "img": "1.jpg"
  },
  …
]

You can see that the ID of each entry is unique, so this is a good candidate identifier, we name the page:

_id.vue

Now we can use the routing parameters to store the ID of a specific page in the data:

data() {
  return {
    id: this.$route.params.id,
  }
},

For the above entry, if we look at the data in devtools, it will be:

id: "9d436e98-1dc9-4f21-9587-76d4c0255e33"

We can now use it to retrieve all other information about this entry from storage. I'll use mapState :

import { mapState } from "vuex";

computed: {
  ...mapState(["storedata"]),
  product() {
    return this.storedata.find(el => el.id === this.id);
  }
},

We are filtering storedata to find entries with unique IDs!

Notify Nuxt configuration

If we build the application using yarn build, we're done, but we use Nuxt to create a static site for deployment, in this case on Netlify. When we create a static site using Nuxt, we will use yarn generate command. We must use the generate command in nuxt.config.js to let Nuxt know about dynamic files.

This command will expect a function that will return a promise parsed into an array like this:

export default {
  generate: {
    routes: [
      '/product/1',
      '/product/2',
      '/product/3'
    ]
  }
}

To do this, we will introduce data from a static directory at the top of the file and create the function:

import data from './static/storedata.json'
let dynamicRoutes = () => {
  return new Promise(resolve => {
    resolve(data.map(el => `product/${el.id}`))
  })
}

We will then call the function in the configuration:

generate: {
  routes: dynamicRoutes
},

If you use axios to collect data from the API (which is more common), it looks more like this:

import axios from 'axios'
let dynamicRoutes = () => {
  return axios.get('https://your-api-here/products').then(res => {
    return res.data.map(product => `/product/${product.id}`)
  })
}

In this way, we completed the dynamic routing setup! If you shut down and restart the server, you will see the dynamic routing for each product take effect!

For the last part of this article, we will continue to explain how the rest of the page was created and how we add projects to the cart, as this may be something you want to learn too.

Fill the page

Now we can populate the page with any format we want, because we can access all the information through product computed properties:

<main><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Dynamic Routes in a Nuxt Application"><h1 id="product-name"> {{ product.name }}</h1>
  <h4 id="product-price-dollar">{{ product.price | dollar }}</h4>
  <p>{{ product.description }}</p>

 ...
</main>

In this case, we also want to add the item to the cart in storage. We will add the ability to add and delete items (while not allowing the reduction of the number below zero)

<p>
  <button> 0 ? quantity-- : quantity = 0">-</button>
  {{ quantity }}
  <button> </button>
</p>
...
<button>Add to Cart</button>

In this component's method, we add the item plus a new field (quantity) to an array, which we pass as a payload to the mutation in the store.

methods: {
  cartAdd() {
    let item = this.product;
    item.quantity = this.quantity;
    this.tempcart.push(item);
    this.$store.commit("addToCart", item);
  }
}

In Vuex storage, we will check if the project already exists. If it exists, we will only increase the number. If it does not exist, we will add the entire item containing the quantity to the cart array.

addToCart: (state, payload) => {
  let itemfound = false
  state.cart.forEach(el => {
    if (el.id === payload.id) {
      el.quantity = payload.quantity
      itemfound = true
    }
  })
  if (!itemfound) state.cart.push(payload)
}

We can now use getters in storage to calculate the total, which will eventually be passed to our Stripe serverless function (another post about this is coming soon!). We will use reduce for this because reduce is very good at retrieving a value from many values. (I wrote more details here on how reduce works).

cartTotal: state => {
  if (!state.cart.length) return 0
  return state.cart.reduce((ac, next) => ac next.quantity * next.price, 0)
}

Demo site GitHub repository

That's it! We have set up individual product pages and Nuxt generates all individual routes for us at build time. You will definitely want to try Nuxt for yourself. ?

The above is the detailed content of Creating Dynamic Routes in a Nuxt Application. For more information, please follow other related articles on the PHP Chinese website!