[Vuejs]-Vue layout with named slots

by

0👍

I believe there is a problem with the closing tags on the template you have given and it should be like the following:

<template>
  <div>
    <slot name="header"> </slot>
  </div>
</template>

After that, layout property only excepts strings or functions that return strings, so parent should be like the following:

<template>
  <my-layout>
    <template #header>
      Some header html goes here
    </template>
    Body html here
  </my-layout>
</template>

<script>
import MyLayout from "./MyLayout.vue";
export default {
  layout: "MyLayout",
  components: {
    //MyLayout
  }
};
</script>

I hope this solves your problem and have a nice day 🙂

Leave a comment