Nuxt•2mo ago

Setting the base pages path in layers config

In my main nuxt.config.ts file, I'm extending two layers like this:

extends: [
  './app/layers/candidates', 
  './app/layers/clients'
]

extends: [
  './app/layers/candidates', 
  './app/layers/clients'
]

Is it possible, in the config file of those layers, to set the base route path so that all pages inside the candidates layer automatically get prefixed with /candidates and those within clients with /clients? The candidates and clients layers will also have sub-layers inside them for further splitting up our code. If my question requires a more thorough example, please let me know!

5 Replies

kapa.ai•2mo ago

Hi @NietTeVertrouwen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can set base route paths for your layers using Nuxt's extendPages functionality. This allows you to modify the routes generated from your pages directory structure. Here's how you can implement this in your layer configuration files:

// app/layers/candidates/nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend': (pages) => {
      // Rewrite paths to add /candidates prefix
      for (const page of pages) {
        page.path = '/candidates' + page.path
      }
    }
  }
})

// app/layers/candidates/nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend': (pages) => {
      // Rewrite paths to add /candidates prefix
      for (const page of pages) {
        page.path = '/candidates' + page.path
      }
    }
  }
})

// app/layers/clients/nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend': (pages) => {
      // Rewrite paths to add /clients prefix
      for (const page of pages) {
        page.path = '/clients' + page.path
      }
    }
  }
})

// app/layers/clients/nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend': (pages) => {
      // Rewrite paths to add /clients prefix
      for (const page of pages) {
        page.path = '/clients' + page.path
      }
    }
  }
})

This approach uses the pages:extend hook (which is a wrapper around extendPages) to modify the path of each page in the respective layer, adding the appropriate prefix. The hook will be applied to all pages within that layer, including those in sub-layers. For more complex scenarios, you might need to add additional logic to handle specific cases or to ensure that paths are correctly formatted. If you need more granular control, you can use the full extendPages API from Nuxt Kit as shown in the Nuxt documentation. Let me know if you need a more detailed example for your specific use case! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@233229957449383946> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NietTeVertrouwenOP•2mo ago

@kapa.ai and will i have to do that in each nuxt.config.ts file of the sub-layers

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, you won't need to add the pages:extend hook in each sub-layer's nuxt.config.ts file. When you extend layers in Nuxt, the hooks from parent layers are applied to all their sub-layers automatically. The prefixing you set up in the main layer's configuration (candidates or clients) will cascade down to all pages in sub-layers. This is because Nuxt processes the layer hierarchy and applies the hooks in order. For example, if you have: - app/layers/candidates/nuxt.config.ts with the /candidates prefix - app/layers/candidates/sub-layer/pages/profile.vue The resulting route will be /candidates/profile without needing additional configuration in the sub-layer. However, if you need different prefixing behavior for specific sub-layers, you would then need to implement custom logic in those sub-layers' configuration files. If you encounter any issues with route prefixing in complex layer structures, you might need to use the pages:resolved hook which was introduced to handle more complex page modifications after the initial pages:extend hook has run, as mentioned in the Nuxt GitHub PR. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@233229957449383946> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Setting the base pages path in layers config

Did you find this page helpful?