NuxtN
Nuxt3mo ago
8 replies
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
......
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'],
  },
})

But Nuxt still shows this warning:
[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! 🙏
Was this page helpful?