Introducing Slot Template Support for Syncfusion Vue Components
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing Slot Template Support for Syncfusion Vue Components

Introducing Slot Template Support for Syncfusion Vue Components

At Syncfusion, we previously rendered templates for the Vue components using their properties and a separate Vue component. This led to less code readability and more code usage. Unfortunately for that approach, code optimization and code readability play a significant role in enhancing the efficiency of an application. We can resolve this issue using slot support, which improves code readability in template rendering.

Syncfusion always keeps up with the latest features in the frameworks we support, and we are happy to announce that the Syncfusion Vue components now support slots as of the 2022 Volume 1 (version 20.1.47) release.

In this article, we’ll see what a slot is and how it makes template rendering as easy as possible in the Syncfusion Vue components.

What is a slot?

A slot is a reserved space provided by Vue to display content from one component to another. It loads outlet content into the DOM (Document Object Model). There are two types of slots: named slots and unnamed or default slot.

In Syncfusion Vue components, we use named slots.

Classic template rendering in Syncfusion Vue components

Previously, we used a separate Vue component and a property to render templates for Syncfusion Vue components.

For example, consider the Tree View component with the template option. We would define the template using a separate Vue component and map this template name (treeTemplate) to the nodeTemplate property of the TreeView. This led to using more lines of code and affected the code readability.

Refer to the following code example.

<template>
  <ejs-treeview id='treeview' :fields='fields' cssClass='custom' :nodeTemplate="treeTemplate"></ejs-treeview>
</template>
 
<script>
import { TreeViewComponent } from '@syncfusion/ej2-vue-navigations';
import { createApp } from "vue";
 
const app = createApp();
var data =  [
  { id: 1, name: 'Steven Buchanan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/10.png', job: 'CEO', hasChild: true, expanded: true },
  { id: 2, pid: 1, name: 'Laura Callahan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/2.png', job: 'Product Manager', hasChild: true },
  { id: 3, pid: 1, name: 'Janet Leverling', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png', job: 'HR' },
];
 
var demoVue = app.component("treeTemplate", {
  data: () => ({}),
  template: `<div>
    <img class='eimage' :src='data.eimg' alt='employee'/>
    <div class='ename'>{{data.name}}</div>
    <div class='ejob'>{{data.job}}</div>
  </div>`
});
 
export default {
 name: 'App',
 components: {
   'ejs-treeview': TreeViewComponent,
 },
 data() {
  return {
   fields: { dataSource: data, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
    treeTemplate: function() {
     return {
      template: demoVue
     };
    }
   }
  }
 }
</script>
 
<style>
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  .custom .e-list-item .e-fullrow {
    height: 72px;
  }
  .custom .e-list-item .e-list-text {
    line-height: normal;
  }
  .eimage {
    float: left;
    padding: 11px 16px 11px 0;
  }
  .ename {
    font-size: 16px;
    padding: 14px 0 0;
  }
  .ejob {
    font-size: 14px;
    opacity: .87;
  }
</style>

Executing the above code will provide output like the following screenshot.

Classic template rendering in Syncfusion Vue components
Classic Template Rendering in Syncfusion Vue Components

Template rendering in Syncfusion Vue components using slots

Now, you can easily render templates using slots in our Vue components. Also, you can render multiple templates using slots. Each template is differentiated by its name. We should map each slot name with the corresponding property to render the slot content to the corresponding slot outlet.

The component’s data source ({data}) will be passed as the property to the v-slot directive, which can be accessed by expressions inside the slot. As said before, this approach enhances code readability.

Refer to the following code example. Here, we have used treeTemplate as the name of the slot template.

<template>
 <ejs-treeview id='treeview' :fields='fields' cssClass='custom' :nodeTemplate="'treeTemplate'">
  <template v-slot:treeTemplate="{data}">
   <div>
    <img class='eimage' :src='data.eimg' alt='employee'/>
    <div class='ename'>{{data.name}}</div>
    <div class='ejob'>{{data.job}}</div>
   </div>
  </template>
 </ejs-treeview>
</template>
 
<script>
import { TreeViewComponent } from '@syncfusion/ej2-vue-navigations';
 
var data =  [
  { id: 1, name: 'Steven Buchanan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/10.png', job: 'CEO', hasChild: true, expanded: true },
  { id: 2, pid: 1, name: 'Laura Callahan', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/2.png', job: 'Product Manager', hasChild: true },
  { id: 3, pid: 1, name: 'Janet Leverling', eimg: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png', job: 'HR' },
];
 
export default {
 name: 'App',
  components: {
   'ejs-treeview': TreeViewComponent,
  },
 data() {
  return {
   fields: { dataSource: data, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
  }
 }
}
</script>
 
<style>
 @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
 @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  .custom .e-list-item .e-fullrow {
    height: 72px;
  }
  .custom .e-list-item .e-list-text {
    line-height: normal;
  }
  .eimage {
    float: left;
    padding: 11px 16px 11px 0;
  }
  .ename {
    font-size: 16px;
    padding: 14px 0 0;
  }
  .ejob {
    font-size: 14px;
    opacity: .87;
  }
</style>

After executing the above code, the output we receive will look like the following screenshot.

Template rendering in Syncfusion Vue components using slots
Template Rendering in Syncfusion Vue Components using Slots

Note: For more details, refer to the Vue Tree View component support for slots in template rendering demo.

Conclusion

Thanks for reading! In this blog, we have seen the newly introduced slot template rendering support for Syncfusion Vue components in the 2022 Volume 1 release. This new feature will enhance code readability and improve productivity while rendering templates in your Vue apps. Give it a try and leave your feedback in the comments section below!

For existing customers, the new version of Essential Studio is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed