Nuxt•5mo ago

Unable to view the pages/index.vue

I am new to nuxt. I just created a new project but I am unable to view the home page even after adding <NuxtPage /> in app.vue

6 Replies

kapa.ai•5mo ago

Hi @Börje. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If you have created a new Nuxt project and added a pages/index.vue file, but are unable to view the home page even after adding <NuxtPage /> in app.vue, here are some things to check based on the official documentation: 1. Correct Directory Structure
Make sure your pages/index.vue file is in the correct location:

   your-project/
   ├─ pages/
   │  └─ index.vue
   └─ app.vue

   your-project/
   ├─ pages/
   │  └─ index.vue
   └─ app.vue

2. Single Root Element in Page
Each page component (like pages/index.vue) must have a single root element. For example:

   <template>
     <div>
       <h1>Home Page</h1>
     </div>
   </template>

   <template>
     <div>
       <h1>Home Page</h1>
     </div>
   </template>

If you have multiple root elements or an HTML comment as the first element, the page may not render correctly during client-side navigation see details. 3. app.vue Setup
Your app.vue should include the <NuxtPage /> component to render the current page:

   <template>
     <NuxtPage />
   </template>

   <template>
     <NuxtPage />
   </template>

Or, if you want to add a layout:

   <template>
     <header>Header</header>
     <NuxtPage />
     <footer>Footer</footer>
   </template>

   <template>
     <header>Header</header>
     <NuxtPage />
     <footer>Footer</footer>
   </template>

More info 4. Development Server
Make sure your development server is running. Use:

   npm run dev

   npm run dev

Then visit <http://localhost:3000 in your browser see installation guide. 5. No HTML Comments as Root
Do not start your page template with an HTML comment, as this will break client-side navigation see example. If you have followed all these steps and still cannot see your home page, please double-check for typos or errors in your file structure and code. If the problem persists, please provide the content of your app.vue and pages/index.vue files for further help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

BörjeOP•5mo ago

That didn't solve my issue

The Honored One•5mo ago

Pages folder should be inside the app folder if you’re on Nuxt 4

BörjeOP•5mo ago

Ohhh Ok thank you, lemme try that OMG, it worked, thanks. I didn't see it in the docs

The Honored One•5mo ago

No problem 🙌 yeah, most of the stuff should be in the /app folder. You can read about the new folder structure here: https://nuxt.com/docs/4.x/getting-started/upgrade#new-directory-structure

Nuxt

Upgrade Guide · Get Started with Nuxt v4

Learn how to upgrade to the latest Nuxt version.

Gaming

Programming

Unable to view the pages/index.vue

Did you find this page helpful?