Search results

Add link to Toolbar Item in Vue Toolbar component

31 Jan 2023 / 1 minute 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.
Copied to clipboard
<div id="app">
<ejs-toolbar >
         <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>
import Vue from 'vue';
import { ToolbarPlugin } from '@syncfusion/ej2-vue-navigations';

var AnchorData = Vue.component("demo", {
  template: '<a target="_blank" href="">Anchor Toolbar Link</a>',
  data() {
return {
  data: {}

export default {
  name: 'app',
  data: function(){
return {
  AnchorTemplate: function () {
    return {
      template: AnchorData

  @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";