Trying to use Datagrid in Nuxt 3 rc13

[Unknown]

Hi, looking forward to using some of your components in my home project which is Nuxt 3 based...

I've made a plugin called 'datagrid.ts' which is this code

import Vue from 'vue'
import { GridPlugin } from '@syncfusion/ej2-vue-grids';

// @ts-ignore
Vue.use(GridPlugin)


which just results in a bunch of errors such as

✘ [ERROR] Could not resolve "vue-class-component"
    node_modules/@syncfusion/ej2-vue-base/src/component-base.js:18:22:

      18 │ import * as Vue3 from 'vue-class-component';
         ╵                       ~~~~~~~~~~~~~~~~~~~~~
If I install `vue-class-component` that is a Vue 2 component apparently and Nuxt 3 uses Vue 3.

I am using `yarn add @syncfusion/ej2-vue-grids`

to add your datagrid to the project...

Any pointers gratefully accepted!

[Christian DAquino]

You have to import

"vue-class-component": "^8.0.0-rc.1",

And syntax for Vue 3 is a bit different. Something like this:

import {
  ColumnChooser,
  ColumnDirective,
  ColumnsDirective,
  CommandColumn,
  ContextMenu,
  Edit,
  ExcelExport,
  Filter,
  ForeignKey,
  Freeze,
  Grid,
  GridComponent,
  Group,
  Page,
  PdfExport,
  Reorder,
  Resize,
  RowDD,
  Search,
  Selection,
  Sort,
  Toolbar,
} from '@syncfusion/ej2-vue-grids'

Grid.Inject(CommandColumn)
Grid.Inject(ColumnChooser)
Grid.Inject(ContextMenu)
Grid.Inject(Edit)
Grid.Inject(ExcelExport)
Grid.Inject(Filter)
Grid.Inject(ForeignKey)
Grid.Inject(Freeze)
Grid.Inject(Group)
Grid.Inject(Page)
Grid.Inject(PdfExport)
Grid.Inject(Reorder)
Grid.Inject(Resize)
Grid.Inject(RowDD)
Grid.Inject(Search)
Grid.Inject(Selection)
Grid.Inject(Sort)
Grid.Inject(Toolbar)

export default {
  data() {
    return {}
  },
  components: {
    'ejs-grid': GridComponent,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective,
  },
}

[Rajapandi Ravi]

Hi Customer,

Thanks for contacting Syncfusion support.

We have validated the reported problem at our end, and we suspect that you are using Vue 3 in your application. You can resolve this by using "vue-class-component" dependency with the version of "^8.0.0-rc.1" in your project. Because it is one of the Prerequisites
to render EJ2 Component in Vue3. It is explained in the below code documentation.

Prerequisites of EJ2 with Vue 3: https://ej2.syncfusion.com/vue/documentation/grid/getting-started-vue/#prerequisites

 

[package.json] 

 

 

  "dependencies": { 

    "@syncfusion/ej2-vue-grids": "*", 

    ---

    "vue-class-component": "^8.0.0-rc.1" 

  }, 

 

If you are using npm version higher than 7 means, use “npm install --legacy-peer-deps”.

npm i    // use this if npm is less than 7

npm i --legacy-peer-deps // use this if npm version is higher than 7

 

https://github.blog/2021-02-02-npm-7-is-now-generally-available/#peer-dependencies

Kindly follow the below steps to resolve this.

1. Copy and paste this "vue-class-component": "^8.0.0-rc.1" in package.json under dependencies.
2. Delete the node_modules and package-lock.json files
3. Execute the npm install or npm i --legacy-peer-deps command based on the npm version.

Please get back to us if you need further assistance with this.

Regards, 

Rajapandi R