From a89fb5179de040695f13d56f43de50917e1c7f97 Mon Sep 17 00:00:00 2001
From: lauramargar <114984466+lauramargar@users.noreply.github.com>
Date: Thu, 9 May 2024 11:18:59 +0200
Subject: [PATCH] feat: migrate `ItemsListInjection` mixin (#1460)

---
 packages/_vue3-migration-test/src/main.ts     |   4 +
 packages/_vue3-migration-test/src/router.ts   |   6 +
 .../src/x-modules/index.ts                    |   1 +
 .../src/x-modules/next-queries/index.ts       |   1 +
 .../src/x-modules/next-queries/x-module.ts    |  13 +
 .../src/x-modules/search/index.ts             |   1 +
 .../src/x-modules/search/x-module.ts          |  17 +
 .../src/x-modules/test-elements-list.vue      |  39 ++
 .../x-components/src/components/base-grid.vue |  43 ++-
 packages/x-components/src/components/index.ts |   1 -
 .../components/items-list-injection.mixin.ts  |  45 ---
 .../src/components/items-list.vue             |  99 +++--
 .../src/components/location-provider.vue      |   2 +-
 .../__tests__/next-queries-list.spec.ts       |  49 ++-
 .../components/next-queries-list.vue          | 353 ++++++++++--------
 .../components/__tests__/banners-list.spec.ts |  49 ++-
 .../__tests__/promoteds-list.spec.ts          |  49 ++-
 .../components/__tests__/results-list.spec.ts |  59 +--
 .../search/components/banners-list.vue        | 233 +++++++-----
 .../search/components/promoteds-list.vue      | 143 ++++---
 .../search/components/results-list.vue        | 207 +++++-----
 .../x-components/tests/unit/base-grid.spec.ts |   3 +-
 22 files changed, 824 insertions(+), 593 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/next-queries/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/next-queries/x-module.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/search/x-module.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
 delete mode 100644 packages/x-components/src/components/items-list-injection.mixin.ts

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index bf9c6ba6cb..52ed2ba47f 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -4,6 +4,8 @@ import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
+import { searchXModule } from './x-modules/search/x-module';
+import { nextQueriesXModule } from './x-modules/next-queries/x-module';
 import { scrollXModule } from './x-modules/scroll/x-module';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
@@ -35,6 +37,8 @@ createApp(App as Component)
     adapter,
     store,
     __PRIVATE__xModules: {
+      search: searchXModule,
+      nextQueries: nextQueriesXModule,
       scroll: scrollXModule
     }
   })
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index a19f19f3a4..b2fbc93b16 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -8,6 +8,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
+  TestElementsList,
   TestScroll,
   TestBaseColumnPickerDropdown
 } from './';
@@ -62,6 +63,11 @@ const routes = [
     path: '/sort-picker-list',
     name: 'SortPickerList',
     component: TestSortPickerList
+  },
+  {
+    path: '/elements-list',
+    name: 'ElementsList',
+    component: TestElementsList
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index 0778e03578..9eb244b491 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -1,2 +1,3 @@
 export * from './search';
+export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
diff --git a/packages/_vue3-migration-test/src/x-modules/next-queries/index.ts b/packages/_vue3-migration-test/src/x-modules/next-queries/index.ts
new file mode 100644
index 0000000000..36ff5e471c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/next-queries/index.ts
@@ -0,0 +1 @@
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/next-queries/x-module.ts b/packages/_vue3-migration-test/src/x-modules/next-queries/x-module.ts
new file mode 100644
index 0000000000..95baf4d7e3
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/next-queries/x-module.ts
@@ -0,0 +1,13 @@
+import { getNextQueriesStub } from '../../../../x-components/src/__stubs__/next-queries-stubs.factory';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { NextQueriesXModule } from '../../../../x-components/src/x-modules/next-queries';
+
+export const nextQueriesXModule = {
+  storeModule: {
+    state: {
+      query: 'dress',
+      nextQueries: getNextQueriesStub(),
+      status: 'success'
+    }
+  }
+} as PrivateXModuleOptions<NextQueriesXModule>;
diff --git a/packages/_vue3-migration-test/src/x-modules/search/index.ts b/packages/_vue3-migration-test/src/x-modules/search/index.ts
index 07635cbbc8..38da673ebb 100644
--- a/packages/_vue3-migration-test/src/x-modules/search/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/search/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
new file mode 100644
index 0000000000..dae572726c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
@@ -0,0 +1,17 @@
+import { getResultsStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
+import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-stubs.factory';
+import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { SearchXModule } from '../../../../x-components/src/x-modules/search';
+
+export const searchXModule = {
+  storeModule: {
+    state: {
+      query: 'dress',
+      results: getResultsStub(10),
+      promoteds: getPromotedsStub(),
+      banners: getBannersStub(),
+      status: 'success'
+    }
+  }
+} as PrivateXModuleOptions<SearchXModule>;
diff --git a/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue b/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
new file mode 100644
index 0000000000..6312c90e66
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
@@ -0,0 +1,39 @@
+<template>
+  <LocationProvider location="results">
+    <ResultsList>
+      <PromotedsList>
+        <BannersList>
+          <NextQueriesList>
+            <BaseGrid>
+              <template #result="{ item: result }">
+                {{ result.id }}
+              </template>
+
+              <template #banner="{ item: banner }">
+                {{ banner.id }}
+              </template>
+
+              <template #promoted="{ item: promoted }">
+                {{ promoted.title }}
+              </template>
+              <template #next-queries-group="{ item: { nextQueries } }">
+                <li v-for="nextQuery in nextQueries" :key="nextQuery.query" class="next-query">
+                  {{ nextQuery.query }}
+                </li>
+              </template>
+            </BaseGrid>
+          </NextQueriesList>
+        </BannersList>
+      </PromotedsList>
+    </ResultsList>
+  </LocationProvider>
+</template>
+
+<script setup lang="ts">
+  import PromotedsList from '../../../x-components/src/x-modules/search/components/promoteds-list.vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BannersList from '../../../x-components/src/x-modules/search/components/banners-list.vue';
+  import BaseGrid from '../../../x-components/src/components/base-grid.vue';
+  import LocationProvider from '../../../x-components/src/components/location-provider.vue';
+  import NextQueriesList from '../../../x-components/src/x-modules/next-queries/components/next-queries-list.vue';
+</script>
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index ca0e2a30a8..3f58af7c02 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -19,7 +19,7 @@
         the item using that slot composition to render.
             @binding {item} item - Item to render
       -->
-      <slot v-if="$scopedSlots[slotName]" :name="slotName" :item="item" />
+      <slot v-if="slots[slotName]" :name="slotName" :item="item" />
       <!--
         @slot (required) Default item rendering. This slot will be used by default for rendering
         the item without an specific slot implementation.
@@ -41,10 +41,10 @@
     ref,
     watch
   } from 'vue';
-  import { useResizeObserver } from '@vueuse/core';
+  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
-  import { AnimationProp } from '../types/index';
+  import { AnimationProp } from '../types/animation-prop';
   import { useXBus } from '../composables/use-x-bus';
   import { LIST_ITEMS_KEY } from './decorators/injection.consts';
 
@@ -103,7 +103,11 @@
         type: Array as PropType<ListItem[]>
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
       const xBus = useXBus();
       /**
        * It injects {@link ListItem} provided by an ancestor.
@@ -112,7 +116,7 @@
        */
       const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
-      const gridEl = ref<HTMLElement | null>(null);
+      const gridEl = ref<ElementRef | HTMLElement | null>(null);
 
       let renderedColumnsNumber = ref(0);
       /**
@@ -193,16 +197,28 @@
         })
       );
 
+      /**
+       * Checks if a given value is an `ElementRef` object.
+       *
+       * @param value - The value to check.
+       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
+       *
+       * @internal
+       */
+      const isElementRef = (value: any): value is ElementRef => {
+        return value && value.$el instanceof HTMLElement;
+      };
+
       /**
        * Updates the number of columns rendered inside the grid.
        *
        * @internal
        */
       const updateRenderedColumnsNumber = (): void => {
-        if (gridEl.value !== null && gridEl.value instanceof HTMLElement) {
-          const { gridTemplateColumns } = getComputedStyle(gridEl.value);
-          renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
-        }
+        const { gridTemplateColumns } = getComputedStyle(
+          isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
+        );
+        renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
       };
 
       /**
@@ -210,15 +226,18 @@
        *
        * @internal
        */
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      const resizeObserver = useResizeObserver(gridEl, updateRenderedColumnsNumber);
+      const resizeObserver = useResizeObserver(
+        gridEl as MaybeComputedElementRef,
+        updateRenderedColumnsNumber
+      );
       onBeforeUnmount(() => resizeObserver.stop());
 
       return {
         gridItems,
         cssClasses,
         style,
-        gridEl
+        gridEl,
+        slots
       };
     }
   });
