Resize, Sort not working in Nuxt 3 due to modules not being available in Grid component

[Fernando Belfort]

Hi, I have this simple component:

<template>

<div class="col-lg-12 control-section">

<div>

<div style="overflow-x: auto; margin-left: 4px;">

<ejs-grid :dataSource="data" :allowResizing='true' height='400' width='850' :autoFit='true'

:allowSorting='true'>

<e-columns>

<e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200'

textAlign='Right'></e-column>

<e-column field='CustomerName' headerText='Customer Name' minWidth='100' width='150'></e-column>

<e-column field='Freight' headerText='Freight' minWidth='100' width='120' format='C2'

textAlign='Right'></e-column>

<e-column field='ShippedDate' headerText='Shipped Date' width='150'

format="yMd" textAlign='Right'></e-column>

<e-column field='ShipCountry' headerText='Ship Country' minWidth='100' width='150'></e-column>

</e-columns>

</ejs-grid>

</div>

</div>

</div></template>

<script setup>

import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn} from '@syncfusion/ej2-vue-grids';

const data = ref([

{ OrderID: 10248, CustomerName: 'Vincent', Freight: 32.38, ShippedDate: new Date(1996, 7, 2), ShipCountry: 'France' },

{ OrderID: 10249, CustomerName: 'Tom', Freight: 11.61, ShippedDate: new Date(1996, 7, 2), ShipCountry: 'Germany' },

{ OrderID: 10250, CustomerName: 'Hannah', Freight: 65.83, ShippedDate: new Date(1996, 7, 3), ShipCountry: 'Brazil' }

]);

</script>

The table is rendered but I can't sort or resize it. Nuxt 3 gives the error:

[WARNING] :: Module "Sort" is not available in Grid component! You either misspelled the module name or forgot to load it.

[WARNING] :: Module "Resize" is not available in Grid component! You either misspelled the module name or forgot to load it.

If I do:

import {Resize, Sort} from '@syncfusion/ej2-vue-grids' I get a Nuxt error saying basically the same thing. So, how exactly to use Resize and Sort here in this example? Thanks a lot

[Johnson Soundararajan S]

Hi Fernando Belfort,

We acknowledge your interest in using the Sort and Resize modules in the Nuxt 3 application. The necessary modules can be utilized in the provide section.
 

Please refer to the below sample and code snippet for more information.

Code sample :
 

App.vue
 

<script setup lang="ts">

import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, 

  Resize, Sort } from '@syncfusion/ej2-vue-grids';

const data = [

  { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38,},

  { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61,},

  { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83,},

];

provide('grid', [Resize, Sort]);

</script>

 

Sample : Nuxt - Starter (forked) - StackBlitz
 

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S