NUXT integration

[Julien Hoffmann]

Hello,

Using the latest versions from npm, I cannot manage to integrate the grid component in a nuxt project.

Latest components require vue-class-component 8.rc-1, which itself requires vue 3.0. But nuxt is running vue 2+.

I manage to have the grid show auto-columns, but as soon as I add e-columns component, it brakes with 

Uncaught TypeError: Object prototype may only be an Object or null: undefined

on the ColumnsDirective.

Can you provide a working sample with correct versions of components ?

Thanks,

Julien

[Ajith Govarthan]

Hi Julien, 

Thank for contacting Syncfusion support. 

Based on your query, you are facing issue in using the e-columns tag in your Grid application. So, we have shared the documentation in that we have loaded all the necessary modules for columns. please refer the below documentation to load the Grid component properly in your Grid application. 

Code Example: 

Ap.vue 

<template> 

  <ejs-grid :dataSource="data"> 

<e-columns> 

  <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column> 

  <e-column field="CustomerID" headerText="Customer ID"  width="80"></e-column> 

  <e-column field="ShipCountry" headerText="Ship Country" width="90"></e-column> 

</e-columns> 

  </ejs-grid> 

</template> 

<script> 

import { GridComponent, ColumnsDirective, ColumnDirective} from "@syncfusion/ej2-vue-grids"; 

export default { 

  name: "App", 

  // Declaring component and its directives 

components: { 

  "ejs-grid": GridComponent, 

  "e-columns": ColumnsDirective, 

  "e-column": ColumnDirective, 

}, 

  // Bound properties declarations 

  data() { 

return { 

  data: [ 

    { 

      OrderID: 10248, 

      CustomerID: "VINET", 

      ShipCountry: "France", 

    }, 

    { 

      OrderID: 10249, 

      CustomerID: "TOMSP", 

      ShipCountry: "Germany", 

    }, 

    .  .  . 

  ], 

}; 

  }, 

}; 

</script> 

<style> 

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

</style> 

UG-Links: 

Vue 3- Grid:  https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/ 

Vu2 2 Grid: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/ 

If you still face the issue, then please share the complete Grid code example, NPM and node version to find the root cause of the issue. 

Regards, 

Ajith G. 

[Julien Hoffmann]

Thank you

[Ajith Govarthan]

Hi Julien, 

Thanks for the update. 

We are happy to hear that the provided solution work fine at your end. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.