Nuxt.js default layout not being applied

Question

I'm brand new to using Nuxt.js, and having an issue: When I created my project, the layouts folder wasn't generated automatically as documented. I added it manually, but default.vue is not being applied anywhere. Here is layouts/default.vue:

<template>
  <div>
      <AppHeader/>
      <Nuxt/>
  </div>
</template>

I've tried things such as manually setting default as the layout in pages and manually importing the AppHeader component in default.vue (although this is definitely not the issue as other HTML I put there doesn't get rendered either). Not sure what's going wrong here, scratching my head. Using nuxt 2.15.7. If there's any additional detail needed please let me know what and I'll gladly provide, thanks.

Noletta

Hm, this should work properly. Creating a new layouts directory is fine and you did well. Do you have a Github repo link? – Yahairayahata

Have You created the project from CLI or manually? by default it should use the file in directory layouts/default as You pointed above. Have the console pointed any error? So You have tried this: Create another file ex. blog.vue in layouts directory and just pust there the same syntax: <template> <div> <AppHeader/> <Nuxt/> </div> </template> --- and then in any of Your page <script> export default { layout: 'blog', } </script> Or let create another project by command: npm init nuxt-app nuxt-test-app and just run it and see if it works. – Ferrule

I am facing same issue created nuxt priject with yarn and not working it is weird but after a server restart it started working again 😅😅😅 – Cellarer

Answer 1

Today, I faced the same issue, I just stop the dev command and did "npm run dev" again.

It woked like a charm.

Toque

in my case yarn dev, but it worked like a charm. thanks – Lickspittle

It's working, i use yarn dev. My code works perfectly. – Cris

This doesn't really fix the problem as it comes back all the time. I haven't figured out what causes it though ... – Cockroach

Answer 2

Was Facing this same issue, it was fixed by wrapping contents of app.vue with <NuxtLayout></NuxtLayout>

example:

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

For more details look here: https://github.com/nuxt/framework/discussions/2883

Klug

Answer 3

I also faced this issue today, and it took my like 15 minutes to realize...

I just named my folder layout instead of layouts :')

I'm posting it just in case someone else is as distracted as I am

Hyrax

in my case it's because my default layout name was Default.vue instead of default.vue, also commenting just in case someone made this silly mistake – Ceramist

you have to restart the development server as well -- saying this in case you might think why the solution does not work. lol – Obellia

Answer 4

Change some packages version

"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"

Ensemble

Answer 5

You need to make sure you are using Slot in your default.vue

<template>
  <div>
    <nav>
      <h2> This is layout navbar</h2>
    </nav>
    <div>
      </slot>
    </div>
  </div>
</template>

Styrene

Answer 6

This is how I solved it:

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

Comose

Answer 7

Just define your components folder path in nuxt.config.js

eg:

components: {
    dirs: [
      '~/shared',
      '~/shared/atoms',
      '~/shared/molecules',
      '~/shared/organisams',
    ]
  },

Grayback