We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Trying to use Datagrid in Nuxt 3 rc13

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!




2 Replies

CD Christian DAquino November 14, 2022 06:26 AM

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,
},
}


RR Rajapandi Ravi Syncfusion Team November 14, 2022 08:42 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon