N
Nuxt•2mo ago
Dan

How to use a custom pages directory `(outside app/pages)` in Nuxt 4?

Hey everyone 👋 I'm currently exploring Nuxt 4 and trying to organize my project structure using a modular, feature-based layout. Here’s my current folder structure: 
app/
  common/
    pages/
      index.vue
      about.vue
  features/
    auth/
      login/
        pages/
          index.vue
      register/
        pages/
          index.vue
......
app/
  common/
    pages/
      index.vue
      about.vue
  features/
    auth/
      login/
        pages/
          index.vue
      register/
        pages/
          index.vue
......
I want Nuxt to automatically generate routes from app/common/pages instead of app/pages. So I tried the following config: 
// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  pages: {
    enabled: true,
    pattern: ['common/pages/**/*.vue'],
  },
})
// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  pages: {
    enabled: true,
    pattern: ['common/pages/**/*.vue'],
  },
})
But Nuxt still shows this warning: 
[Vue Router warn]: No match found for location with path "/"
[Vue Router warn]: No match found for location with path "/"
It seems like the router is enabled, but the files inside app/common/pages aren’t being picked up. Is pages.pattern supposed to work outside of app/pages/ in Nuxt 4, or does it only filter files inside app/pages/? If it’s not supported yet, is there a recommended way to achieve this structure (like aliasing or extending the route generation manually)? Thanks in advance! 🙏
4 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Dan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, the pages.pattern configuration option is designed to filter files within the default pages directory, not to change the pages directory location itself. According to the Nuxt configuration documentation, the pages.pattern option allows you to "provide a glob pattern or an array of patterns to scan only certain files for pages." The example shows: 
export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})
export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})
This pattern is relative to the pages directory itself, not the entire app structure. Solution: Change the Pages Directory Location To use a custom pages directory like app/common/pages, you need to configure the dir.pages option in your nuxt.config.ts: 
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  dir: {
    pages: 'app/common/pages'
  }
})
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  dir: {
    pages: 'app/common/pages'
  }
})
According to the directory configuration documentation, dir.pages is "the directory which will be processed to auto-generate your application page routes" with a default value of "app/pages". Alternative: Multiple Pages Directories with Layers If you want to include pages from multiple directories (like both app/common/pages and app/features/auth/login/pages), you should use Nuxt Layers. However, this would require restructuring your project to have separate layer configurations. Manual Route Extension For more complex scenarios where you need full control over route generation from multiple directories, you can use the pages:extend hook to manually add routes: 
import type { NuxtPage } from '@nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      pages.push({
        name: 'login',
        path: '/login',
        file: '~/features/auth/login/pages/index.vue',
      })
    },
  },
})
import type { NuxtPage } from '@nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      pages.push({
        name: 'login',
        path: '/login',
        file: '~/features/auth/login/pages/index.vue',
      })
    },
  },
})
However, this approach requires manually defining each route, which may not be ideal for your modular structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@867041700542152735> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Dan
DanOP•2mo ago
can component achieve the same thing? @kapa.ai
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: Sorry @Dan, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Did you find this page helpful?