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
  1. Home
  2. Forum
  3. Vue
  4. Rendering a Single File Component in Tab Item

Rendering a Single File Component in Tab Item

Hi Syncfusion,

I have a single file component (Home.vue) and this component is then imported to be used in App.vue.

What I am trying to do is to render that component in a tab doing like this:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: Home
}
}
}
],

And this works nice. The "Home" component is show perfectly in that tab.

However, I need to pass a property to the component on rendering but can't get that to work. I tried like this for instance:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: Home,
props: {
message: "hello"
}
}
}
}
],

But the property is not rendered in the component.

Do you know how I can "send" properties to the component to be rendered in the tab item?

BTW I read this sample:

But it is using "Vue.component" which can't use.

Thanks,
Marius




10 Replies
ML Marius Lian September 12, 2019 07:34 AM UTC

I also tired with a render function which should work for singel file components:

vjuTabs: [ {
id: 1,
header: {
text: "Home2"
},
content: function () {
return{
template: function(){
render: h => h(Home, {
props: {
message: 'New header text',
}
})
}
}
}
}],

But this isn't working either.



KK Karthigeyan Krishnamurthi Syncfusion Team September 13, 2019 09:09 AM UTC

Hi Marius, 
 
Syncfusion greetings. 
 
We have passed the props to VUE component and the same can be available in below link. 
 
 
Regards, 
Karthi 


ML Marius Lian September 13, 2019 01:33 PM UTC

Hei Karthi,

I don't think it was this I was thinking about. 

I meant to set value of prop on a prop in template.vue. 

Plese let me explain:
  • Let us say you have prop "blogName" in template.vue and the value of this is used in "<h1>{{ this.blogName }} </h1>"
  • Then in App.vue I would like to render template.vue component in a tab AND set value of prop blogName to something.
I cannot see that this sample solves this problem.

Thanks again for your support.

Best regards,
Marius

VD Vinitha Devi Murugan Syncfusion Team September 16, 2019 01:03 PM UTC

Hi Marius, 
 
Thanks for your update. 
 
We have passed the id as props to VUE component and the same can be available in below link.  
 
 
Regards, 
M.Vinitha devi 


ML Marius Lian September 17, 2019 05:32 AM UTC

Hi Vinitha,

Thanks, but my question was about single file component. Your sample is already covered in the documentation.

I tried to apply your sample like this:
export default {
  name: 'app',
  data: function() {
    return {
      headerText0: { text: 'Some header text' },
      contentTemplate: function() {
        return {
          template: Home,
          props: {
            message: "hello world"
          }
        };
      },


Where:
  • Home is a single file component.
  • This has one prop called message.
  • I tried to change props to data and propsData but did not work. 
So still I am unable to render a single file component into a tab.

Thanks,
Marius


KK Karthigeyan Krishnamurthi Syncfusion Team September 18, 2019 04:55 AM UTC

 
We're glad you've found the solution in 147570. 
 
Please revert for further assistance. 
 
Regards, 
Karthi 
 
 


ML Marius Lian September 18, 2019 06:32 AM UTC

Hi Karthi,

Yes, but I got stucked on a new problem. Please check the thread in 147570.

Thanks, 
Marius 

HB Hareesh Balasubramanian Syncfusion Team September 19, 2019 04:01 PM UTC

Hi Marius, 

Thanks for your update. 

We have prepared a sample, in which the templateContent is referred from the template.Vue file and the sample can be viewed from the following link, 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 
Hareesh 


AS Arvin Staff January 20, 2022 06:34 AM UTC

Hi,

I reckon the above solution cannot work properly with Vue.js 3. Is it possible to render SFC in a tab for Vue 3?

Regards,

Arvin


SK Satheesh Kumar Balasubramanian Syncfusion Team January 21, 2022 09:43 AM UTC

Hi Arvin, 
  
  
App.vue:   
<template> 
<div id="app"> 
      <ejs-tab id="tab_default" heightAdjustMode="Auto"> 
        <e-tabitems> 
          <e-tabitem :header="headerText0" :content="onTwitterTemplate"></e-tabitem> 
          <e-tabitem :header="headerText1" :content="content1"></e-tabitem> 
          <e-tabitem :header="headerText2" :content="content2"></e-tabitem> 
        </e-tabitems> 
      </ejs-tab> 
  </div> 
</template> 
<script> 
 import { TabComponent, TabItemsDirective, TabItemDirective } from "@syncfusion/ej2-vue-navigations"; 
  import twitterTemplateVue  from './components/twitterTemplateVue.vue'; 
  
  import { createApp } from "vue"; 
  const app = createApp(); 
  // Template declaration 
  var twitterVue = app.component("onTwitterTemplate", twitterTemplateVue); 
  
  //Component registeration 
  export default { 
    name: "App", 
    components: { 
          "ejs-tab": TabComponent, 
          "e-tabitems": TabItemsDirective, 
          "e-tabitem": TabItemDirective 
        }, 
    // Bound properties declaration 
    data() { 
        return { 
            onTwitterTemplate: function () { 
                return { 
                    template: twitterVue 
                }; 
            }, 
            headerText0: { text: "Twitter" }, 
      headerText1: { text: "Facebook" }, 
      headerText2: { text: "WhatsApp" }, 
      content1: 
        "Facebook is an online social networking service headquartered in Menlo Park, California. Its website " + 
        "was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo " + 
        "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's " + 
        "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford " + 
        "University. It gradually added support for students at various other universities and later to high-school students.", 
  
      content2: 
        "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that " + 
        "operates under a subscription business model. It uses the Internet to send text messages, images, video, user location " + 
        "and audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user " + 
        "base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in " + 
        "Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion." 
    }; 
    }, 
  } 
</script> 
  
twitterTemplateVue.vue:   
<template> 
  <div>Twitter is an online social networking servicethat enables users to send and read short 140-character messages called 'tweets'. Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.</div> 
</template> 
<script> 
  
export default { 
    name: "twitterTemplateVue", 
    components: { 
    }, 
    data() { 
          return { 
              data: {} 
          }; 
      }, 
      methods: {} 
}; 
</script> 
  
  
Kindly try the attached sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 



Loader.
Live Chat Icon For mobile
Up arrow icon