How to pass template to ejs-menu

Question

error PNG I'm migrating from vue 2 to vue 3. I'm using migration build. I have a problem with the syncfusion component. There was no such problem before the migration.

Here is the component code

<template>
  <ejs-menu
    ref="menu"
    class="main-menu"
    :items="items"
    :fields="menuFields"
    :template="menuTemplate"
    show-item-on-click="true"
    orientation="Vertical"
    :created="hideDisabledItems"
    :before-open="hideDisabledItemsSubmenu"
    :select="select"
  />
</template>
<script>
/*eslint-disable*/
import Vue from 'vue';
import { MenuPlugin } from '@syncfusion/ej2-vue-navigations';

import NavigationMenuTemplate from '@/components/Syncfusion/Sidebar/NavigationMenuTemplate';

Vue.use(MenuPlugin);
export default {
  props: {
    items: {
      type: Array,
      default: () => {
        return [];
      }
    },
    select: {
      type: Function,
      default: () => {
        return;
      }
    }
  },
  data() {
    return {
      menuFields: {
        text: ['NAME'],
        children: ['MENU_LIST'],
        iconCss: ['ICON']
      },
**      // PROBLEM IS HERE**
      menuTemplate: function() {
        return {
          template: { extends: NavigationMenuTemplate }
        };
      }
    };
  }
};
</script>

How can I do it differently?

I tried to save it as a regular object in data.

here is an example from the documentation: https://ej2.syncfusion.com/vue/documentation/menu/data-source-binding-and-custom-menu-items CTRL + F :template

Answer 1

There is a difference between the Vue 2 component/functional template registration and the Vue 3 component/functional template registration. So, we cannot use the same syntax for Vue 2 and Vue 3. For more details about this, you can refer to the below UG link.

UG link: https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial#migration-from-vue-2-to-vue-3

For template registration, we have a common syntax called slot template support. Refer to the below UG link.

UG link: https://ej2.syncfusion.com/vue/documentation/common/template#slot-template

We have prepared the sample based on your requirements (Vue 3 functional template).

UG link: https://ej2.syncfusion.com/vue/documentation/menu/getting-started-vue

import { MenuComponent } from "@syncfusion/ej2-vue-navigations";

import { createApp } from "vue";

import NavigationMenuTemplate from '@/components/Syncfusion/Sidebar/NavigationMenuTemplate';

const app = createApp();

var demoVue1 = app.component("externalTemplate", NavigationMenuTemplate);

……

export default {

components: {

"ejs-menu": MenuComponent

},

…………..

data() {

return {

  menuFields: {

    text: ['NAME'],

    children: ['MENU_LIST'],

    iconCss: ['ICON']

  },

  menuTemplate: function () {

      return {

          template: demoVue1,

      };

  },

};

}

};

You can also check out the below sample code file link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/App1088639862