Nuxt•3mo ago

Organized page structure

I have a different organization that I want to achieve with my file system. I am looking to have some pages in sub-folders like this app -> auth -> pages -> login.vue -> register.vue What must I configure to allow this type of page stucture in my application? I am running compatability: 4 as well.

2 Replies

kapa.ai•3mo ago

Hi @Nove1398 [876 Gaming]. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve a custom page structure like app/auth/pages/login.vue and app/auth/pages/register.vue with Nuxt v4 compatibility, you need to tell Nuxt to look for pages in non-default locations, since by default it expects all pages to be under app/pages/ (or pages/ at the root, depending on your configuration). Nuxt provides a pages option in nuxt.config.ts where you can specify a glob pattern or an array of patterns to scan for page files. For your structure, you should set the pattern to include your custom path:

// nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    pattern: ['auth/pages/**/*.vue'],
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    pattern: ['auth/pages/**/*.vue'],
  }
})

This tells Nuxt to treat all .vue files under app/auth/pages/ as pages and generate routes for them. Make sure that your srcDir is set to app (which is the default in v4 compatibility mode), or adjust the pattern accordingly if your structure is different Docs: pages config. Key points: - Use the pages.pattern option to specify custom locations for your page files. - The default behavior only scans app/pages/ (or pages/ at the root), so you must override it for custom structures. - This feature is available in Nuxt v4 compatibility mode and later GitHub PR: glob patterns for pages. If you have other folders with pages, you can add more patterns to the array. Example:

export default defineNuxtConfig({
  pages: {
    pattern: [
      'auth/pages/**/*.vue',
      'other/pages/**/*.vue'
    ],
  }
})

export default defineNuxtConfig({
  pages: {
    pattern: [
      'auth/pages/**/*.vue',
      'other/pages/**/*.vue'
    ],
  }
})

This will allow Nuxt to pick up all your custom-organized pages as routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Organized page structure

Did you find this page helpful?