Nuxt•2mo ago

Routing in layers

How to navigate to from <root>/app/pages/index.vue to <root>/layers/payments/app/pages/index.vue? Give me an detailed example.

17 Replies

kapa.ai•2mo ago

Hi @Zhaolin Lau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To navigate from <root>/app/pages/index.vue (the main app's index page) to <root>/layers/payments/app/pages/index.vue (the index page of a payments layer) in Nuxt, you need to understand how Nuxt Layers and file-based routing work together. How Routing Works with Layers When you use Nuxt Layers, the pages from all layers are merged into a single routing table. This means that if you have a layers/payments/app/pages/index.vue, Nuxt will generate a route for it, but the actual route path depends on the directory structure and whether there are naming conflicts. By default, if both the root app and a layer have an index.vue at the same path (e.g., /), the one from the highest-priority layer (usually the main app) will take precedence. To expose the payments layer's index page at a unique route, you should place it in a subdirectory, for example:
<root>/layers/payments/app/pages/payments/index.vue
This will generate the /payments route. Example Directory Structure

-| app/
---| pages/
-----| index.vue           // Main app's home page ("/")
-| layers/
---| payments/
-----| app/
-------| pages/
---------| payments/
-----------| index.vue     // Payments layer page ("/payments")

-| app/
---| pages/
-----| index.vue           // Main app's home page ("/")
-| layers/
---| payments/
-----| app/
-------| pages/
---------| payments/
-----------| index.vue     // Payments layer page ("/payments")

Navigating with <NuxtLink> To navigate from the main app's index page to the payments page, use the <NuxtLink> component:

<!-- app/pages/index.vue -->
<template>
  <div>
    <h1>Main Home Page</h1>
    <NuxtLink to="/payments">Go to Payments</NuxtLink>
  </div>
</template>

<!-- app/pages/index.vue -->
<template>
  <div>
    <h1>Main Home Page</h1>
    <NuxtLink to="/payments">Go to Payments</NuxtLink>
  </div>
</template>

This will render a link to the /payments route, which is handled by layers/payments/app/pages/payments/index.vuesource. Programmatic Navigation You can also navigate programmatically using the navigateTo utility:

<script setup lang="ts">
function goToPayments() {
  return navigateTo('/payments')
}
</script>

<template>
  <button @click="goToPayments">Go to Payments</button>
</template>

<script setup lang="ts">
function goToPayments() {
  return navigateTo('/payments')
}
</script>

<template>
  <button @click="goToPayments">Go to Payments</button>
</template>

source Important Notes - If you keep both index.vue files at the root of their respective pages directories, only one will be mapped to /. To avoid conflicts, always use a subdirectory for the layer's page. - The route path is determined by the directory structure under pages/ in each layer. --- Summary:
To navigate from your main app's index page to a page in a layer, ensure the layer's page is in a unique subdirectory (e.g., /payments). Use <NuxtLink to="/payments"> or navigateTo('/payments') to navigate between them. This approach leverages Nuxt's file-based routing and layer merging systemsource. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Zhaolin LauOP•2mo ago

Show me the config file @kapa.ai show me the config file

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! Here is an example of a Nuxt config file (nuxt.config.ts) that demonstrates how to use a layer (such as a payments layer) in your project. This example assumes you have a local layer in the layers/payments directory and want to extend it in your main project:

// <root>/nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    './layers/payments', // Extends the payments layer
  ],
})

// <root>/nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    './layers/payments', // Extends the payments layer
  ],
})

This configuration tells Nuxt to include the payments layer, merging its pages, components, and other features into your main project. The main app will have the highest priority, so if there are conflicting files, the main app's files will take precedence over the layer's files. You can add more layers or use remote/npm layers in the same waysource. If you want to specify a custom alias for the layer, you can do so using the meta property:

export default defineNuxtConfig({
  extends: [
    [
      './layers/payments',
      {
        meta: {
          name: 'payments',
        },
      },
    ],
  ],
})

export default defineNuxtConfig({
  extends: [
    [
      './layers/payments',
      {
        meta: {
          name: 'payments',
        },
      },
    ],
  ],
})

source This is all you need in your main project's nuxt.config.ts to use the payments layer. The rest of the routing and navigation is handled automatically by Nuxt's file-based routing system. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Zhaolin LauOP•2mo ago

@kapa.ai what about from payments to the root

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To navigate from a page in the payments layer (e.g., <root>/layers/payments/app/pages/payments/index.vue) back to the root app's index page (/), you use the same Nuxt navigation methods as you would in any Nuxt app. Example using <NuxtLink>:

<template>
  <NuxtLink to="/">Back to Home</NuxtLink>
</template>

<template>
  <NuxtLink to="/">Back to Home</NuxtLink>
</template>

Example using navigateTo:

