diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 8ed2aadd1a..539c8424c0 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.23](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.22...vue3-migration-test@1.0.0-alpha.23) (2024-06-04)
+
+
+### Features
+
+* add BaseEventsModal to the playground ([3e437c5](https://github.com/empathyco/x/commit/3e437c56d4e3f314b373b486e8926c4f4b028fc6))
+
+
+
+## [1.0.0-alpha.22](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.21...vue3-migration-test@1.0.0-alpha.22) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.20...vue3-migration-test@1.0.0-alpha.21) (2024-05-31)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 2a272ddf24..93bd22ba7c 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 0210867c1e..45c4690d74 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -12,3 +12,5 @@ export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
+export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
+export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
new file mode 100644
index 0000000000..935e5363a2
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="base-modal">
+    <button @click="openModal">Open modal</button>
+    <BaseEventsModal
+      :animation="Fade"
+      :focusOnOpen="true"
+      v-bind="$attrs"
+      contentClass="content"
+      overlayClass="overlay"
+    >
+      <h1>Hello</h1>
+      <p>The modal is working with events!!</p>
+      <button @click="closeModal">Close modal</button>
+    </BaseEventsModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+  import { use$x } from '../../../../x-components/src/composables/use-$x';
+  const _$x = use$x();
+
+  const openModal = () => _$x.emit('UserClickedOpenEventsModal');
+
+  const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
+</script>
+
+<style>
+  .base-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: #00ff80;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
new file mode 100644
index 0000000000..8819f09120
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="base-id-modal">
+    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
+    <BaseIdModal :animation="Fade" modalId="myModal" contentClass="content" overlayClass="overlay">
+      <h1>Hello</h1>
+      <p>The base id modal is working</p>
+      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
+    </BaseIdModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseIdModal from '../../../../x-components/src/components/modals/base-id-modal.vue';
+  import BaseIdModalOpen from '../../../../x-components/src/components/modals/base-id-modal-open.vue';
+  import BaseIdModalClose from '../../../../x-components/src/components/modals/base-id-modal-close.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+</script>
+
+<style>
+  .base-id-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 4617d5f5fa..d46cede8e1 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -27,6 +27,8 @@ import {
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
+  TestBaseEventsModal,
+  TestBaseIdModal,
   TestQuerySuggestions
 } from './';
 
@@ -166,6 +168,16 @@ const routes = [
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
   },
+  {
+    path: '/base-events-modal',
+    name: 'BaseEventsModal',
+    component: TestBaseEventsModal
+  },
+  {
+    path: '/test-base-id-modal',
+    name: 'TestBaseIdModal',
+    component: TestBaseIdModal
+  },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index c9027b2e2e..c8e419e3e0 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.31](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.30...@empathyco/x-components@5.0.0-alpha.31) (2024-06-04)
+
+
+### Features
+
+* migrate BaseEventsModal to composition API ([7ef04b6](https://github.com/empathyco/x/commit/7ef04b65bcef2eb9b9dc5bc107bc02823831d444))
+
+
+
+## [5.0.0-alpha.30](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.29...@empathyco/x-components@5.0.0-alpha.30) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [5.0.0-alpha.29](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.28...@empathyco/x-components@5.0.0-alpha.29) (2024-05-31)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index db9a4826da..7b91ed06bc 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.31",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 4aed8568ef..a6c20def62 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -88,8 +88,8 @@
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
-  import BaseIdModal from '../modals/base-id-modal.vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
+  import BaseIdModal from '../modals/base-id-modal.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { useLayouts } from './use-layouts';
 
diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index aa17adb9b0..9eae82ebc5 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,22 +1,22 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
+    ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType, ref } from 'vue';
   import { XEvent } from '../../wiring/events.types';
-  import { XOn } from '../decorators/bus.decorators';
-  import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { use$x } from '../../composables/use-$x';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -30,88 +30,109 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseEventsModal extends Vue {
-    /**
-     * Animation to use for opening/closing the modal.
-     */
-    @Prop()
-    public animation?: Vue | string;
-    /**
-     * Array of {@link XEvent} to listen to open the modal.
-     */
-    @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })
-    public eventsToOpenModal!: XEvent[];
-
-    /**
-     * Array of {@link XEvent} to listen to close the modal.
-     */
-    @Prop({
-      default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
-    })
-    public eventsToCloseModal!: XEvent[];
-
-    /**
-     * Event to emit when any part of the website out of the modal has been clicked.
-     */
-    @Prop({ default: 'UserClickedOutOfEventsModal' })
-    public bodyClickEvent!: XEvent;
-
-    /**
-     * Whether the modal is open or not.
-     */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param _payload - The payload of the event that opened the modal.
-     * @param metadata - The metadata of the event that opened the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToOpenModal)
-    openModal(_payload: unknown, metadata: WireMetadata): void {
-      if (!this.isOpen) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
-      }
-    }
-
-    /**
-     * Closes the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToCloseModal)
-    closeModal(): void {
-      if (this.isOpen) {
-        this.isOpen = false;
-      }
-    }
-
-    /**
-     * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
-     * event target is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {
-      // Prevents clicking the open button when the panel is already open to close the panel.
-      if (
-        !this.openerElement ||
-        !isElementEqualOrContained(this.openerElement, getTargetElement(event))
-      ) {
-        this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });
+  export default defineComponent({
+    name: 'BaseEventsModal',
+    components: {
+      BaseModal
+    },
+    props: {
+      /**
+       * Animation to use for opening/closing the modal.
+       */
+      animation: AnimationProp,
+
+      /**
+       * Array of {@link XEvent} to listen to open the modal.
+       */
+      eventsToOpenModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedOpenEventsModal']
+      },
+
+      /**
+       * Array of {@link XEvent} to listen to close the modal.
+       */
+      eventsToCloseModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
+      },
+
+      /**
+       * Event to emit when any part of the website out of the modal has been clicked.
+       */
+      bodyClickEvent: {
+        type: String as PropType<XEvent>,
+        default: 'UserClickedOutOfEventsModal'
       }
