vue.js - My slot command in deafult.vue in layouts folder is not being recognised when working with NuxtJs 3 - Stack Overflow

admin2025-04-29 1

I am still new to this, so an issue might be as silly as a typo, however neither me nor chatgpt have been able to figure it out yet. I was following a crash course about Nuxt Js where the guy who created the course shows that, for example, in order to make a navigation bar that will get shown for each page (nav with ul and li), you create a layouts folder, than you create a deafult.vue file. I than write my header code as i usually would and end it with <slot /> and some css. However, my navigation is not showing in different pages.

This is the link to the video i was trying to follow: , and the part i got stuck at is around 1:55.

Here is the full code i have in my deafult.vue, which is inside my layouts folder:

<template>
    <div>
        <header>
            <nav>
                <NuxtLink to="/">Nuxt Dojo</NuxtLink>
                <ul>
                    <li><NuxtLink to="/">Home</NuxtLink></li>
                    <li><NuxtLink to="/about">About</NuxtLink></li>
                    <li><NuxtLink to="/products">Products</NuxtLink></li>
                </ul>
            </nav>
        </header>
    <!--- output page content --->
    <div>
        <slot /> <!-- this is how nuxt sees where the page content is going to go, inside of the layout folder -->
        <p>if you see this the slot is rendering!</p>
    </div>
    </div>
</template>



<style  scoped>
.router-link-exact-active {
    color: rgb(72, 193, 153); /* This is a class for the link we are currently one, so it colors the link we are currently on a little bit differently */
}

</style>

And here is the code to my index.vue which is inside my pages folder:

<template>
    <div> 
    <h2>Home</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem voluptate rerum ipsa natus, deserunt nobis delectus architecto ad excepturi, vel perferendis ipsum officiis obcaecati, iusto nam officia. Officiis, assumenda dicta!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem voluptate rerum ipsa natus, deserunt nobis delectus architecto ad excepturi, vel perferendis ipsum officiis obcaecati, iusto nam officia. Officiis, assumenda dicta!</p>

    </div>
</template>

<script setup>



</script>

<style scoped>
h2 {
    margin-bottom: 20px;
    font-size: 36px;
}
p{
    margin: 20px 0;
}
</style>what i am trying to achieve

For better comperason here are the screenshots from the video of what i am trying to achieve:
enter image description here

And an image of what i am getting:
what i am getting

To sum it up: I am trying to add a sort of "navigation" between my pages that gets shown an all the pages (index.vue and about.vue) by using </slot >, and it is not showing up on my page.

To add to this post because i realised i might make your life easier if i give more context, here are some of the things i tried to figure out whats wrong:

-i rebuilt my project
-i added console.log to try and see if my deafult layout is even being rendered (nothing got logged in the console)
-i added this to my index.vue and about.vue:

<script setup>
definePageMeta({
    layout: 'default'
})
</script>

-i tried debug rendering by putting a paragraph under my slot command:

<div>
    <slot />
    <p>If you see this, the slot is rendering!</p>
</div>

and just in case, this is my nuxt.config.ts file:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
/*   devtools: { enabled: true } */
pages: true,
components: true,

modules: [],
})

This is the link to the video i was trying to follow: https://www.youtube.com/watch?v=LZDQhOaBBbk, and the part i got stuck at is around 1:55.