Add link to toolbar item in Vue Toolbar component

16 Mar 20232 minutes to read

You can add link inside Toolbar using Vue template. Follow the below guidelines for add link as template in Toolbar.

• Declare a template in the template section of the “.vue” file. An empty object “data” needs to be initialized in the data option of the default export object in script section.

• The template function needs to be assigned to the content property of the EJ2 Vue Toolbar Component.

app.vue

<template>
    <div id="app">
    <ejs-toolbar >
           <e-items>
             <e-item text='Cut'></e-item>
             <e-item text='Copy' ></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Paste' ></e-item>
             <e-item type='Separator'></e-item>
             <e-item :template='AnchorTemplate'></e-item>
          </e-items>
      </ejs-toolbar>
  </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from '@syncfusion/ej2-vue-navigations';
Vue.use(ToolbarPlugin);

var AnchorData = Vue.component("demo", {
  template: '<a target="_blank" href="https://ej2.syncfusion.com/vue/documentation/toolbar/getting-started/">Anchor Toolbar Link</a>',
  data() {
    return {
      data: {}
    };
  }
});

export default {
  name: 'app',
  data: function(){
    return {
      AnchorTemplate: function () {
        return {
          template: AnchorData
        }
      }
   }
 }
}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>