Component dont work in NUXT "Unknown custom element: <ejs-grid>"

[Jornada]

Hello, how are you guys?

I trying to use the GRID in NUXT, and for some reason, i can't make it work.

In the page that i want the grid i import the GridPlugin from '@syncfusion/ej2-vue-grids' and i register that component using the "components" in the export default, and i import the css's like the "getting started" said to, and finally i use the component like: 

<ejs-grid :dataSource="data_peoples"></ejs-grid>

But nothing apears on page, and i have this error on console: 

Unknown custom element: <ejs-grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option. ids'

[Lu Tuan Dat]

Try this
Vue.use(GridPlugin)
export default { ... } 

[Ajith Govarthan]

Hi Jornada, 

 

Thanks for contacting Syncfusion support. 

 

Query: I trying to use the GRID in NUXT, and for some reason, i can't make it work. 

 

Based on your query you want to prepare EJ2 grid sample with NUXT JS. So, we have prepared sample and in that sample we have used the NUXT JS & rendered our EJ2 Grid without any issues.  

 

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

Index.vue 

 

<template> 

  <div class="container"> 

    <ejs-grid ref="H2Grid" 

              :dataSource="H2Grid.model" 

              :toolbar="H2Grid.toolbar" height="600px" 

              :editSettings="H2Grid.editSettings" 

              :pageSettings="H2Grid.pageSettings" 

    > 

      <e-columns> 

        <e-column field="OrderID" headerText="Id" textAlign="Right" width="10%" 

                  isPrimaryKey="true"></e-column> 

        <e-column field="CustomerID" headerText="Code" textAlign="Right" width="90%"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from 'vue'; 

import MainGridDialog from "./MainGridDialog" 

import { 

  ContextMenu, 

  GridPlugin, 

  Page, 

  Toolbar, 

  Edit, 

  ForeignKey, 

  Group, 

  Sort, 

  Resize, 

  ColumnMenu, 

  Search 

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

 

Vue.use(GridPlugin); 

export default { 

  data() { 

    let _self = this; 

    return { 

      H2Grid: { 

        model: [ 

          {OrderID: 10248, CustomerID: 'VINET', Freight: 32.38}, 

          {OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61}, 

          {OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83}, 

          {OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34}, 

          {OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3}, 

          {OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17}, 

          {OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98}, 

          {OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33}, 

          {OrderID: 10256, CustomerID: 'WELLI', Freight: 13.97} 

        ], 

        require: {}, 

        Defaults: {}, 

        toolbar: ['Add', 'Edit', 'Search'], 

        editSettings: { 

          allowEditing: true, allowAdding: true, allowDeleting: true, 

        }, 

        pageSettings: {pageSize: 15} 

      } 

    } 

  }, 

  provide: { 

    grid: [ContextMenu, ForeignKey, Page, Edit, Toolbar, Sort, Resize, ColumnMenu, Search] 

  }, 

} 

</script> 

 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

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

 

.container { 

  margin: 0 auto; 

  min-height: 100vh; 

  display: flex; 

  justify-content: center; 

  align-items: center; 

  text-align: center; 

} 

 

 

</style> 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/next_grid_sample1914731010.zip 

 

UG-Link: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.