Implementing dynamic routes with Nuxt.js

I encountered an issue while working on deploying my Nuxt.js page to Netlify. Everything went smoothly except for the dynamic pages I had created.

Below is a snippet from my nuxt.config.js file:

import axios from 'axios'
let dynamicRoutes = () => {
 return axios.get('http://xxx.xxx.xxx.xx/casinos').then(res => {
   return res.data.map(casino => `/casino/${casino.slug}`)
 })
}

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'static',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  generate: {
    routes: dynamicRoutes
  },

Any help or suggestions would be greatly appreciated!

Answer №1

Solved the issue by implementing this solution:

generate: {
    routes() {
      return axios.get('http://xxx.xxx.xxx.xx/casinos').then(res => {
        return res.data.map(casino => {
          return {
            route: '/casinos/' + casino.Slug,
            payload: casino
          }
        })
      })
    }
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best practice for importing React components?

In my experience with React, I've noticed two different ways of importing and extending components. The first way that I typically use is shown below. import React from 'react'; class SomeClass extends React.Component { //Some code } ...

JavaScript: Creating a new entry in a key-value paired array

I am in the process of creating a dynamic menu for use with jQuery contextMenu. I have encountered an issue when trying to add a new element, as it keeps showing the error message 'undefined is not a function'. The menu functions correctly witho ...

What causes JavaScript image to stop loading while displaying a prompt dialog?

I have nearly finished my project. I will include a codepen link at the end of the post for debugging purposes. What Should Happen? The img element has an id property of dragon, and the image specified in the src attribute should be pre-loaded as the defa ...

Utilizing Vue's data variables to effectively link with methods and offer seamless functionality

I am encountering difficulty retrieving values from methods and parsing them to provide. How can I address this issue? methods: { onClickCategory: (value) => { return (this.catId = value); }, }, provide() { return { categor ...

Unable to redirect page in Codeigniter after submitting button

I am facing an issue with inserting and updating data in my database using Ajax to my controller. Despite the data being inserted and updated accurately after clicking the button, the changes are not reflected on my view page until I manually refresh it. A ...

A guide on retrieving an integer from a JavaScript prompt using Selenium with Python

Currently, I'm attempting to develop a prompt that asks the user for a number on a webpage by utilizing Selenium in Python. Below is the code I've implemented, however, it is returning a None value. driver = webdriver.Chrome() driver.get(' ...

none of the statements within the JavaScript function are being executed

Here is the code for a function called EVOLVE1: function EVOLVE1() { if(ATP >= evolveCost) { display('Your cell now has the ability to divide.'); display('Each new cell provides more ATP per respiration.'); ATP = ATP ...

Sort columns using drag and drop feature in jQuery and AngularJS

Utilizing the drag and drop feature of jquery dragtable.js is causing compatibility issues with AngularJs, hindering table sorting functionality. The goal is to enable column sorting by clicking on the th label and allow for column rearrangement. Currentl ...

Having trouble installing handlebars on Node using the command line

I've been attempting to integrate handlebars with node using the instructions from my book. The guide advised me to install handlebars like so: npm install --save express3-handlebar. However, this resulted in an error npm WARN deprecated express3-han ...

Angular fails to function properly post rendering the body using ajax

I recently created a HTML page using AJAX, and here is the code snippet: <div class="contents" id="subContents" ng-app=""> @RenderBody() @RenderSection("scripts", required: false) </div> <script src="http://ajax.googleapis.com/ajax/ ...

Discovering the value within a nested array using JavaScript

This is a question that I have, var id = [1,2]; var oparr = [{ "off": [{ id: 1, val: "aaa" }, { id: 3, val: "bbb" } ] }, { "off1": [{ id: 2, val: "cccc" }] } ]; Given th ...

Is it necessary to add .html files to the public assets folder?

Currently, I am developing a web application using Node.js and Express. Typically, the views are stored separately from the public folder to account for dynamic content when utilizing Jade templating. However, if my .html files will always remain static, ...

The app mounting process encountered an error: the mount target selector "#app" did not return any element

Could you assist me in solving this issue? I've been struggling to find a solution for a while now. Where should I place my <script src="{% static 'js/custom-vue.js' %}"></script> to address the error indicated in the image below ...

Set up a WhatsApp web bot on the Heroku platform

I am currently in the process of developing a WhatsApp bot using the node library whatsapp-web.js. Once I finish writing the script, it appears something like this (I have provided an overview of the original script) - index.js const {Client, LocalAuth, M ...

Is there a way to optimize the re-rendering and redownloading of images files in map() when the useState changes? Perhaps we can consider using useMemo

This Chat application is designed with channels similar to the Slack App. Currently, I am utilizing a map() function for filtering within an array containing all channel data. The issue arises when switching between channels, resulting in re-rendering and ...

Is there a way to retrieve the values of two attributes and assign them to a new attribute?

I am working on a calendar table with multiple attributes and I am curious to know if it's possible to combine all attributes into one. Here is an example code snippet in HTML: <div class="day_num" data-date="17" date="July 2019">17</div> ...

Removing data from firestore/storage does not follow the expected pathway

I have created an image gallery for users using Firebase Storage and React, allowing them to upload and delete images. However, I am facing an issue where the deletion process is taking longer than expected. Expected flow: User clicks on the trashcan ico ...

Arrange the array first by a specific data type and then by the intended sorting sequence

I am trying to manipulate an array and move specific elements to the beginning while sorting the remaining elements in alphanumeric order. Here is an example of my initial array: const array1 = ['x123', 'y123', 'z123', 'a ...

How to structure a multi-dimensional array in JavaScript

I have received JSON data displayed below. [ { "id":5, "entity_id":122, "entity_type":"STUDENT", "edit_type":"UPDATE", "created_by":122, "created_date":"2017-04-04T18:30:00.000Z", "change_log_id":2, "fiel ...

Is it optimal to count negative indexes in JavaScript arrays towards the total array length?

When working in JavaScript, I typically define an array like this: var arr = [1,2,3]; It's also possible to do something like: arr[-1] = 4; However, if I were to then set arr to undefined using: arr = undefined; I lose reference to the value at ...