Vue- Named Slots in a nutshell

#defalut

• js component

<footer  class="modal-card-foot">

 <button  class="button is-success">Save changes</button>
 <button  class="button">Cancel</button>

</footer>

or

<footer  class="modal-card-foot">
<slot name="footer">
 <button  class="button is-success">Save changes</button>
 <button  class="button">Cancel</button>
</slot>
</footer>

#add contents

• component

<footer  class="modal-card-foot">
   <slot name="footer">
        
   </slot>
</footer>

• html

<div id="root" class="container">
      <modal>
        <template slot="header">title</template>
        Here is the slot area for the content
        <template slot="footer">
           <button  class="button is-success">Save changes</button>
           <button  class="button">Cancel</button>
        </template>
      </modal>
</div>