1. Home
  2. Forum
  3. Vue
  4. Render other components in Toolbar using template in Vue 3 Toolbar component

Render other components in Toolbar using template in Vue 3 Toolbar component

Is there any example of render other components in Toolbar using template in Vue 3? I have found an exemple in Vue 2 but not in Vue 3. In Vue 2 the example is as follows, how can I adapt it to Vue 3? I get an error in "Vue.component (Vue is not defined)" Thank you

<template>
<div id="app">
<ejs-toolbar >
       <e-items>
         <e-item :template='Template1' ></e-item>
         <e-item text='Italic' ></e-item>
         <e-item text='Underline' ></e-item>
         <e-item type='Separator'></e-item>
         <e-item :template='Template2'></e-item>
      </e-items>
  </ejs-toolbar>
  </div>
</template>
<script>
import Vue from 'vue';
import { ToolbarPlugin } from '@syncfusion/ej2-vue-navigations';
Vue.use(ToolbarPlugin);
import { DatePickerComponent,CalendarComponent, DatePickerPlugin,CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(DatePickerPlugin);
Vue.use(CalendarPlugin);
import { NumericTextBoxComponent,NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(NumericTextBoxPlugin);

export default {
  name: 'app',
  data: function(){
return {
  Template1: function () {
    return {
      template: Vue.component('NumericTextBoxComponent', {
        template: '<ejs-numerictextbox value="10"></ejs-numerictextbox>',
        data() { return { }; }
      })
    }
  },
    Template2: function () {
    return {
      template: Vue.component('DatePickerComponent', {
        template: ' <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker>',
        data() { return { minDate : new Date("05/09/2017"),
                         maxDate : new Date("05/15/2017"),
                         dateVal : new Date("05/11/2017") }; }
      })
    }
  },

   }
 }
}
</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";
  @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>

3 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team October 11, 2021 09:59 AM UTC

Hi Jordi, 
  
Thanks for using Syncfusion Products. 
  
We have validated your reported query "Render other components in Toolbar using template in Vue 3 Toolbar component" and prepared toolbar sample in Vue 3. 
  
  
App.vue:  
<template> 
<div id="app"> 
<ejs-toolbar > 
       <e-items> 
         <e-item :template='onNumericTemplate' ></e-item> 
         <e-item text='Italic' ></e-item> 
         <e-item text='Underline' ></e-item> 
         <e-item type='Separator'></e-item> 
         <e-item :template='onPickerTemplate'></e-item> 
      </e-items> 
  </ejs-toolbar> 
  </div> 
</template> 
<script> 
  import { ToolbarComponent, ItemDirective, ItemsDirective } from "@syncfusion/ej2-vue-navigations"; 
  import numericTemplateVue  from './components/numericTemplateVue.vue'; 
  import pickerTemplateVue  from './components/pickerTemplateVue.vue'; 
  
  import { createApp } from "vue"; 
  const app = createApp(); 
  // Template declaration 
  var numericVue = app.component("onNumericTemplate", numericTemplateVue); 
  var pickerVue = app.component("onPickerTemplate", pickerTemplateVue); 
  
  //Component registeration 
  export default { 
    name: "App", 
    components: { 
      "ejs-toolbar": ToolbarComponent, 
      "e-items": ItemsDirective, 
      "e-item": ItemDirective 
    }, 
    // Bound properties declaration 
    data() { 
        return { 
            onNumericTemplate: function () { 
                return { 
                    template: numericVue 
                }; 
            }, 
            onPickerTemplate: function () { 
                return { 
                    template: pickerVue 
                }; 
            }, 
        }; 
    }, 
  } 
</script> 
  
numericTemplateVue.vue: 
<template> 
    <ejs-numerictextbox value="10"></ejs-numerictextbox> 
</template> 
<script> 
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs"; 
  
export default { 
    name: "numericTemplateVue", 
    components: { 
        "ejs-numerictextbox": NumericTextBoxComponent 
    }, 
    data() { 
          return { 
              data: {} 
          }; 
      }, 
      methods: {} 
}; 
</script> 
  
pickerTemplateVue.vue: 
<template> 
    <ejs-datepicker :min="minDate" :max="maxDate" :value="dateVal" ></ejs-datepicker> 
</template> 
<script> 
import { DatePickerComponent } from "@syncfusion/ej2-vue-calendars"; 
import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; 
import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 
import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 
import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; 
  
export default { 
    name: "pickerTemplateVue", 
    components: { 
         "ejs-datepicker" : DatePickerComponent, 
    }, 
    data () { 
        return { 
            minDate : new Date("05/09/2017"), 
            maxDate : new Date("05/15/2017"), 
            dateVal : new Date("05/11/2017") 
        } 
    }, 
    methods: {} 
}; 
</script> 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


JO Jordi October 12, 2021 07:23 AM UTC

Hi Satheesh,


Thank you for your quick response. The sample is perfect and works like a charm.


Thank you!!


NR Nevitha Ravi Syncfusion Team October 13, 2021 06:01 AM UTC

Hi Jordi, 

You are most welcome..! we are glad that our solution worked at your end. Please get back to us if you need any further assistance. 

Regards, 
Nevitha. 


Loader.
Up arrow icon