Warning from NuxtLayout: Your project has layouts but the `<NuxtLayout />` component has not been used. #24912

doantu05150 · 2023-12-27T08:06:55Z

Environment

package.json

{ "nuxt": "^3.9.0", "typescript": "^5.2.2", "vue": "3.4.0-rc.3", "vue-router": "latest" }

Reproduction

I upgraded Nuxt from 3.8.2 to 3.9.0

Describe the bug

I upgraded to the latest Nuxt version (3.9.0), Vue (3.4.0-rc.3), and the latest vue-router, but I'm getting a warning.

There's no error, but rather annoying.

Additional context

Only my app.vue file contains <NuxtLayout> component. Here is my app.vue file:

Logs

[Vue warn]: Component LayoutLoader is missing template or render function.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

The text was updated successfully, but these errors were encountered:

github-actions · 2023-12-27T08:30:03Z

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

doantu05150 · 2023-12-27T10:00:28Z

I tried reproducing a demo using the latest version, but I couldn't replicate the bug. The problem might be related to the upgrading process rather than the current version.

daver987 · 2023-12-27T11:30:45Z

I have got the same issued when I updated one of my projects as well, I'm still trying to track down what the guilty culprit is, I will let you know if I get it figured out.

chris-visser · 2023-12-27T17:23:37Z

Same here. Removing my .nuxt folder fixes it for me. (did'nt even need restart the app). Looks to me like it somehow loses track of app.vue

waleedtariq109 · 2023-12-28T08:46:28Z

I'm also facing the same issue as well i don't know why this issue is closed even though it's a nuxt 3 bug.

[Vue warn]: Component LayoutLoader is missing template or render function.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[Vue warn]: Component LayoutLoader is missing template or render function.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

agracia-foticos · 2023-12-28T09:01:33Z

Same issue!!!

manniL · 2023-12-28T09:39:17Z

@waleedtariq109 Please provide a reproduction then - happy to reopen the issue if you can provide one 👍🏻

manniL · 2023-12-28T10:12:53Z

@armenr Without a reproduction we can't do much here. Also, no full-blown project is needed (and actually discouraged as the reproduction should be minimal) 😋

chris-visser · 2023-12-28T12:39:05Z

I found a consistent reproduction! Here's the link https://github.com/chris-visser/layout-not-used

Reproduction NuxtLayout component not used

Install dependencies. (I've used pnpm). Also I've used an older project with a previous version (3.8) and upgraded it to 3.9. Not yet checked with a fresh fully up to date install
Start the app using pnpm dev
Restart laptop (I'm using Windows)
When reinstalling or removing the nuxt folder, the warning disappears

It looks like it looses references / symlinks on laptop restart?

One other note. Not sure if related, because it might be my IDE

When adding a new component my PyCharm IDE doesn't recognize that new component's auto import
When using in another place after that it does somehow recognize it. This behavior is consistent
everywhere in the app (layouts, pages and other components)

Smart-Ace-Designs · 2023-12-28T16:02:39Z

If it helps, this only happens for me if I use Vuetify with a project and more specifically the "vuetify-nuxt-module". I cannot get it to happen with a generic out-of-the-box Nuxt project or one with, for example, Nuxt UI added to it.

L422Y · 2023-12-28T21:21:08Z

I am using a single layout (default)

It seems like in some cases an error in the application will prevent _isNuxtLayoutUsed from being set at all

Not sure if this helps but I thought it couldn't hurt.

cropr · 2023-12-29T12:38:59Z

After some testing. It is an issue of Nuxt 3.9, it is not present Nuxt 3.8

Steps to reproduce:

install nuxt
add vuetify as in https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3
edit app.vue to

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Aareksio · 2023-12-30T10:19:03Z

Not sure if reproduction is still needed, but here is one without 3rd party libs:
https://stackblitz.com/edit/github-pbst5v

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

manniL · 2024-01-01T14:15:57Z

Please stop posting "+1" or "me too". Instead, simply 👍🏻 the issue!

If you have more info to add (e.g. another case/reproduction/...), feel free to do so though.

Also important to note: This does not break any behavior. It is just a warning and won't impact your app except logging this in dev.

sharpprahs · 2024-01-07T10:42:05Z

worked for me: 1) delete .nuxt 2) add <NuxtLayout> <NuxtPage/> </NuxtLayout>

devtrex007 · 2024-01-10T06:27:45Z

Make NuxtLayout top tag in your app.vue it will fix that issue.

mabutalid-kroma · 2024-02-03T16:57:28Z

This issue seems to happen when you use navigateTo() in the global middleware

ndro · 2024-02-05T07:41:21Z

@mabutalid-kroma me too

I didn't get any warning until adding middleware with navigateTo('/)

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layouts / default.vue