<script setup lang="ts">
function goHome() {
  return navigateTo('/')
}
</script>

<template>
  <button @click="goHome">Back to Home</button>
</template>

<script setup lang="ts">
function goHome() {
  return navigateTo('/')
}
</script>

<template>
  <button @click="goHome">Back to Home</button>
</template>

This works because all routes from all layers are merged into a single routing table, so / will always point to the root app's index page unless it is overridden by a layer with higher priority. The navigation methods are the same regardless of which layer the page is in, as long as the route exists in the merged routing table.
See: Navigation and Programmatic Navigation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Zhaolin LauOP•2mo ago

@kapa.ai nuxt config for payments need to extend too? @kapa.ai nuxt config for payments need to extend too?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, the payments layer’s own nuxt.config.ts does not need to use the extends property unless you want the payments layer itself to extend from another layer. A minimal layer config looks like this:

// layers/payments/nuxt.config.ts
export default defineNuxtConfig({})

// layers/payments/nuxt.config.ts
export default defineNuxtConfig({})

This is sufficient for the payments layer to be used as a layer by your main project. The extends property is only required in the main project’s nuxt.config.ts (or in a layer if you want that layer to extend another one) — not in every layer by default. The documentation shows that a minimal Nuxt layer directory should contain a nuxt.config.ts file to indicate it is a layer, but does not require extends unless you want to chain layers together Authoring Nuxt Layers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Zhaolin LauOP•2mo ago

@kapa.ai why it says "No match found for location with path "/payments" when i navigate from / to /payments? my root config: // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ compatibilityDate: '2025-07-15', extends:['./layers/payments'], devtools: { enabled: true } }) and my payments layer config: export default defineNuxtConfig({})

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error "No match found for location with path /payments" typically means that Nuxt did not generate a route for /payments. Based on the knowledge sources, here are the most likely reasons and solutions: 1. Check the Directory Structure in the Payments Layer For Nuxt to generate a /payments route, you must have a file at layers/payments/app/pages/payments/index.vue (for Nuxt 4) or layers/payments/pages/payments/index.vue (for Nuxt 3). If you only have layers/payments/app/pages/index.vue, it will try to register the root / route, which will be overridden by your main app’s /app/pages/index.vue due to layer priority. Thus, /payments will not exist. Correct structure for /payments route:

layers/
  payments/
    app/
      pages/
        payments/
          index.vue   // This generates the /payments route

layers/
  payments/
    app/
      pages/
        payments/
          index.vue   // This generates the /payments route

or (for Nuxt 3):

layers/
  payments/
    pages/
      payments/
        index.vue

layers/
  payments/
    pages/
      payments/
        index.vue

See: File-based routing and layer merging
See: Directory structure for pages 2. Layer Priority and Route Conflicts If both your main project and the payments layer define a page at the same route (e.g., both have pages/index.vue), the main project’s page will take precedence and the layer’s page will not be accessible.
See: Layer Priority 3. Summary of What to Do - Ensure your payments layer has app/pages/payments/index.vue (not just app/pages/index.vue). - After making this change, restart your Nuxt dev server. 4. Example layers/payments/app/pages/payments/index.vue:

<template>
  <h1>Payments Page</h1>
</template>

<template>
  <h1>Payments Page</h1>
</template>

main app navigation (e.g., app/pages/index.vue):

<template>
  <NuxtLink to="/payments">Go to Payments</NuxtLink>
</template>

<template>
  <NuxtLink to="/payments">Go to Payments</NuxtLink>
</template>

--- If you follow this structure, Nuxt will generate the /payments route and navigation should work as expected. If you still encounter issues, double-check the file paths and restart the dev server to ensure Nuxt picks up the new routes. If your structure is already correct and the issue persists, the knowledge sources do not provide further troubleshooting steps for this specific error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Zhaolin LauOP•2mo ago

@kapa.ai payloadExtraction is only for nuxt generate?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources indicate that the payloadExtraction option is primarily described as enabling extraction of payloads for pages generated with nuxt generate, which is used for static site generation (SSG) and prerenderingpayloadExtraction docs. However, recent updates in Nuxt have expanded its scope. According to the pull requests, payload extraction is now also supported for ISR (Incremental Static Regeneration) and SWR (Stale-While-Revalidate) routes, not just for pages prerendered at build time. This means payload extraction is not limited strictly to nuxt generate but can also apply to routes using these caching strategiesenable payload extraction for ISR/SWR routes. In summary:
- Originally: payloadExtraction was for static builds with nuxt generate. - Now: It also works for ISR/SWR routes, so it is not only for nuxt generate anymore. If you are using regular SSR (server-side rendering) without prerendering or ISR/SWR, payload extraction does not generally applyenable payload extraction for ISR/SWR routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Routing in layers

Did you find this page helpful?