Dynamic URL paths in Nuxt JS / Vue

Question

Nuxt JS creates its routes based on the file system. You typically require templates to be set up for the dynamic params, like _id.vue etc.

However, my backend developer has a CMS that spits out JSON with links to pages that sit on entirely dynamic URL's.

e.g. /about-us/people/michael/

There's no way for me to know ahead of time how these kinds of URL's should be routed with Nuxt's file-based system.

Some links could look like: /articles/hello-world/ etc.

Is there any info on how I can capture all routes, no matter how far the nesting goes?

I'm able to do the first level by having index.vue and _slug.vue, (e.g. /about-us/). Beyond that, it's a mystery how I'd solve having /about-us/people/ etc without it throwing a 404.

Help much appreciated.

Aldarund · Accepted Answer · 2018-08-01 17:57:39Z

3

You could use extendRoutes

module.exports = {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'catchall',
        path: '*',
        component: resolve(__dirname, 'pages/catchallpage.vue')
      })
    }
  }
}

answered Aug 1, 2018 at 17:57

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Giovanni Pumo Over a year ago

Yes, this is the route I end up going down. Thanks.

Collectives™ on Stack Overflow

Dynamic URL paths in Nuxt JS / Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related