diff --git a/packages/x-components/src/components/index.ts b/packages/x-components/src/components/index.ts
index 2e35865080..cfa6e7a4f0 100644
--- a/packages/x-components/src/components/index.ts
+++ b/packages/x-components/src/components/index.ts
@@ -35,6 +35,5 @@ export * from './decorators/debounce.decorators';
 export * from './decorators/injection.consts';
 export * from './decorators/injection.decorators';
 export * from './decorators/store.decorators';
-export * from './items-list-injection.mixin';
 export * from './x-component.mixin';
 export * from './x-component.utils';
diff --git a/packages/x-components/src/components/items-list-injection.mixin.ts b/packages/x-components/src/components/items-list-injection.mixin.ts
deleted file mode 100644
index d6a45303c4..0000000000
--- a/packages/x-components/src/components/items-list-injection.mixin.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { ListItem } from '../utils/types';
-import { XInject, XProvide } from './decorators/injection.decorators';
-import { LIST_ITEMS_KEY } from './decorators/injection.consts';
-
-/**
- * Mixin to facilitate providing and injecting a list of list items. Injected list is
- * available at `injectedListItems`, and the provided list should be stored in `items`.
- *
- * @public
- */
-@Component
-export class ItemsListInjectionMixin extends Vue {
-  /**
-   * The list items of the entity that uses the mixin from the state.
-   *
-   * @remarks It should be defined in the component that uses the mixin and it's intended to be
-   * filled with items from the state. Vue doesn't allow mixins as abstract classes.
-   *
-   * @internal
-   */
-  protected stateItems!: ListItem[];
-
-  /**
-   * The computed list items of the entity that uses the mixin.
-   *
-   * @remarks It should be overridden in the component that uses the mixin and it's intended to be
-   * filled with items from the state. Vue doesn't allow mixins as abstract classes.
-   * @returns An empty array as fallback in case it is not overridden.
-   * @internal
-   */
-  @XProvide(LIST_ITEMS_KEY)
-  public get items(): ListItem[] {
-    return [];
-  }
-
-  /**
-   * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-   *
-   * @internal
-   */
-  @XInject(LIST_ITEMS_KEY)
-  public injectedListItems: ListItem[] | undefined;
-}
diff --git a/packages/x-components/src/components/items-list.vue b/packages/x-components/src/components/items-list.vue
index 84f9c40951..4634c4cdd3 100644
--- a/packages/x-components/src/components/items-list.vue
+++ b/packages/x-components/src/components/items-list.vue
@@ -23,11 +23,10 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import { ListItem } from '../utils/types';
   import { toKebabCase } from '../utils/string';
-  import { dynamicPropsMixin } from './dynamic-props.mixin';
+  import { animationProp } from '../utils/options-api';
 
   /**
    * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
@@ -35,44 +34,64 @@
    *
    * @public
    */
-  @Component
-  export default class ItemsList extends Mixins(dynamicPropsMixin(['itemClass'])) {
-    /**
-     * Animation component that will be used to animate the list.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
+  export default defineComponent({
+    name: 'ItemsList',
+    props: {
+      /**
+       * Animation component that will be used to animate the list.
+       *
+       * @public
+       */
+      animation: {
+        type: animationProp,
+        default: 'ul'
+      },
 
-    /**
-     * List of items.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected items!: ListItem[];
+      /**
+       * List of items.
+       *
+       * @public
+       */
+      items: {
+        type: Array as PropType<ListItem[]>,
+        required: true
+      },
 
-    /**
-     * The list of the items with additional properties.
-     *
-     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
-     *
-     * @internal
-     */
-    protected get computedItems(): {
-      dataTest: string;
-      class: Array<string | undefined>;
-    }[] {
-      return this.items.map(item => {
-        const modelName = toKebabCase(item.modelName);
-        return {
-          ...item,
-          dataTest: `${modelName}s-list-item`,
-          class: [`x-${modelName}s-list-item`, this.itemClass],
-          slotName: modelName
-        };
-      });
+      /**
+       * Item's classes.
+       *
+       * @public
+       */
+      itemClass: {
+        type: String
+      }
+    },
+    setup(props) {
+      /**
+       * The list of the items with additional properties.
+       *
+       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
+       *
+       * @internal
+       */
+      const computedItems = computed(
+        (): {
+          dataTest: string;
+          class: Array<string | undefined>;
+        }[] => {
+          return props.items.map(item => {
+            const modelName = toKebabCase(item.modelName);
+            return {
+              ...item,
+              dataTest: `${modelName}s-list-item`,
+              class: [`x-${modelName}s-list-item`, props.itemClass],
+              slotName: modelName
+            };
+          });
+        }
+      );
+
+      return { computedItems };
     }
-  }
+  });
 </script>
