CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Piturnah
Piturnah

Reputation: 626

Nuxt.js default layout not being applied

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.

Upvotes: 13

Views: 15847

Answers (8)

Dony
Dony

Reputation: 1979

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

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

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

Upvotes: 11

Max Lukonin
Max Lukonin

Reputation: 1

In case anyone is using Nuxt 4 compatibility mode, make sure that the layouts folder is inside the app folder (where your app.vue is located)

Upvotes: 0

Shrian
Shrian

Reputation: 1

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>

Upvotes: 0

Emine YALMAN
Emine YALMAN

Reputation: 1

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>

Upvotes: -1

Asliddin Mahmudov
Asliddin Mahmudov

Reputation: 5

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"

Upvotes: 0

Subhash
Subhash

Reputation: 151

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

Upvotes: 15

habib
habib

Reputation: 1594

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

It woked like a charm.

Upvotes: 34

Bytecode Pandit
Bytecode Pandit

Reputation: 1

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

eg:

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

Upvotes: -2

Related Questions