We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

<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:

1 Reply

RV Ravikumar Venkatesan Syncfusion Team January 10, 2023 06:48 PM UTC

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


Loader.
Up arrow icon