diff --git a/packages/x-components/src/components/location-provider.vue b/packages/x-components/src/components/location-provider.vue
index a485785885..0dc38d159b 100644
--- a/packages/x-components/src/components/location-provider.vue
+++ b/packages/x-components/src/components/location-provider.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { defineComponent, PropType, provide, toRef } from 'vue';
   import { FeatureLocation } from '../types';
-  import { useNoElementRender } from '../composables/index';
+  import { useNoElementRender } from '../composables/use-no-element-render';
 
   /**
    * Location Provider component.
diff --git a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
index 679b623c4e..cb19dc8dca 100644
--- a/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
+++ b/packages/x-components/src/x-modules/next-queries/components/__tests__/next-queries-list.spec.ts
@@ -1,19 +1,24 @@
 import { NextQuery } from '@empathyco/x-types';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
 import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue, { ComponentOptions, VueConstructor } from 'vue';
+import Vue, {
+  ComponentOptions,
+  computed,
+  defineComponent,
+  inject,
+  provide,
+  Ref,
+  VueConstructor
+} from 'vue';
 import Vuex, { Store } from 'vuex';
-import Component from 'vue-class-component';
 import { createNextQueryStub } from '../../../../__stubs__/next-queries-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
-import { ItemsListInjectionMixin } from '../../../../components/items-list-injection.mixin';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { ListItem } from '../../../../utils/types';
 import { nextQueriesXModule } from '../../x-module';
 import NextQueriesList from '../next-queries-list.vue';
-import { XProvide } from '../../../../components/decorators/injection.decorators';
-import { QUERY_KEY } from '../../../../components/decorators/injection.consts';
+import { LIST_ITEMS_KEY, QUERY_KEY } from '../../../../components/decorators/injection.consts';
 import { RequestStatus } from '../../../../store/utils/status-store.utils';
 import { resetXNextQueriesStateWith } from './utils';
 
@@ -45,15 +50,16 @@ function renderNextQueriesList({
   extraItems,
   ...props
 }: RenderNextQueriesListOptions = {}): RenderNextQueriesListAPI {
-  @Component({
+  const ProviderWrapper = defineComponent({
+    name: 'ProviderWrapper',
+    setup() {
+      const searchQueryComputed = computed(() => searchQuery);
+      provide(QUERY_KEY as string, searchQueryComputed);
+    },
     template: `
       <div><slot /></div>
     `
-  })
-  class ProviderWrapper extends Vue {
-    @XProvide(QUERY_KEY)
-    public searchQuery = searchQuery;
-  }
+  });
 
   const localVue = createLocalVue();
   localVue.use(Vuex);
@@ -69,11 +75,9 @@ function renderNextQueriesList({
         NextQueriesList,
         ...components
       },
-      mixins: [ItemsListInjectionMixin],
-      computed: {
-        items() {
-          return extraItems;
-        }
+      setup() {
+        const items = computed(() => extraItems);
+        provide(LIST_ITEMS_KEY as string, items);
       }
     },
     {
@@ -252,13 +256,20 @@ describe('testing NextQueriesList component', () => {
   });
 
   it('provides the modified list of list items', () => {
-    const CustomList: ComponentOptions<Vue> = {
-      mixins: [ItemsListInjectionMixin],
+    const CustomList = defineComponent({
+      name: 'CustomList',
+      setup() {
+        const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+
+        return {
+          injectedListItems
+        };
+      },
       template: `
         <ul>
         <li class="search-item" v-for="item in injectedListItems">{{ item.id }}</li>
         </ul>`
-    };
+    });
     const nextQueries = createNextQueries('rib chop', 'shoulder steak');
     const extraItems = createExtraItems(4);
     const { wrapper } = renderNextQueriesList({
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
index 4bd9b6dbe6..5c12f71a4f 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <NoElement>
+  <div v-if="items.length > 0">
     <!--
       @slot Next queries list layout.
         @binding {SearchItem[]} items - Next queries groups plus the injected list items to
@@ -8,30 +8,31 @@
     -->
     <slot v-bind="{ items, animation }">
       <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="{ item }">
+        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
           <slot :name="slotName" :item="item" />
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
+  </div>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
+  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
   import { NextQuery } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { NoElement } from '../../../components/no-element';
-  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';
   import ItemsList from '../../../components/items-list.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { groupItemsBy } from '../../../utils/array';
   import { ListItem } from '../../../utils/types';
   import { NextQueriesGroup } from '../types';
   import { nextQueriesXModule } from '../x-module';
-  import { XInject } from '../../../components/decorators/injection.decorators';
-  import { HAS_MORE_ITEMS_KEY, QUERY_KEY } from '../../../components/decorators/injection.consts';
+  import {
+    HAS_MORE_ITEMS_KEY,
+    LIST_ITEMS_KEY,
+    QUERY_KEY
+  } from '../../../components/decorators/injection.consts';
+  import { AnimationProp } from '../../../types/index';
+  import { use$x } from '../../../composables/use-$x';
+  import { useGetter } from '../../../composables/use-getter';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
 
   /**
    * Component that inserts groups of next queries in different positions of the injected search
@@ -39,162 +40,192 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'NextQueriesList',
     components: {
-      NoElement,
       ItemsList
     },
-    mixins: [xComponentMixin(nextQueriesXModule)]
-  })
-  export default class NextQueriesList extends mixins(ItemsListInjectionMixin) {
-    /**
-     * Animation component that will be used to animate the next queries groups.
-     *
-     * @public
-     */
-    @Prop()
-    protected animation?: Vue | string;
-
-    /**
-     * The first index to insert a group of next queries at.
-     *
-     * @public
-     */
-    @Prop({ default: 24 })
-    public offset!: number;
-
-    /**
-     * The items cycle size to keep inserting next queries groups at.
-     *
-     * @public
-     */
-    @Prop({ default: 24 })
-    public frequency!: number;
-
-    /**
-     * The maximum amount of next queries to add in a single group.
-     *
-     * @public
-     */
-    @Prop({ default: 4 })
-    public maxNextQueriesPerGroup!: number;
-
-    /**
-     * The maximum number of groups to insert into the injected list items list.
-     *
-     * @public
-     */
-    @Prop()
-    public maxGroups!: number;
-
-    /**
-     * Determines if a group is added to the injected items list in case the number
-     * of items is smaller than the offset.
-     *
-     * @public
-     */
-    @Prop({ default: false })
-    public showOnlyAfterOffset!: boolean;
-
-    /**
-     * The state next queries.
-     *
-     * @internal
-     */
-    @Getter('nextQueries', 'nextQueries')
-    public nextQueries!: NextQuery[];
-
-    /**
-     * Injected query, updated when the related request(s) have succeeded.
-     */
-    @XInject(QUERY_KEY)
-    public injectedQuery!: string | undefined;
-
-    /**
-     * Indicates if there are more available results than the injected.
-     */
-    @XInject(HAS_MORE_ITEMS_KEY)
-    public hasMoreItems!: boolean;
-
-    /**
-     * The grouped next queries based on the given config.
-     *
-     * @returns A list of next queries groups.
-     * @internal
-     */
-    protected get nextQueriesGroups(): NextQueriesGroup[] {
-      return Object.values(
-        groupItemsBy(this.nextQueries, (_, index) =>
-          Math.floor(index / this.maxNextQueriesPerGroup)
-        )
-      )
-        .slice(0, this.maxGroups)
-        .map(nextQueries => ({
-          modelName: 'NextQueriesGroup' as const,
-          id: nextQueries.map(nextQuery => nextQuery.query).join(','),
-          nextQueries
-        }));
-    }
-
-    /**
-     * New list of {@link ListItem}s to render.
-     *
-     * @returns The new list of {@link ListItem}s with the next queries groups inserted.
-     * @internal
-     */
-    public override get items(): ListItem[] {
-      if (!this.injectedListItems) {
-        return this.nextQueriesGroups;
+    xModule: nextQueriesXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the next queries groups.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The first index to insert a group of next queries at.
+       *
+       * @public
+       */
+      offset: {
+        type: Number,
+        default: 24
+      },
+      /**
+       * The items cycle size to keep inserting next queries groups at.
+       *
+       * @public
+       */
+      frequency: {
+        type: Number,
+        default: 24
+      },
+      /**
+       * The maximum amount of next queries to add in a single group.
+       *
+       * @public
+       */
+      maxNextQueriesPerGroup: {
+        type: Number,
+        default: 4
+      },
+      /**
+       * The maximum number of groups to insert into the injected list items list.
+       *
+       * @public
+       */
+      maxGroups: Number,
+      /**
+       * Determines if a group is added to the injected items list in case the number
+       * of items is smaller than the offset.
+       *
+       * @public
+       */
+      showOnlyAfterOffset: {
+        type: Boolean,
+        default: false
       }
-      if (this.nextQueriesAreOutdated) {
-        return this.injectedListItems;
-      }
-      if (this.hasNotEnoughListItems) {
-        return this.injectedListItems.concat(this.nextQueriesGroups[0] ?? []);
-      }
-      return this.nextQueriesGroups.reduce(
-        (items, nextQueriesGroup, index) => {
-          const targetIndex = this.offset + this.frequency * index;
-          if (targetIndex <= items.length) {
-            items.splice(targetIndex, 0, nextQueriesGroup);
-          }
-          return items;
-        },
-        [...this.injectedListItems]
-      );
-    }
-
-    /**
-     * Checks if the next queries are outdated taking into account the injected query.
-     *
-     * @returns True if the next queries are outdated, false if not.
-     * @internal
-     */
-    protected get nextQueriesAreOutdated(): boolean {
-      return (
-        !!this.injectedQuery &&
-        (this.$x.query.nextQueries !== this.injectedQuery ||
-          this.$x.status.nextQueries !== 'success')
+    },
+    setup(props, { slots }) {
+      useRegisterXModule(nextQueriesXModule);
+
+      const $x = use$x();
+
+      /**
+       * The state next queries.
+       *
+       * @internal
+       */
+      const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [
+        'nextQueries'
+      ]).nextQueries;
+
+      /**
+       * Injected query, updated when the related request(s) have succeeded.
+       */
+      const injectedQuery = inject<Ref<string | undefined>>(QUERY_KEY as string);
+
+      /**
+       * Indicates if there are more available results than the injected.
+       */
+      const hasMoreItems = inject<Ref<boolean | undefined>>(HAS_MORE_ITEMS_KEY as string);
+
+      /**
+       * The grouped next queries based on the given config.
+       *
+       * @returns A list of next queries groups.
+       * @internal
+       */
+      const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>
+        Object.values(
+          groupItemsBy(nextQueries?.value, (_, index) =>
+            Math.floor(index / props.maxNextQueriesPerGroup)
+          )
+        )
+          .slice(0, props.maxGroups)
+          .map(nextQueries => ({
+            modelName: 'NextQueriesGroup' as const,
+            id: nextQueries.map(nextQuery => nextQuery.query).join(','),
+            nextQueries
+          }))
       );
-    }
 
