N
Nuxt•3w ago
Lucas Dias

New project - Your project has pages but the `<NuxtPage />` component has not been used.

I've created a project using the nuxt new command, installed with nuxt/ui and nuxt/image and I am getting this error when navigating to any page
No description
3 Replies
kapa.ai
kapa.ai•3w ago
Hi @Lucas Dias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message "Your project has pages but the <NuxtPage /> component has not been used" means that you have a pages/ directory in your Nuxt project, but you haven't included the <NuxtPage /> component in your app.vue file. The <NuxtPage /> component is required to render the pages defined in your pages/ directory. Without it, Nuxt cannot display your routes. How to fix: Open your app.vue file and ensure it includes <NuxtPage />. For example: 
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
If you are using Nuxt UI, you should wrap your app with <UApp>, as shown above, and place <NuxtPage /> inside it. This setup is required for Nuxt UI components to work properly and for your pages to be rendered [Nuxt UI Installation Guide]. Why this happens:
Nuxt uses file-based routing, and the presence of a pages/ directory triggers the routing system. The <NuxtPage /> component is what actually displays the current page component based on the route. If you omit it from app.vue, Nuxt cannot render your pages and will show this error [Nuxt Docs: app.vue usage]. Summary of steps: 1. Open app.vue. 2. Add <NuxtPage /> inside the template, optionally wrapped with <UApp> if using Nuxt UI. This should resolve the error and allow your pages to render correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@444649908415234069> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Lucas Dias
Lucas DiasOP•3w ago
This is my setup app\app.vue 
<template>
    <UApp>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </UApp>
</template>
<template>
    <UApp>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </UApp>
</template>
app\layouts\default.vue 
<template>
    <main class="min-h-screen bg-gradient-to-b from-rose-50 to-amber-50">
        <layout-nav-bar />
        <UContainer> <slot /> </UContainer>
    </main>
</template>
<template>
    <main class="min-h-screen bg-gradient-to-b from-rose-50 to-amber-50">
        <layout-nav-bar />
        <UContainer> <slot /> </UContainer>
    </main>
</template>
app\pages\index.vue 
<template>
    <div>Test</div>
</template>
<template>
    <div>Test</div>
</template>
as suspected... cleaning .nuxt, node_modules and using npm instead of bun solved my problem

Did you find this page helpful?