Nuxt js dynamic route not work after generate

user_18001707 0
Viewed 544

in my project i am using nuxt js. I have a route looks like service/:slug After build and generate my all route works perfectly.Bellow code I use to generate dynamic route on generate

  generate: {

    routes(callback) {
      axios
        .get('url')
        .then(res => {
          const routes = res.data.data.map(service => {
            return '/services/' + service.slug
          })
          callback(null, routes)
        })
        .catch(callback)
      axios
        .get('https://url')
        .then(res => {
          const routes = res.data.data.map(offer => {
            return '/campaigns/' + offer.slug
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  }

But problem occurs when I create another new item from admin panel after build and generate.

seems I have three route when I run nuxt generate

  1. service/cash
  2. service/profit

now after host my dist folder in server then I hit www.url/service/cash and its work perfectly.

Now I create a new service item in admin panel called send-money Then when I hit on browser using www.url/service/send-money Its not working and get 404.

now I cant understand how can I solve this situation.

nuxtjs3 vue-router nuxt.js vue.js
1 Answers

When using SSG nuxt only generates the available pages in your project. This is how SSG works. Therefore, you need to create a custom script in your server to run ‍yarn build && yarn generate command after creating new page.

For example, let us assume you are creating a blog. When you use ‍‍‍yarn generate, nuxt generates the posts fetched from the database at that specific time and moves them inside dist folder. Therefore, you need to attach a custom script -which you need to somehow create in the backend- to run yarn build && yarn generate after creation of a new post.

user_44482200
Related