Slots are besides props another the way how to pass data to a child component. Imagine it as a props accepting markup (html).

// MyComponent.vue
<template>
  ...
  <h2>MyComponent Header</h2>
  <div>
    <slot></slot>
  </div>
  ...
</template>

When you pass a paragraph to MyComponent...

<template>
  <MyComponent>
    <p>Passed text</p>
  </MyComponent>
</template>

This will render:

<h2>MyComponent Header</h2>
<div>
  <p>Passed text</p>
</div>

There is more about the slots, there are named slots, scoped slots and named scoped slots but that is out of the scope of this article.

What if the slot content is rendered at the end of page in Nuxt?

It has happened to me when I was designing this page. Everything seemed to be ok in code, but my page was rendered in order:

1. header
2. footer
3. page content

Obviously it wasn't the way I was planning it...

I'm using page & layout transitions on this website.

The bug was coming up when there was no wrapper around <slot /> in the layouts together with using transitions.

The only thing I had to do was to wrap the slot with div in layout:

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

It would be hell hard to track down!
Thanks t-a-n-n-e-r-