Sample code is not working...

[Miles Benson]

I scaffolded a vue app as normal.

Then I dropped the sidebar menu sample code in to a .vue component file.

I added the following packages

"@syncfusion/ej2-base": "^17.2.49",

"@syncfusion/ej2-buttons": "^17.2.47",

"@syncfusion/ej2-data": "^17.2.47",

"@syncfusion/ej2-inputs": "^17.2.52",

"@syncfusion/ej2-lists": "^17.2.47",

"@syncfusion/ej2-navigations": "^17.2.49",

"@syncfusion/ej2-popups": "^17.2.47",

"@syncfusion/ej2-splitbuttons": "^17.2.47",

"@syncfusion/ej2-vue-base": "^17.2.47",

"@syncfusion/ej2-vue-buttons": "^17.2.47",

"@syncfusion/ej2-vue-lists": "^17.2.47",

"@syncfusion/ej2-vue-navigations": "^17.2.49",

The component is visible but the menu doesn't work.  I can see the following in the console log

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ejs-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <SidebarMenu> at src/components/SidebarMenu.vue

       <App> at src/App.vue

         <Root>

I've tried everything I can think of but I can't get past this point.

Any/all help would be very much appreciated.

Thanks

Miles

[Ashokkumar Balasubramanian]

Hi Miles Benson, 

 

Good day to you. 

 

We have checked your reported query to throw script error while running sidebar menu sample. We sorted out the solution for the problem to use menuPlugin and SidebarPlugin separately it will helpful for you to resolve the issue. Please refer the code snippet below. 

 

import Vue from "vue"; 

import { SidebarPlugin } from '@syncfusion/ej2-vue-navigations'; 

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

import { enableRipple } from '@syncfusion/ej2-base'; 

Vue.use(SidebarPlugin); 

Vue.use( MenuPlugin); 

  

For your reference, we have prepared a sidebar menu sample. 

 

https://codesandbox.io/s/vue-template-w2tlk 

 

Please let us know, if you have any concerns. 

 

Regards, 

Ashokkumar B. 

[Miles Benson]

Hi Ashokkumar

Thank you very much.

Greatly appreciated.

Cheers

Miles

[Ashokkumar Balasubramanian]

Hi Miles Benson, 

 

Most Welcome. 

 

Please let us know, if you need any further assistance.  

 

Regards, 

Ashokkumar B. 

[Miles Benson]

Hi Ashokkumar,

A couple of tiny extra questions, if I may, please?

Your documentation/samples around menus don't actually show how to react to a menu selection.  I can attach a handler to the select event but is there an "id" that can configured to communicate which menu item the user has chosen?

Also you support a "url" property for a simple navigation menu but that always opens in a new tab - is there an additional property which controls this?

Thank you.

Miles

[Vinoth Kumar Sundara Moorthy]

Hi Miles, 

 

Good day to you. 

 

Query #1: I can attach a handler to the select event but is there an "id" that can configured to communicate which menu item the user has chosen? 

 

We have checked your reported requirement “To get the menu items id chosen by the user” and it can be achievable by using the select event arguments and id property as like in the below code example. 

 

Code Snippet 

<ejs-menu id="main-menubar" items="menuItems" select="select" orientation="Vertical"></ejs-menu> 

 

export default Vue.extend({ 

    data: function() { 

        return { 

            //.. 

            menuItems: [ 

            { 

                text: "Overview", 

                id: "overview", 

                url: "https://www.google.com", 

                iconCss: "icon-globe icon", 

                items: [ 

                    //.. 

                ] 

            } //..  

            ], 

        }, 

        methods: { 

            select: function(args) { 

                alert(args.item.id); 

                //args.item.text // to get the item text 

            } 

        } 

    }); 

 

<style> 

    /* URL customization in sidebar sample*/ 

    .e-menu-wrapper ul .e-menu-item a.e-menu-text.e-menu-url { 

        color: #fff; 

    } 

</style> 

  

For your convenience, we have prepared the sample based on your requirement. Please find the link below. 

 

https://codesandbox.io/s/vue-template-m6eyw 

 

In below sample it will navigate to new page on clicking Overview item in SideBar Menu, 

https://m6eyw.codesandbox.io/www.google.com 

 

Query #2: you support a "url" property for a simple navigation menu but that always opens in a new tab - is there an additional property which controls this? 

 

We have checked your reported requirement and the url property always opens in the same tab only, unless you have given the target as blank in beforeItemRender event. Please refer the below help link for more details. 

 

https://ej2.syncfusion.com/vue/documentation/menu/icons-and-sub-menu-items/?no-cache=1#navigation 

 

Before we proceed further, would like to know the following details, 

 

1. Please provide more details regarding your requirement with url property. 

 

2. Confirm whether you need to open the link in same tab? 

 

3. If possible please replicate your issue in the above sample and send back to us. 

 

Could you please check the above sample and get back to us with the requested information? Based on this we will check and provide you a better solution quickly. 

 

Regards, 

Vinoth Kumar S 

[Miles Benson]

Hi Vinoth,

Thanks for you reply.  I can't immediately replicate my problem, but I'll get back to you if I struggle again.

Thanks

Miles

[Sangeetha Priya Murugan]

Hi Miles, 

 

Thank you for your update, we will wait to hear from you. 

 

Regards, 

Sangeetha M 

[Jassen Michaels]

Vinoth,

Thanks for the code sandbox example, it helped me sort out the same issue with the Vue.use() with multiple directives. Hopefully, the SyncFusion online example can be updated to reflect that.

One question I did have was is there an example of that same 'sidebar application' using NuxtJS? All my attempts at trying to port your online example to Nuxt has not worked. The page will render but is clearly not loading in something correctly.

Thanks in advance,

Jassen

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Jassen, 

 

Greetings from Syncfusion support. 

 

We have looked into your query. We have prepared a simple NuxtJS sample application with EJ2 Vue Sidebar for your reference. 

 

Please, download the sample from the following link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147958/ze/nuxtjs_sidebar518544015  

 

If you need any further assistance on implementing Sidebar in your application, then please share us the following details. 

 

·        Your exact requirement with Sidebar and its use-case scenario in your application. 

·        If possible, can you replicate your facing problem in above sahred sample. 

 

This information would help us to check your requirement with Sidebar and to provide you the prompt solution. 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S.