CODEWITHSUNDEEP
javascriptvue.jsvue-routernuxt.js
user9664977
user9664977

Reputation: 849

NuxtJS and How to Set a Default Page Layout?

So I just began working with NuxtJS and so far I'm loving it. I am now trying to figure out how to set a default page layout for pages. In NuxtJS the routing is set up in a page folder and so if I wanted to target a page with a slug, so something like this, test.com/about. I would create a folder in the pages folder named '_slug' and inside that _slug folder I would add an index.vue file. Then in that file I would set up the layout I want for pages with just a slug after the base URL.

I am now at a point where I have a page that the URL looks like test.com/about/history. I know I can add a folder named 'about' in the pages folder and add a folder within that named '_slug' with an index.vue file inside that to target that URL path.

But what I want is for pages with the test.com/about/(slug-name-here), to use the same page layout as the page->_slug->index.vue, without having to copy the code in that file and use it again in a page->about->_slug->index.vue file.

So what I am trying to figure out is if there is a way to tell NuxtJS to use page->_slug->index.vue for every page, unless it is specified in the pages folder by creating the needed folder structure.

Upvotes: 1

Views: 4936

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

You can control the routing by tapping into the extendedRoutes method of the router instance in your nuxt.config.js file:

export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/_slug/index.vue')
      })
    }
  }
}

Then don't create anymore pages, and every route will go to this particular vue file.

Upvotes: 2

Related Questions