+    },
+    setup(props) {
+      const $x = use$x();
+
+      /**
+       * Whether the modal is open or not.
+       */
+      const isOpen = ref(false);
+
+      /** The element that opened the modal. */
+      const openerElement = ref<HTMLElement>();
+
+      const baseModalEl = ref<HTMLElement>();
+
+      /**
+       * Opens the modal.
+       *
+       * @param _payload - The payload of the event that opened the modal.
+       * @param metadata - The metadata of the event that opened the modal.
+       *
+       * @internal
+       */
+      props.eventsToOpenModal?.forEach(event =>
+        $x.on(event, true).subscribe(({ metadata }) => {
+          if (!isOpen.value) {
+            openerElement.value = metadata.target;
+            isOpen.value = true;
+          }
+        })
+      );
+
+      /**
+       * Closes the modal.
+       *
+       * @internal
+       */
+      props.eventsToCloseModal?.forEach(event =>
+        $x.on(event, false).subscribe(() => {
+          if (isOpen.value) {
+            isOpen.value = false;
+          }
+        })
+      );
+
+      /**
+       * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
+       * event target is the button that opened the modal.
+       *
+       * @param event - The event that triggered the close attempt.
+       * @public
+       */
+      const emitBodyClickEvent = (event: MouseEvent | FocusEvent) => {
+        // Prevents clicking the open button when the panel is already open to close the panel.
+        if (
+          !openerElement.value ||
+          !isElementEqualOrContained(openerElement.value, getTargetElement(event))
+        ) {
+          $x.emit(props.bodyClickEvent, undefined, { target: baseModalEl.value as HTMLElement });
+        }
+      };
+
+      return {
+        isOpen,
+        openerElement,
+        baseModalEl,
+        emitBodyClickEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/modals/base-id-modal.vue b/packages/x-components/src/components/modals/base-id-modal.vue
index 7224bdb5b6..4525b49d41 100644
--- a/packages/x-components/src/components/modals/base-id-modal.vue
+++ b/packages/x-components/src/components/modals/base-id-modal.vue
@@ -1,21 +1,23 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
+    :ref="el"
     @click:overlay="emitClickOutOfModal"
     @focusin:body="emitClickOutOfModal"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { XOn } from '../decorators/bus.decorators';
+  import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { useXBus } from '../../composables';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { XEvent } from '../../wiring/events.types';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -26,71 +28,94 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseIdModal extends Vue {
-    /** Animation to use for opening/closing the modal. */
-    @Prop()
-    public animation?: Vue | string;
-
-    /** The modalId to use for the open and close event listeners. */
-    @Prop({ required: true })
-    public modalId!: string;
-
-    /** Whether the modal is open or not. */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
-     * @param metadata - The metadata of the emitted event.
-     * @public
-     */
-    @XOn('UserClickedOpenModal')
-    openModal(modalId: string, metadata: WireMetadata): void {
-      if (!this.isOpen && this.modalId === modalId) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
+  export default defineComponent({
+    name: 'BaseIdModal',
+    components: { BaseModal },
+    props: {
+      /**
+       * Animation to use for opening/closing the modal.
+       */
+      animation: {
+        type: AnimationProp
+      },
+      /**
+       * The modalId to use for the open and close event listeners.
+       */
+      modalId: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      /** The element that opened the modal. */
+      let openerElement: HTMLElement | undefined;
+
+      /** Whether the modal is open or not. */
+      const isOpen = ref(false);
+
+      const el = ref<HTMLElement>();
+
+      const closeModalEvents: XEvent[] = ['UserClickedCloseModal', 'UserClickedOutOfModal'];
+
+      const xBus = useXBus();
+
+      /**
+       * Opens the modal.
+       *
+       * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
+       * @param metadata - The metadata of the emitted event.
+       * @public
+       */
+      function openModal(modalId: string, metadata: WireMetadata): void {
+        if (!isOpen.value && props.modalId === modalId) {
+          openerElement = metadata.target;
+          isOpen.value = true;
+        }
       }
-    }
 
-    /**
-     * Closes the modal.
-     *
-     * @param payload - The payload of the closing events:
-     * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
-     *
-     * @public
-     */
-    @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])
-    closeModal(payload: string): void {
-      if (this.isOpen && this.modalId === payload) {
-        this.isOpen = false;
+      /**
+       * Closes the modal.
+       *
+       * @param payload - The payload of the closing events:
+       * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
+       *
+       * @public
+       */
+      function closeModal(payload: string): void {
+        if (isOpen.value && props.modalId === payload) {
+          isOpen.value = false;
+        }
       }
-    }
 
-    /**
-     * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
-     * is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {
-      // Prevents clicking the open button when the panel is already open to close the panel.
-      if (
-        !this.openerElement ||
-        !isElementEqualOrContained(this.openerElement, getTargetElement(event))
-      ) {
-        this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });
+      /**
+       * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
+       * is the button that opened the modal.
+       *
+       * @param event - The event that triggered the close attempt.
+       * @public
+       */
+      function emitClickOutOfModal(event: MouseEvent | FocusEvent): void {
+        // Prevents clicking the open button when the panel is already open to close the panel.
+        if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {
+          xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value as HTMLElement });
+        }
       }
+
+      xBus
+        .on('UserClickedOpenModal', true)
+        .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));
+
+      closeModalEvents.forEach(event => {
+        xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload as string));
+      });
+
+      return {
+        el,
+        isOpen,
+        emitClickOutOfModal
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">