Understanding slots, named slots, and scoped slots

Slots are sections of a component where the template/rendering is delegated back to the parent of the component. We can consider slots as templates or markup that are passed from a parent to a child for rendering in its main template.

Passing markup to a component for rendering

The simplest type of slot is the default child slot.

We can define a Box component with a slot as follows:

<template>
  <div>
    <slot>Slot's placeholder</slot>
  </div>
</template>

The following markup is for the parent component (src/App.vue):

<template>
  <div>
    <Box>
      <h3>This whole h3 is rendered in the slot</h3>
    </Box>
  </div>
</template>
<script>
import Box from './components/Box.vue'
export...