<template>
  <div>
    <slot />
  </div>
</template>

Trying middleware from Docs
middleware / test.ts

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  // In a real app you would probably not redirect every route to `/`
  // however it is important to check `to.path` before redirecting or you
  // might get an infinite redirect loop
  if (to.path !== '/') {
    return navigateTo('/')
  }
})

then some pages

<template>
  <div>
    <h1>Tes Page</h1>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ["test"]
})
</script>

My environment

"nuxt": "^3.9.3",

with

node v20.11.0

and yes, for my case, this is just warning didn't break application

mrnasil · 2024-02-05T13:35:16Z

Any update?

[nuxt] Your project has layouts but the <NuxtLayout /> component has not been used.

danielroe · 2024-02-05T20:29:49Z

Your issue may be resolved in 3.10.1. If not, please open a new issue with reproduction.

gemyago · 2024-02-06T07:45:10Z

Upgraded to 3.10.1, same issue. I could only fix it by downgrading to 3.8.

Oscar2av · 2024-02-11T17:23:48Z

Same issue here, I am using Nuxt 3.10.0. The problem only appears while using navigateTo inside a middleware.

fmichenaud · 2024-02-18T10:18:55Z

No longer having the issue on 3.10.2

Patrity · 2024-02-19T01:32:59Z

Still encountering this issue as of 3.10.2

  "dependencies": {
    "@heroicons/vue": "^2.1.1",
    "@nuxtjs/supabase": "^1.1.6",
    "@nuxtjs/tailwindcss": "^6.11.4",
    "@nuxtjs/turnstile": "^0.6.3",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@tailwindcss/forms": "^0.5.7",
    "@vueuse/nuxt": "^10.7.2",
    "nuxt": "^3.10.2",
    "nuxt-headlessui": "^1.1.5",
    "vue": "^3.4.19",
    "vue-router": "^4.2.5"
  },

pavloskafritsas · 2024-02-20T09:41:15Z

I'm also having the same issue (using the latest nuxt version: 3.10.2)

here is my App's structure:

here is my browser's console output:

edit: I found the issue that triggers the warning.
PLayout is a custom wrapper that provides some teleport slots.
To ensure the teleport slots are available before the page components are loaded, I m using a var that I manually set to true via PLayout's onMounted hook. This flag controls the v-if of the PLayout's default slot (where the NuxtPage component renders).

If I remove the flag, the NuxtPage is available right from the start and the warning disappears.

Dino-Kupinic · 2024-02-25T00:38:49Z

For me the problem was that i forgot <slot /> in my default layout.

pavloskafritsas · 2024-02-25T09:28:50Z

IMO, this check should run when the page has finished loading, so that v-if conditions can be evaluated first, before this check applies.

FelixBecquart1990 · 2024-02-27T07:36:27Z

The error was explained with more details in error.stack. Thanks to that, I found my error and was able corrected it.

To get the error.stack: create at the same level that app.vue an error.vue.

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>

    <div>{{ error.statusCode }}</div>

    <div>{{ error.message }}</div>

    <div v-html="error.stack"></div>

  </div>
</template>

abarke · 2024-05-06T08:22:01Z

I'm also getting this error in a Nuxt Ionic App. In this case I am not using NuxtPage, because I'm using ion-router which I assume uses NuxtPage. Any way to disable this false positive warning?

------------------------------
- Operating System: Windows_NT
- Node Version:     v22.1.0
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    2.8.1
- Package Manager:  pnpm@8.15.5
- Builder:          -
- User Config:      devServer, ssr, css, modules, electron, ionic, vite, nitro
- Runtime Modules:  @nuxtjs/ionic@0.13.1, nuxt-electron@0.7.0
- Build Modules:    -
------------------------------

danielroe · 2024-05-07T08:12:24Z

