There is a support to vue3?

[Ulisses Carlos Raineri]

It's possible to use syncfusion with version 3 of vue?

I try it, but vue doesn't  export vue as default anymore, so I get problem on it.

I get these warnings:

 warning  in ./node_modules/@syncfusion/ej2-vue-navigations/src/accordion/items.directive.js

"export 'default' (imported as 'Vue') was not found in 'vue'

And get this error on run npm serve

component-base.js?5981:6 Uncaught TypeError: Object prototype may only be an Object or null: undefined

    at setPrototypeOf (<anonymous>)

    at extendStatics (component-base.js?5981:6)

    at __extends (component-base.js?5981:9)

    at eval (component-base.js?5981:20)

    at eval (component-base.js?5981:194)

    at Module../node_modules/@syncfusion/ej2-vue-base/src/component-base.js (chunk-vendors.js:1559)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (index.js?4867:1)

    at Module../node_modules/@syncfusion/ej2-vue-base/src/index.js (chunk-vendors.js:1583)

vue3 example:

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

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

createApp(App).use(store).use(router).use(SidebarPlugin).mount('#app')

vue2 example:

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

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

Vue.config.productionTip = false

Vue.use(SidebarPlugin)

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

[Jesus Arockia Sankaran S]

Hi Ulisses, 

Sorry for the inconvenience and thank you for contacting Syncfusion support. 

Currently we do not have support for Vue 3  but we have logged a feature request on this and it can be tracked through our feedback portal below. 

Link : https://www.syncfusion.com/feedback/16977/vue-3-support-for-ej2-vue-components 

If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. We are working on providing this support once Vue releases Vue 3 and we request your support until then. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Ulisses, 

 

We are glad to announce that our Essential Studio 2021 Volume 2 release v19.2.0.44  is rolled out and is available for download under the following link. 

 

https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download 

 

We have included the support “Vue 3 for Syncfusion EJ2 Components”. 

 

https://www.syncfusion.com/feedback/16977/vue-3-support-for-ej2-vue-components 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards,            

Jesus Arockia Sankaran S 

 

[Waleed]

Hi,

Thanks for adding Vue3 support but your documentation and demos are still in vue2 which is quite confusing. like the below docs and demo

https://ej2.syncfusion.com/vue/documentation/grid/edit/#command-column

I'm trying to use it in Vue3 but command columns are not appearing. When you'll be updating the docs to add Vue3 code snippets?

Thanks.

[Jesus Arockia Sankaran S]

Hi Waleed, 

Thanks for your update. 

We have prepared a simple with command column for your convenience. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid :dataSource='data' :editSettings='editSettings' :allowPaging="true"> 

      <e-columns> 

          <e-column field='CustomerID' :isPrimaryKey='true' width='125' textAlign='Right'></e-column> 

          <e-column field='OrderID' width='125' textAlign='Right'></e-column> 

          <e-column field='ShipCountry' width='125' textAlign='Right'></e-column> 

            <e-column headerText='Commands' width=120 :commands='commands'></e-column> 

      </e-columns> 

  </ejs-grid> 

    </div> 

</template> 

 

<script> 

import { GridComponent, ColumnsDirective, ColumnDirective,Edit, Page, CommandColumn } from '@syncfusion/ej2-vue-grids'; 

 

export default { 

  name: 'App', 

  components: { 

    'ejs-grid' : GridComponent, 

'e-columns' : ColumnsDirective, 

'e-column' : ColumnDirective 

  }, 

  data() { 

return { 

  data:  [ 

    { 

       "OrderID":10248, 

       "CustomerID":"VINET", 

       "ShipCountry":"France" 

    }, 

    { 

       "OrderID":10249, 

       "CustomerID":"TOMSP", 

       "ShipCountry":"Germany" 

    }], 

      commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } }, 

    { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } }, 

    { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } }, 

    { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }], 

      editSettings: { allowEditing: true, allowDeleting: true }, 

    columns: [ 

        { field: "OrderID", headerText: "OrderID", width: "120" }, 

        { field: "CustomerID", headerText: "Customer ID", width: "120" }, 

      ] 

}; 

  }, 

  // module injection 

  provide: { 

grid: [Page,Edit, CommandColumn], 

  } 

}; 

</script> 

 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import ../node_modules/@syncfusion/ej2-vue-grids/styles/material.css; 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue-3-grid-commandcolumn1605256381.zip 

Please get back to us if you have any queries. 

 

Regards, 

Jesus Arockia Sankaran S 

[Waleed]

Hi Jesus,

Thanks for the quick reply with a working example. I'll check the solution today.

Bests,

Waleed

[Jesus Arockia Sankaran S]

Hi Waleed,  

You are Welcome! Please get back to us if you need any other assistance. 

Regards, 

Jesus Arockia Sankaran S 

[Waleed]

Hi Jesus,

I've checked your solution. It is working fine when we use the command column in the `App.vue` and not working when I put the exact code into the component and use that component in the App.vue. Is there anything I'm missing? attached is the zip file for your reference. Thanks.
Attachment: Vue3gridcommandcolumninchildcomponent_dfe45a87.zip

[Jesus Arockia Sankaran S]

Hi Waleed, 

Sorry for the inconvenience.  

We have checked the attached sample and we can able to reproduce the reported issue. We suspect that the module injection values are not accessible properly in globally but we need to validate this to confirm. So, we will update you further details in next week and we request your support until then. 

However,  we recommend you to inject the modules once again in “App.vue” as a workaround as of now. We have modified the sample with the work around and you can get that from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/156862/ze/Vue3gridcommandcolumninchildcomponent553081462 

Regards, 

Jesus Arockia Sankaran S 

[Waleed]

Hi Jesus,

Thanks for the reply.

When I try to download the sample, I'm getting an Access Denied error. This only happens to your last sample, not the other ones (as I can download them). Kindly check the permissions so I can check the workaround and use it until your team fixes the issue.

Bests,

Waleed.

[Jesus Arockia Sankaran S]

Hi Waleed, 

Sorry for the inconvenience. 

You can download from the below link. 

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

Regards, 

Jesus Arockia Sankaran S 

[Waleed]

Hi Jesus.

I can now download the samples files.

Bests,

Waleed

[Jesus Arockia Sankaran S]

Hi Waleed, 

Thank you for the detail. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi All, 

Thank you for your patience. 

We have considered this as an issue and it will be included with our Volume 2, 2021 SP release. 

https://www.syncfusion.com/feedback/27319/providers-are-not-accessible-globally-in-vue-3 

We request your patience until then. 

Regards, 

Jesus Arockia Sankaran S 

[Waleed]

Hi Jesus,

Thanks for the reply. We are waiting for the release.

Bests,

Waleed

[Jesus Arockia Sankaran S]

Hi Waleed, 

You are welcome and we will intimate you once it is available. 

Regards, 

Jesus Arockia Sankaran S