I want to build a reusable custom component which wrap ejs-grid control

[Ayman Shokry]

I want to build a reusable custom component which wrap ejs-grid control ,but when I doing that I got a Vue warning "Component "e-column" has already been registered in target app." and the grid does not show anything

```Data-Grid.vue

<template>

   <div>

      <ejs-grid locale="ar-AE" :enableRtl="true" :filterSettings="filterOptions" :allowFiltering="true"

v-bind="$attrs"> </ejs-grid>

   </div>

</template>

<script setup lang="ts">

   import { Filter } from "@syncfusion/ej2-vue-grids";

 

   const filterOptions = {

      type: "CheckBox",

      // columns: [

      //    { field: "title", matchCase: false, operator: "contains", predicate: "and", value: "", mode: "Immediate" },

      //    { field: "description", matchCase: false, operator: "contains", predicate: "and", value: "", mode: "Immediate" },

      // ],

   };

</script>

<style lang="scss" scoped></style>

```

but when I use it like:

```

About.vue

<template>

   <div>

      <h2>About {{ response }}</h2>

      <p class="mt-7 text-pink-500">{{ today }}</p>

      <p class="mt-7 text-blue-500">{{ locale }}</p>

     

     

      <data-grid :dataSource="data" :columns="columns"></data-grid>

      <button @click="handleClick" class="btn">Press API</button>

   </div>

</template>

<script setup lang="ts">

   import { Column } from "@syncfusion/ej2-vue-grids";

   import data from "./data";

   import { Filter } from "@syncfusion/ej2-vue-grids";

   import { DatePickerPlugin, DatePicker, MaskedDateTime } from "@syncfusion/ej2-vue-calendars";

   provide("grid", [Filter]);

   let response = ref<string | undefined>("");

   const app = useNuxtApp();

   const { $today, $currentLocale } = app;

   const columns: Array<any> = [

      {

         field: "title",

         headerText: "العنوان",

      },

      {

         field: "description",

         headerText: "الشرح المفصل",

      },

      {

         field: "price",

         type: "number",

         headerText: "السعر",

      },

   ];

   const filterOptions = {

      type: "CheckBox",

      columns: [

         { field: "title", matchCase: false, operator: "contains", predicate: "and", value: "", mode: "Immediate" },

         { field: "description", matchCase: false, operator: "contains", predicate: "and", value: "", mode: "Immediate" },

      ],

   };

   // const today = app.today;

   // const locale = app.locale;

   console.log("Today", $today);

   console.log("Current Locale", $currentLocale());

   const onClose = (ev: any) => ev.preventDefault();

   const handleClick = async () => {

      debugger;

      const { data } = await useFetch("/api/ninga?name=Ayman");

      response.value = data.value?.message;

   };

</script>

<style>

   .style {

      background-color: red;

   }

   h2 {

      margin-bottom: 20px;

      font-size: 36px;

   }

   p {

      margin: 20px 0;

   }

</style>

```

[Pavithra Subramaniyam]

Hi Ayman Shokry,

Thanks for contacting Syncfusion support.

To validate the reported scenario could you please share some more details which will be helpful for us to provide a better solution as early as possible.

1. Share the Syncfusion package version
2. Is there any error while using the reusable Grid component?
3. Share an issue reproducible sample if possible.

Regards,

Pavithra S

[Ayman Shokry]

1 - Version 21.1.38

2 - It gives no errors but warning in the console " e-columns has already been registered in target app." and " e-column has already been registered in target app."

Attachment: SyncfusionApp_92249fad.zip

[Pavithra Subramaniyam]

Hi Ayman Shokry,

Thanks for sharing the details.

From the sample, we could see that you haven’t imported the “DataGrid” component while using the reusable Grid which is the cause of the reported behavior. So, we suggest importing as in the below code to achieve your requirement.

<template>

   <div>

      <h2>About {{ response }}</h2>

      .  .  .

      <data-grid :dataSource="data" :columns="columns"></data-grid>

 

      <button @click="handleClick" class="btn">Press API</button>

   </div>

</template>

 

<script setup lang="ts">

   import DataGrid from '../components/Base/DataGrid.vue';

 

   .  .  .

</script>

 

 

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

Regards,

Pavithra S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ayman Shokry]

Hello , thanks for your reply but I forgot to inform you that I am using Nuxt 3 which has auto-import feature and therefore I don't need to expilicity import the DataGrid as well as it gives me an error:

[Pavithra Subramaniyam]

Hi Ayman Shokry,

While importing the DataGrid component using the below code, the Grid is rendered properly in your sample.

import DataGrid from '../components/Base/DataGrid.vue';

Please refer to the previously attached snap for more information. If you are still facing the issue, could you please ensure that you could render normal HTML components like button using this reusable component without the EJ2 Grid on your side?