N
Nuxt•4w ago
DefNotMC

Pages not working with app.vue

The issue is this: When i have a /app/app.vue - with even the most minimal template possible: 
<template>
  <NuxtPage />
</template>
<template>
  <NuxtPage />
</template>
It fails to load any page I request, such as "index.vue", "coolpage.vue" The page is basically app.vue, but without the <NuxtPage />... If i add some content to app.vue - it displays the content The console displays this warning when i try to load the page or any pages: WARN Create a Vue component in the pages/ directory to enable <NuxtPage>
No description
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @DefNotMC. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing—where <NuxtPage /> in /app/app.vue does not render any pages from your pages/ directory and you see the warning: 
WARN  Create a Vue component in the pages/ directory to enable <NuxtPage>
WARN  Create a Vue component in the pages/ directory to enable <NuxtPage>
—suggests that Nuxt is not detecting your pages/ directory or its contents. Key things to check based on the official documentation and related issues: 1. Directory Structure in Nuxt 4:
In Nuxt 4, the pages/ directory should be placed inside the /app directory, i.e., /app/pages. If you have your pages/ directory at the project root (as in Nuxt 2 or early Nuxt 3), Nuxt 4 will not recognize it, and <NuxtPage /> will not work as expected.
In Nuxt 4 your /pages folder should be placed within the /app folder, i.e. /app/pages Github Issue #32761
2. Minimal Working Example:
Your /app/app.vue should look like this: 
   <template>
     <NuxtPage />
   </template>
   
   <template>
     <NuxtPage />
   </template>
And your pages should be in /app/pages/index.vue, /app/pages/coolpage.vue, etc.
When you have a pages/ directory, you need to use the <NuxtPage> component to display the current page Docs > Directory-structure > App > app.vue
3. If the Directory is Misplaced:
If your pages/ directory is not inside /app, Nuxt will not include the router and will show the warning you described.
Nuxt provides file-based routing... this directory is optional, meaning that vue-router won't be included if you only use app.vue Docs > Directory-structure > App > pages
How to fix: - Move your pages/ directory into the /app directory so the structure is: 
  /app
    /app.vue
    /pages
      /index.vue
      /coolpage.vue
  
  /app
    /app.vue
    /pages
      /index.vue
      /coolpage.vue
- Restart your development server after making this change. Summary:
Your issue is caused by the pages/ directory not being in the correct location for Nuxt 4. Move it to /app/pages and <NuxtPage /> will work as expected. If you have already done this and still see the warning, please double-check the directory names and restart your dev server. If the problem persists, there may be another configuration issue, but the knowledge sources do not provide further troubleshooting steps beyond this directory structure requirement. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@969929575595376660> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?