-    /**
-     * Checks if the number of items is smaller than the offset so a group
-     * should be added to the injected items list.
-     *
-     * @returns True if a group should be added, false if not.
-     * @internal
-     */
-    protected get hasNotEnoughListItems(): boolean {
-      return (
-        !this.showOnlyAfterOffset &&
-        !this.hasMoreItems &&
-        this.injectedListItems !== undefined &&
-        this.injectedListItems.length > 0 &&
-        this.offset > this.injectedListItems.length
-      );
+      /**
+       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
+       *
+       * @internal
+       */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+
+      /**
+       * Checks if the next queries are outdated taking into account the injected query.
+       *
+       * @returns True if the next queries are outdated, false if not.
+       * @internal
+       */
+      const nextQueriesAreOutdated = computed(() => {
+        return (
+          !!injectedQuery?.value &&
+          ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success')
+        );
+      });
+
+      /**
+       * Checks if the number of items is smaller than the offset so a group
+       * should be added to the injected items list.
+       *
+       * @returns True if a group should be added, false if not.
+       * @internal
+       */
+      const hasNotEnoughListItems = computed(() => {
+        return (
+          !props.showOnlyAfterOffset &&
+          !hasMoreItems?.value &&
+          injectedListItems !== undefined &&
+          injectedListItems.value.length > 0 &&
+          props.offset > injectedListItems.value.length
+        );
+      });
+
+      /**
+       * New list of {@link ListItem}s to render.
+       *
+       * @returns The new list of {@link ListItem}s with the next queries groups inserted.
+       * @internal
+       */
+
+      const items = computed((): ListItem[] => {
+        if (!injectedListItems?.value) {
+          return nextQueriesGroups.value;
+        }
+        if (nextQueriesAreOutdated.value) {
+          return injectedListItems.value;
+        }
+        if (hasNotEnoughListItems.value) {
+          return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? []);
+        }
+        return nextQueriesGroups?.value.reduce(
+          (items, nextQueriesGroup, index) => {
+            const targetIndex = props.offset + props.frequency * index;
+            if (targetIndex <= items.length) {
+              items.splice(targetIndex, 0, nextQueriesGroup);
+            }
+            return items;
+          },
+          [...injectedListItems.value]
+        );
+      });
+
+      /**
+       * The computed list items of the entity that uses the mixin.
+       *
+       * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+       * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+       * @returns An empty array as fallback in case it is not overridden.
+       * @internal
+       */
+      provide(LIST_ITEMS_KEY as string, items);
+
+      return {
+        items,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
index 858e74acff..d382905966 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/banners-list.spec.ts
@@ -1,9 +1,16 @@
 import { Banner } from '@empathyco/x-types';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { VueConstructor, ComponentOptions } from 'vue';
+import Vue, {
+  VueConstructor,
+  ComponentOptions,
+  computed,
+  defineComponent,
+  provide,
+  inject,
+  Ref
+} from 'vue';
 import Vuex, { Store } from 'vuex';
-import { Component } from 'vue-property-decorator';
 import BaseGrid from '../../../../components/base-grid.vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { XPlugin } from '../../../../plugins/x-plugin';
@@ -14,7 +21,6 @@ import { getBannersStub } from '../../../../__stubs__/banners-stubs.factory';
 import BannersList from '../banners-list.vue';
 import { LIST_ITEMS_KEY } from '../../../../components/decorators/injection.consts';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
-import { XInject, XProvide } from '../../../../components/decorators/injection.decorators';
 import { resetXSearchStateWith } from './utils';
 
 /**
@@ -95,7 +101,7 @@ describe('testing BannersList component', () => {
         </BannersList>`
     });
 
-    expect(wrapper.classes('x-items-list')).toBe(true);
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
     expect(wrapper.find(getDataTestSelector('banners-list-item')).exists()).toBe(true);
     expect(wrapper.find(getDataTestSelector('banner-slot-overridden')).text()).toBe(
       `Custom banner: ${getBanners()[0].id}`
@@ -127,33 +133,36 @@ describe('testing BannersList component', () => {
     resetXSearchStateWith(store, { banners: bannersStub, totalResults: resultsStub.length * 2 });
 
     /* It provides an array with some results */
-    @Component({
+    const Provider = defineComponent({
+      name: 'Provider',
+      setup() {
+        const providedStub = computed((): ListItem[] => resultsStub);
+        provide(LIST_ITEMS_KEY as string, providedStub);
+      },
       template: `
         <div><slot /></div>
       `
-    })
-    class Provider extends Vue {
-      @XProvide(LIST_ITEMS_KEY)
-      public providedStub: ListItem[] = resultsStub;
-    }
+    });
 
     /*
      * It should inject an array with the result from the Provider and the banner concatenated from
      * BannersList
      */
-    @Component({
+    const Child = defineComponent({
+      name: 'Child',
+      setup() {
+        const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+        const injectedListItemsString = computed(
+          (): string => injectedListItems?.value.map(item => item.id).join(',') ?? ''
+        );
+        return {
+          injectedListItemsString
+        };
+      },
       template: `
         <p>{{ injectedListItemsString }}</p>
       `
-    })
-    class Child extends Vue {
-      @XInject(LIST_ITEMS_KEY)
-      public injectedListItems: ListItem[] | undefined;
-
-      protected get injectedListItemsString(): string {
-        return this.injectedListItems?.map(item => item.id).join(',') ?? '';
-      }
-    }
+    });
 
     const wrapper = mount(
       {
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
index f26d91ccd7..17a265da98 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/promoteds-list.spec.ts
@@ -1,9 +1,16 @@
 import { Promoted } from '@empathyco/x-types';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { VueConstructor, ComponentOptions } from 'vue';
+import Vue, {
+  VueConstructor,
+  ComponentOptions,
+  defineComponent,
+  computed,
+  provide,
+  inject,
+  Ref
+} from 'vue';
 import Vuex, { Store } from 'vuex';
-import Component from 'vue-class-component';
 import BaseGrid from '../../../../components/base-grid.vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { XPlugin } from '../../../../plugins/x-plugin';
@@ -13,7 +20,6 @@ import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/ut
 import PromotedsList from '../promoteds-list.vue';
 import { getPromotedsStub } from '../../../../__stubs__/promoteds-stubs.factory';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
-import { XInject, XProvide } from '../../../../components/decorators/injection.decorators';
 import { LIST_ITEMS_KEY } from '../../../../components/decorators/injection.consts';
 import { resetXSearchStateWith } from './utils';
 
@@ -95,7 +101,7 @@ describe('testing PromotedsList component', () => {
         </PromotedsList>`
     });
 
-    expect(wrapper.classes('x-items-list')).toBe(true);
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
     expect(wrapper.find(getDataTestSelector('promoteds-list-item')).exists()).toBe(true);
     expect(wrapper.find(getDataTestSelector('promoted-slot-overridden')).text()).toBe(
       `Custom promoted: ${getPromoteds()[0].title}`
@@ -130,33 +136,36 @@ describe('testing PromotedsList component', () => {
     });
 
     /* It provides an array with some results */
-    @Component({
+    const Provider = defineComponent({
+      name: 'Provider',
+      setup() {
+        const providedStub = computed((): ListItem[] => resultsStub);
+        provide(LIST_ITEMS_KEY as string, providedStub);
+      },
       template: `
         <div><slot /></div>
       `
-    })
-    class Provider extends Vue {
-      @XProvide(LIST_ITEMS_KEY)
-      public providedStub: ListItem[] = resultsStub;
-    }
+    });
 
     /*
      * It should inject an array with the result from the Provider and the banner concatenated from
      * BannersList
      */
-    @Component({
+    const Child = defineComponent({
+      name: 'Child',
+      setup() {
+        const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+        const injectedListItemsString = computed(
+          (): string => injectedListItems?.value!.map(item => item.id).join(',') ?? ''
+        );
+        return {
+          injectedListItemsString
+        };
+      },
       template: `
         <p>{{ injectedListItemsString }}</p>
       `
-    })
-    class Child extends Vue {
-      @XInject(LIST_ITEMS_KEY)
-      public injectedListItems: ListItem[] | undefined;
-
-      protected get injectedListItemsString(): string {
-        return this.injectedListItems?.map(item => item.id).join(',') ?? '';
-      }
-    }
+    });
 
     const wrapper = mount(
       {
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
index f7e9aad95d..38d98e794b 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/results-list.spec.ts
@@ -1,9 +1,8 @@
 import { Result } from '@empathyco/x-types';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper, VueClass } from '@vue/test-utils';
-import Vue, { VueConstructor, ComponentOptions } from 'vue';
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
+import Vue, { VueConstructor, ComponentOptions, defineComponent, inject, Ref } from 'vue';
 import Vuex, { Store } from 'vuex';
-import Component from 'vue-class-component';
 import { getResultsStub } from '../../../../__stubs__/results-stubs.factory';
 import BaseGrid from '../../../../components/base-grid.vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
@@ -12,7 +11,6 @@ import { ListItem } from '../../../../utils/types';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import ResultsList from '../results-list.vue';
 import { InfiniteScroll } from '../../../../directives/infinite-scroll/infinite-scroll.types';
-import { XInject } from '../../../../components/decorators/injection.decorators';
 import {
   HAS_MORE_ITEMS_KEY,
   LIST_ITEMS_KEY,
@@ -107,7 +105,7 @@ describe('testing Results list component', () => {
         </ResultsList>`
     });
 
-    expect(wrapper.classes('x-items-list')).toBe(true);
+    expect(wrapper.find(getDataTestSelector('items-list')).classes('x-items-list')).toBe(true);
     expect(wrapper.find(getDataTestSelector('results-list-item')).exists()).toBe(true);
     expect(wrapper.find(getDataTestSelector('result-slot-overridden')).text()).toBe(
       `Custom result: ${getResults()[0].name!}`
@@ -141,15 +139,17 @@ describe('testing Results list component', () => {
   });
 
   it('provides the results from state with the key `item`', () => {
-    @Component({
+    const Child = defineComponent({
+      name: 'Child',
+      setup() {
+        const items = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+
+        return { items };
+      },
       template: `
         <div>{{ items[0].id }}</div>
       `
-    })
-    class Child extends Vue {
-      @XInject(LIST_ITEMS_KEY)
-      public items!: ListItem[];
-    }
+    });
 
     const { wrapper, getResults } = renderResultsList({
       template: '<ResultsList><Child /></ResultsList>',
@@ -164,16 +164,17 @@ describe('testing Results list component', () => {
 
   // eslint-disable-next-line max-len
   it('provides the query with the key `query`, only updating it if the status is success', async () => {
-    @Component({
+    const Child = defineComponent({
+      name: 'Child',
+      setup() {
+        const searchQuery = inject<Ref<string>>(QUERY_KEY as string);
+
+        return { searchQuery };
+      },
       template: `
         <div>{{ searchQuery }}</div>
       `
-    })
-    class Child extends Vue {
-      @XInject(QUERY_KEY)
-      public searchQuery!: string;
-    }
-
+    });
     const { wrapper, commit } = renderResultsList({
       template: `<ResultsList><Child/></ResultsList>`,
       components: {
@@ -215,31 +216,37 @@ describe('testing Results list component', () => {
   });
 
   it('provides a flag indicating if there are more results with the key `hasMoreItems`', () => {
-    @Component({
+    const Child = defineComponent({
+      name: 'Child',
+      setup() {
+        const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);
+
+        return { hasMoreItems };
+      },
       template: `
         <div></div>
       `
-    })
-    class Child extends Vue {
-      @XInject(HAS_MORE_ITEMS_KEY)
-      public hasMoreItems!: boolean;
-    }
+    });
 
     const { commit, wrapper } = renderResultsList({
-      template: '<ResultsList><Child /></ResultsList>',
+      template: `<ResultsList><Child /></ResultsList>`,
       components: {
         Child
       }
     });
 
-    const childWrapper = wrapper.findComponent(Child as VueClass<Child>);
+    const childWrapper = wrapper.findComponent(Child);
 
     // Initially, the number of `items` and `totalResults` should match.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     expect(childWrapper.vm.hasMoreItems).toBe(false);
 
     commit('setTotalResults', 1000);
 
     // Now the `totalResults` is higher than the number of `items`
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     expect(childWrapper.vm.hasMoreItems).toBe(true);
   });
 });
diff --git a/packages/x-components/src/x-modules/search/components/banners-list.vue b/packages/x-components/src/x-modules/search/components/banners-list.vue
index e7d70a0513..96f4b80d0e 100644
--- a/packages/x-components/src/x-modules/search/components/banners-list.vue
+++ b/packages/x-components/src/x-modules/search/components/banners-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <NoElement>
+  <div v-if="items.length > 0">
     <!--
       @slot Customized BannersList layout.
         @binding {Banner[]} items - Banners plus the injected list items to render.
@@ -7,28 +7,30 @@
     -->
     <slot v-bind="{ items, animation }">
       <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="{ item }">
+        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
           <slot :name="slotName" :item="item" />
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
+  </div>
 </template>
 
 <script lang="ts">
   import { Banner } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Inject, Prop } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { NoElement } from '../../../components/no-element';
-  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';
+  import { computed, ComputedRef, defineComponent, inject, provide, ref, Ref } from 'vue';
+  import { Observable } from 'rxjs';
+  import { EventPayload, SubjectPayload } from '@empathyco/x-bus';
   import ItemsList from '../../../components/items-list.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { FeatureLocation } from '../../../types/origin';
   import { ListItem } from '../../../utils/types';
-  import { WireMetadata } from '../../../wiring/wiring.types';
   import { searchXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
+  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
+  import { WireMetadata } from '../../../wiring/wiring.types';
+  import { XEventsTypes } from '../../../wiring/events.types';
 
   /**
    * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
@@ -42,99 +44,136 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'BannersList',
     components: {
-      ItemsList,
-      NoElement
+      ItemsList
     },
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class BannersList extends ItemsListInjectionMixin {
-    /**
-     * The banners to render from the state.
-     *
-     * @public
-     */
-    @State('search', 'banners')
-    public stateItems!: Banner[];
-
-    /**
-     * Animation component that will be used to animate the banners.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The provided {@link FeatureLocation} for the component.
-     *
-     * @internal
-     */
-    @Inject({ default: undefined })
-    protected location?: FeatureLocation;
-
-    /**
-     * Number of columns the grid is being divided into.
-     *
-     * @internal
-     */
-    protected columnsNumber = 0;
-
-    /**
-     * Handler to update the number of columns when it changes.
-     *
-     * @param newColumnsNumber - The new columns value.
-     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
-     *
-     * @internal
-     */
-    @XOn(['RenderedColumnsNumberChanged'])
-    setColumnsNumber(newColumnsNumber: number, { location }: WireMetadata): void {
-      if (location === this.location) {
-        this.columnsNumber = newColumnsNumber;
-      }
-    }
-
-    /**
-     * The `stateItems` concatenated with the `injectedListItems` if there are.
-     *
-     * @remarks This computed defines the merging strategy of the `stateItems` and the
-     * `injectedListItems`.
-     *
-     * @returns List of {@link ListItem}.
-     *
-     * @internal
-     */
-    public override get items(): ListItem[] {
-      if (!this.injectedListItems?.length) {
-        return this.stateItems;
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the banners.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
       }
-      const items = [...this.injectedListItems];
-      let index = 0,
-        previousBannerRow = -1;
-      for (const item of this.stateItems) {
-        const position = item.position ?? 1;
-        let row = position - 1;
-        if (row <= previousBannerRow) {
-          row = previousBannerRow + 1;
+    },
+    setup(_, { slots }) {
+      useRegisterXModule(searchXModule);
+
+      const $x = use$x();
+
+      /**
+       * The banners to render from the state.
+       *
+       * @public
+       */
+      const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;
+
+      /**
+       * The provided {@link FeatureLocation} for the component.
+       *
+       * @internal
+       */
+      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation | undefined>(
+        'location',
+        undefined
+      );
+      const location =
+        typeof injectedLocation === 'object' && 'value' in injectedLocation
+          ? injectedLocation.value
+          : injectedLocation;
+
+      /**
+       * Number of columns the grid is being divided into.
+       *
+       * @internal
+       */
+      let columnsNumber = ref(0);
+
+      /**
+       * Handler to update the number of columns when it changes.
+       *
+       * @param newColumnsNumber - The new columns value.
+       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
+       *
+       * @internal
+       */
+      (
+        $x.on('RenderedColumnsNumberChanged', true) as unknown as Observable<
+          SubjectPayload<EventPayload<XEventsTypes, keyof XEventsTypes>, WireMetadata>
+        >
+      ).subscribe(({ eventPayload, metadata }) => {
+        if (metadata.location === location) {
+          columnsNumber.value = eventPayload as number;
         }
-        const rowsDiff = row - previousBannerRow;
-        if (rowsDiff > 1) {
-          index += (rowsDiff - 1) * this.columnsNumber;
+      });
+
+      /**
+       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
+       *
+       * @internal
+       */
+      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+
+      /**
+       * The `stateItems` concatenated with the `injectedListItems` if there are.
+       *
+       * @remarks This computed defines the merging strategy of the `stateItems` and the
+       * `injectedListItems`.
+       *
+       * @returns List of {@link ListItem}.
+       *
+       * @internal
+       */
+      const items = computed((): ListItem[] => {
+        if (!injectedListItems?.value!.length) {
+          return stateItems.value;
         }
-        const isIndexInLoadedPages = index <= items.length;
-        const areAllPagesLoaded = this.$x.results.length === this.$x.totalResults;
-        if (!isIndexInLoadedPages && !areAllPagesLoaded) {
-          break;
+        const items = [...injectedListItems.value];
+        let index = 0,
+          previousBannerRow = -1;
+        for (const item of stateItems.value) {
+          const position = item.position ?? 1;
+          let row = position - 1;
+          if (row <= previousBannerRow) {
+            row = previousBannerRow + 1;
+          }
+          const rowsDiff = row - previousBannerRow;
+          if (rowsDiff > 1) {
+            index += (rowsDiff - 1) * columnsNumber.value;
+          }
+          const isIndexInLoadedPages = index <= items.length;
+          const areAllPagesLoaded = $x.results.length === $x.totalResults;
+          if (!isIndexInLoadedPages && !areAllPagesLoaded) {
+            break;
+          }
+          items.splice(index, 0, item);
+          index++;
+          previousBannerRow = row;
         }
-        items.splice(index, 0, item);
-        index++;
-        previousBannerRow = row;
-      }
-      return items;
+        return items;
+      });
+
+      /**
+       * The computed list items of the entity that uses the mixin.
+       *
+       * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+       * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+       * @returns An empty array as fallback in case it is not overridden.
+       * @internal
+       */
+      provide(LIST_ITEMS_KEY as string, items);
+
+      return {
+        items,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/promoteds-list.vue b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
index 0dc456e8ed..3ed5a804ec 100644
--- a/packages/x-components/src/x-modules/search/components/promoteds-list.vue
+++ b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <NoElement>
+  <div v-if="items.length > 0">
     <!--
       @slot Customized Promoteds List layout.
         @binding {Promoted[]} items - Promoteds plus the injected list items to render.
@@ -7,25 +7,25 @@
     -->
     <slot v-bind="{ items, animation }">
       <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="{ item }">
+        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
           <slot :name="slotName" :item="item" />
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
+  </div>
 </template>
 
 <script lang="ts">
   import { Promoted } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { NoElement } from '../../../components/no-element';
-  import { ItemsListInjectionMixin } from '../../../components/items-list-injection.mixin';
+  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
   import ItemsList from '../../../components/items-list.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { ListItem } from '../../../utils/types';
   import { searchXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
+  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
 
   /**
    * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default
@@ -39,61 +39,90 @@
    *
    * @public
    */
-  @Component({
+
+  export default defineComponent({
+    name: 'PromotedsList',
     components: {
-      NoElement,
       ItemsList
     },
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class PromotedsList extends ItemsListInjectionMixin {
-    /**
-     * The promoteds to render from the state.
-     *
-     * @public
-     */
-    @State('search', 'promoteds')
-    public stateItems!: Promoted[];
-
-    /**
-     * Animation component that will be used to animate the promoteds.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The `stateItems` concatenated with the `injectedListItems` if there are.
-     *
-     * @remarks This computed defines the merging strategy of the `stateItems` and the
-     * `injectedListItems`.
-     *
-     * @returns List of {@link ListItem}.
-     *
-     * @internal
-     */
-    public override get items(): ListItem[] {
-      if (!this.injectedListItems?.length) {
-        return this.stateItems;
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the promoteds.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
       }
-      const items = [...this.injectedListItems];
-      for (const item of this.stateItems) {
-        const position = item.position ?? 1;
-        let index = position - 1;
-        while (items.at(index)?.modelName === 'Promoted') {
-          index++;
+    },
+    setup(_, { slots }) {
+      useRegisterXModule(searchXModule);
+
+      const $x = use$x();
+
+      /**
+       * The promoteds to render from the state.
+       *
+       * @public
+       */
+      const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;
+
+      /**
+       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
+       *
+       * @internal
+       */
+      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+
+      /**
+       * The `stateItems` concatenated with the `injectedListItems` if there are.
+       *
+       * @remarks This computed defines the merging strategy of the `stateItems` and the
+       * `injectedListItems`.
+       *
+       * @returns List of {@link ListItem}.
+       *
+       * @internal
+       */
+      const items = computed((): ListItem[] => {
+        if (!injectedListItems?.value!.length) {
+          return stateItems.value;
         }
-        const isIndexInLoadedPages = index <= items.length;
-        const areAllPagesLoaded = this.$x.results.length === this.$x.totalResults;
-        if (!isIndexInLoadedPages && !areAllPagesLoaded) {
-          break;
+        const items = [...injectedListItems.value];
+        for (const item of stateItems.value) {
+          const position = item.position ?? 1;
+          let index = position - 1;
+          while (items.at(index)?.modelName === 'Promoted') {
+            index++;
+          }
+          const isIndexInLoadedPages = index <= items.length;
+          const areAllPagesLoaded = $x.results.length === $x.totalResults;
+          if (!isIndexInLoadedPages && !areAllPagesLoaded) {
+            break;
+          }
+          items.splice(index, 0, item);
         }
-        items.splice(index, 0, item);
-      }
-      return items;
+        return items;
+      });
+
+      /**
+       * The computed list items of the entity that uses the mixin.
+       *
+       * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+       * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+       * @returns An empty array as fallback in case it is not overridden.
+       * @internal
+       */
+      provide(LIST_ITEMS_KEY as string, items);
+
+      return {
+        items,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/results-list.vue b/packages/x-components/src/x-modules/search/components/results-list.vue
index 14d6fa7c01..f3abbcca4b 100644
--- a/packages/x-components/src/x-modules/search/components/results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/results-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <NoElement>
+  <div v-if="items.length > 0">
     <!--
       @slot Customize ResultsList.
         @binding {Result[]} items - Results to render.
@@ -7,31 +7,29 @@
     -->
     <slot v-bind="{ items, animation }">
       <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="{ item }">
+        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
           <slot :name="slotName" :item="item" />
         </template>
       </ItemsList>
     </slot>
-  </NoElement>
+  </div>
 </template>
 
 <script lang="ts">
+  import { computed, ComputedRef, defineComponent, provide, Ref, ref, watch } from 'vue';
   import { Result } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
   import {
     HAS_MORE_ITEMS_KEY,
     LIST_ITEMS_KEY,
     QUERY_KEY
   } from '../../../components/decorators/injection.consts';
-  import { XProvide } from '../../../components/decorators/injection.decorators';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { NoElement } from '../../../components/no-element';
   import ItemsList from '../../../components/items-list.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { InfiniteScroll } from '../../../directives/infinite-scroll/infinite-scroll.types';
-  import { searchXModule } from '../x-module';
   import { RequestStatus } from '../../../store/utils/status-store.utils';
+  import { infiniteScroll } from '../../../directives';
+  import { animationProp } from '../../../utils/options-api';
+  import { useRegisterXModule, useState } from '../../../composables';
+  import { searchXModule } from '../x-module';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -44,93 +42,118 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'ResultsList',
     components: {
-      NoElement,
       ItemsList
     },
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class ResultsList extends Vue implements InfiniteScroll {
-    /**
-     * The results to render from the state.
-     *
-     * @remarks The results list are provided with `items` key. It can be
-     * concatenated with list items from components such as `BannersList`, `PromotedsList`,
-     * `BaseGrid` or any component that injects the list.
-     *
-     * @public
-     */
-    @XProvide(LIST_ITEMS_KEY)
-    @State('search', 'results')
-    public items!: Result[];
-
-    /**
-     * It provides the search query.
-     * This query is updated only when the search request has succeeded.
-     */
-    @XProvide(QUERY_KEY)
-    public providedQuery = '';
-
-    /**
-     * Indicates if there are more available results that have not been injected.
-     *
-     * @returns Boolean.
-     * @public
-     */
-    @XProvide(HAS_MORE_ITEMS_KEY)
-    public get hasMoreItems(): boolean {
-      return this.items.length < this.totalResults;
-    }
-
-    /**
-     * The total number of results, taken from the state.
-     */
-    @State('search', 'totalResults')
-    public totalResults!: number;
-
-    /**
-     * The status of the search request, taken from the state.
-     */
-    @State('search', 'status')
-    public searchStatus!: RequestStatus;
-
-    /**
-     * The query of the search request, taken from the state.
-     */
-    @State('search', 'query')
-    public searchQuery!: string;
-
-    /**
-     * Animation component that will be used to animate the results.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * Updates the query to be provided to the child components
-     * when the search request has succeeded.
-     *
-     * @param status - The status of the search request.
-     */
-    @Watch('searchStatus')
-    updateQuery(status: RequestStatus): void {
-      if (status === 'success') {
-        this.providedQuery = this.searchQuery;
+    xModule: searchXModule.name,
+    directives: { 'infinite-scroll': infiniteScroll },
+    props: {
+      /**
+       * Animation component that will be used to animate the results.
+       *
+       * @public
+       */
+      animation: {
+        type: animationProp,
+        default: 'ul'
       }
-    }
+    },
+    emits: ['UserReachedResultsListEnd'],
+
+    setup(props, { slots }) {
+      const xBus = useXBus();
+
+      /**
+       * The {@link searchXModule | searchXModule } registered.
+       */
+      useRegisterXModule(searchXModule);
+
+      /**
+       * The results to render from the state.
+       *
+       * @remarks The results list are provided with `items` key. It can be
+       * concatenated with list items from components such as `BannersList`, `PromotedsList`,
+       * `BaseGrid` or any component that injects the list.
+       *
+       * @public
+       */
+      const items: ComputedRef<Result[]> = useState('search', ['results']).results;
+      provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);
+
+      /**
+       * The total number of results, taken from the state.
+       */
+      const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;
+
+      /**
+       * It provides the search query.
+       * This query is updated only when the search request has succeeded.
+       */
+      let providedQuery = ref('');
+      provide<Ref<string>>(QUERY_KEY as string, providedQuery);
+
+      /**
+       * Indicates if there are more available results that have not been injected.
+       *
+       * @returns Boolean.
+       * @public
+       */
+      const hasMoreItems = computed(() => {
+        return items.value.length < totalResults.value;
+      });
+      provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);
+
+      /**
+       * The status of the search request, taken from the state.
+       */
+      const searchStatus: Ref<RequestStatus> = useState('search', ['status']).status;
+
+      /**
+       * The query of the search request, taken from the state.
+       */
+      const searchQuery: ComputedRef<string> = useState('search', ['query']).query;
+
+      /**
+       * Updates the query to be provided to the child components
+       * when the search request has succeeded.
+       *
+       * @param status - The status of the search request.
+       */
+      const updateQuery = (status: RequestStatus): void => {
+        if (status === 'success') {
+          providedQuery.value = searchQuery.value;
+        }
+      };
+
+      /**
+       * Watches the searchStatus and triggers updateQuery as callback
+       * when it changes.
+       *
+       * @param status - The status of the search request.
+       */
+      watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });
+
+      /**
+       * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.
+       *
+       * @remarks This function is going to be executed when the observer
+       * is fired in {@link infiniteScroll}.
+       *
+       * @internal
+       */
+      const onInfiniteScrollEnd = (): void => {
+        xBus.emit('UserReachedResultsListEnd');
+      };
 
-    /**
-     * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.
-     *
-     * @internal
-     */
-    onInfiniteScrollEnd(): void {
-      this.$x.emit('UserReachedResultsListEnd');
+      return {
+        items,
+        onInfiniteScrollEnd,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/tests/unit/base-grid.spec.ts b/packages/x-components/tests/unit/base-grid.spec.ts
index 4be3e9d590..5d9d155f44 100644
--- a/packages/x-components/tests/unit/base-grid.spec.ts
+++ b/packages/x-components/tests/unit/base-grid.spec.ts
@@ -7,7 +7,6 @@ import { ListItem } from '../../src/utils';
 import { NextQueriesGroup } from '../../src/x-modules/next-queries/types';
 import { e2eAdapter } from '../../src/adapter/e2e-adapter';
 import { XDummyBus } from '../../src/__tests__/bus.dummy';
-import { useXBus } from '../../src/composables/use-x-bus';
 import { loadCss } from './css.utils';
 
 /**
@@ -61,7 +60,7 @@ function renderBaseGrid({
       props: ['items', 'columns'],
       template,
       beforeCreate() {
-        useXBus().on('RenderedColumnsNumberChanged').subscribe(renderedColumnsNumberChangedSpy);
+        XPlugin.bus.on('RenderedColumnsNumberChanged').subscribe(renderedColumnsNumberChangedSpy);
       }
     },
     {