Rendering a Single File Component in Tab Item with vue3 Composition API

[Ricardo]

<template>
  <ejs-tab>
    <e-tabitems>
      <e-tabitem :header="headerText0" :content="template1"></e-tabitem>
    </e-tabitems>
  </ejs-tab>
</template>

<script lang="ts">
import {
  TabComponent,
  TabItemDirective,
  TabItemsDirective,
} from "@syncfusion/ej2-vue-navigations";


export default {
  components: {
    "ejs-tab": TabComponent,
    "e-tabitems": TabItemsDirective,
    "e-tabitem": TabItemDirective,
  },
};
</script>
<script setup lang="ts">
import HomeView from "@/views/HomeView.vue";

let headerText0 = { text: "Home" };

function template1() {
  return {
    template: HomeView,
  };
}
</script>
<style scoped>
.container {
  display: flex;
  width: 100%;
  border: dotted #eef2f6;
  box-shadow: 0 8px 11px -6px rgb(0 0 0 / 12%);
  background: white;
  border-width: 0 0 1px 0;
}
</style>
but is error:
 

[Ravikumar Venkatesan]

Hi Ricardo,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-vue-3-tab-with-composition-api681368049

You can render the single file component in the Tab item with composition API as shown in the below code snippet using the slot template.

[App.vue]

<template>

  <h3>Tab</h3>

  <TabComponent>

    <TabItemsDirective>

      <TabItemDirective :header="headerText" :content="'content'">

        <template v-slot:content>

          <HelloWorld></HelloWorld>

        </template>

      </TabItemDirective>

    </TabItemsDirective>

  </TabComponent>

</template>

 

<script setup>

  import { TabComponent, TabItemsDirective, TabItemDirective} from "@syncfusion/ej2-vue-navigations";

  import HelloWorld from "./components/HelloWorld.vue";

 

  const headerText = { text: "ASP.NET" };

</script>

Regards,

Ravikumar Venkatesan