IonRouter does not use NuxtPage. This should be worked around in https://github.com/nuxt-modules/ionic.

doantu05150 added 3.x pending triage labels Dec 27, 2023

manniL added the needs reproduction label Dec 27, 2023

doantu05150 closed this as completed Dec 27, 2023

This comment was marked as off-topic.

Sign in to view

This comment was marked as duplicate.

Sign in to view

This comment was marked as off-topic.

Sign in to view

manniL reopened this Dec 29, 2023

manniL added 🔨 p3-minor and removed pending triage needs reproduction labels Dec 29, 2023

This comment was marked as duplicate.

Sign in to view

productdevbook mentioned this issue Dec 30, 2023

feat(nuxt): ui module oku-ui/pergel#82

Merged

1 task

This comment was marked as duplicate.

Sign in to view

manniL mentioned this issue Jan 2, 2024

Href use svg symbol #25005

Closed

danielroe mentioned this issue Jan 2, 2024

fix(nuxt): do not warn about missing layouts on error page #25008

Merged

9 tasks

danielroe closed this as completed in #25008 Jan 2, 2024

manniL mentioned this issue Jan 14, 2024

<NuxtLayout /> component has not been used. Warning when using <ClientOnly> in app.vue #25196

Closed

abarke mentioned this issue May 7, 2024

Incorrect Warning on Nuxt 3.10 nuxt-modules/ionic#524

Closed

Warning from NuxtLayout: Your project has layouts but the <NuxtLayout /> component has not been used. #24912

Warning from NuxtLayout: Your project has layouts but the <NuxtLayout /> component has not been used. #24912

Comments

doantu05150 commented Dec 27, 2023 • edited Loading

Environment

Reproduction

Describe the bug

Additional context

Logs

github-actions bot commented Dec 27, 2023

Why do I need to provide a reproduction?

What will happen?

How can I create a reproduction?

doantu05150 commented Dec 27, 2023

daver987 commented Dec 27, 2023

chris-visser commented Dec 27, 2023

This comment was marked as off-topic.

waleedtariq109 commented Dec 28, 2023

agracia-foticos commented Dec 28, 2023

manniL commented Dec 28, 2023

This comment was marked as duplicate.

manniL commented Dec 28, 2023

chris-visser commented Dec 28, 2023 • edited Loading

Smart-Ace-Designs commented Dec 28, 2023

L422Y commented Dec 28, 2023

cropr commented Dec 29, 2023

This comment was marked as off-topic.

This comment was marked as duplicate.

Aareksio commented Dec 30, 2023 • edited Loading

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

manniL commented Jan 1, 2024 • edited Loading

sharpprahs commented Jan 7, 2024 • edited Loading

devtrex007 commented Jan 10, 2024

mabutalid-kroma commented Feb 3, 2024

ndro commented Feb 5, 2024 • edited Loading

mrnasil commented Feb 5, 2024

danielroe commented Feb 5, 2024

gemyago commented Feb 6, 2024 • edited Loading

Oscar2av commented Feb 11, 2024 • edited Loading

fmichenaud commented Feb 18, 2024

Patrity commented Feb 19, 2024

pavloskafritsas commented Feb 20, 2024 • edited Loading

Dino-Kupinic commented Feb 25, 2024

pavloskafritsas commented Feb 25, 2024

FelixBecquart1990 commented Feb 27, 2024 • edited Loading

abarke commented May 6, 2024

danielroe commented May 7, 2024

Warning from NuxtLayout: Your project has layouts but the `<NuxtLayout />` component has not been used. #24912

Warning from NuxtLayout: Your project has layouts but the `<NuxtLayout />` component has not been used. #24912

doantu05150 commented Dec 27, 2023 •

edited

Loading

chris-visser commented Dec 28, 2023 •

edited

Loading

Aareksio commented Dec 30, 2023 •

edited

Loading

manniL commented Jan 1, 2024 •

edited

Loading

sharpprahs commented Jan 7, 2024 •

edited

Loading

ndro commented Feb 5, 2024 •

edited

Loading

gemyago commented Feb 6, 2024 •

edited

Loading

Oscar2av commented Feb 11, 2024 •

edited

Loading

pavloskafritsas commented Feb 20, 2024 •

edited

Loading

FelixBecquart1990 commented Feb 27, 2024 •

edited

Loading