Vue 3.0 Quasar Vite

[William Morgenweck]

I'm starting a new Quasar 2.6 project and it's built on Vue 3.0.  I installed 
Yarn add @syncfusion/ej2-vue-grids

and added  vue-class-component 8.0.0

I've placed a grid on a page and it goes into a constant loop with the error message below and in the image file added.  

My other Quasar project works great but it's build on Quasar 1.0 and Vue 2.6 and uses syncfusion components of 18.4.4.  I can always go back and clone my old project but I would like to use the latest versions if possible.

Any help is appreciated. 

Thanks

[ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "allVue"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/aggregate-columns.directive.js:20:31:

      20 │ import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';

         ╵ ~~~~~~

X [ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "gh"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/aggregate-columns.directive.js:20:39:

      20 │ import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';

         ╵ ~~

X [ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "allVue"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/aggregates.directive.js:20:31:

      20 │ import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';

         ╵ ~~~~~~

X [ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "gh"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/aggregates.directive.js:20:39:

      20 │ import { EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';

         ╵ ~~

X [ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "getProps"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js:21:46:

      21 │ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';

         ╵ ~~~~~~~~

X [ERROR] No matching export in "node_modules/@syncfusion/ej2-vue-base/index.js" for import "gh"

    node_modules/@syncfusion/ej2-vue-grids/src/grid/grid.component.js:21:56:

      21 │ import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';

Attachment: 2_d849b73a.zip

[Pavithra Subramaniyam]

Hi William,

Currently, We are validating the reported error at our end. so we will update the further details on April 29th, 2022. Until

 then we appreciate your patience.

Regards,

Pavithra S

[William Morgenweck]

Just wondering if this is still on yout list--

Thanks

Bill

[Pavithra Subramaniyam]

Hi Bill,

Sorry for the delay in contacting you.

We have checked the reported issue at our end, but the Vue 3 Grid with Quasar is working fine without any error. Please refer to the attached sample for more information.

For further validation, could you please share the below details that will be helpful for us to provide a better solution?

1. Please check the issue after upgrading the Syncfusion package
2. If still the issue persists, please share an issue reproducible sample.

Regards,

Pavithra S

Attachment: Quasar_1f67a4ef.zip

[DIEGO CAMPOS DIANEZ]

Hi Pavithra,

   

   This basic example works well, but, I've tried to allow grouping, but it doesn't work well.

   I can't see the drop area, all the rows are expanded, and I can't collapse.

   I have modified your example and attached it.

Attachment: Quasar_fcb890ab.zip

[Pavithra Subramaniyam]

Hi William,

Currently, we are validating the reported sample at our end. So, we will update the further details on July 11^th, 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[DIEGO CAMPOS DIANEZ]

Hi,

  Only to know if there are any news.

Thanks.

[Pavithra Subramaniyam]

Hi William,

Sorry for the delay in contacting you.

We suggest you inject the ‘Group’ module as in the below code to overcome the reported scenario. Please refer to the below code example for more information.

import { ref } from "vue";

import {

  GridComponent, ColumnsDirective, ColumnDirective, Group, Grid

} from "@syncfusion/ej2-vue-grids";

 

Grid.Inject(Group)

 

export default {

  name: "SyncfusionPage",

  components: {

    "ejs-grid": GridComponent,

    "e-columns": ColumnsDirective,

    "e-column": ColumnDirective,

  },

  },

};

 

Regards,

Pavithra S