'Components in default.vue get removed after being compiled in Nuxt

I'm trying to add header in my Nuxt app in Nuxt/layouts/default.vue

<template>
  <div> 
    <Navigation/>
    <Nuxt />
  </div>
</template>

gets changed to

<template>
    <Nuxt />
</template>

after compiling Any code I place in default.vue get removed.

I'm using nuxt v2.15.8 And node v16.13.2

Solution 1:^[1]

check your layouts directory's name

Solution 2:^[2]

One issue could be your 'default.vue' resides inside NUXT root directory (usually .nuxt). Please see the image attached. That is the directory for nuxt rendered files. So, it will keep getting refreshed when you compile. I had the same issue. I fixed the issue by creating 'layouts' directory outside the .nuxt, which is the right way to do it.

So, your default.vue structure might look like this after fixing it: <your-proj-dir>/layouts/default.vue.

I had wrongly created layouts/default.vue like this

Fixed the issue by creating layout/dfeault.vue ouside .nuxt directory

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Romain Guicheteau
Solution 2	Nakribha

'Components in default.vue get removed after being compiled in Nuxt

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]