✅ Fix for Vue Console Warning: "Component emitted event XXX but it is neither declared in the emits option"

[AzureHearted]

✅ Fix for Vue Console Warning: "Component emitted event XXX but it is neither declared in the emits option"

Issue Description

When using @egjs/vue3-infinitegrid with Vue 3.3+ (including 3.4 and 3.5), console warnings appear like:

[Vue warn]: Component emitted event "XXX" but it is neither declared in the emits option

Reason: Some components in the library (e.g., JustifiedInfiniteGrid) emit events internally but do not declare them in emits. Vue 3.3+ strictly validates emits, causing these warnings.

---

User-side Solution (Universal)

For any component in the library, you can extend it and declare the missing emits to eliminate the warning:

import { defineComponent } from "vue";
import { JustifiedInfiniteGrid } from "@egjs/vue3-infinitegrid";

export const JustifiedInfiniteGridFixed = defineComponent({
  extends: JustifiedInfiniteGrid, // replace with other components as needed
  emits: [
    "change-scroll",
    "request-append",
    "request-prepend",
    "render-complete",
    "content-error",
  ],
});

Usage:

<JustifiedInfiniteGridFixed />

This method works for other components in the library as well. Simply replace extends with the desired component.

---

Recommendation for Library Maintainers

Declare all emitted events inside the component:

emits: [
  "change-scroll",
  "request-append",
  "request-prepend",
  "render-complete",
  "content-error",
],

This allows all users to use the components without manual wrappers and eliminates Vue 3.3+ warnings.