diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 953dbef7ba..68e242cf04 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,33 @@
 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.35](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.34...vue3-migration-test@1.0.0-alpha.35) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [1.0.0-alpha.34](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.33...vue3-migration-test@1.0.0-alpha.34) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [1.0.0-alpha.33](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.32...vue3-migration-test@1.0.0-alpha.33) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
 ## [1.0.0-alpha.32](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.31...vue3-migration-test@1.0.0-alpha.32) (2024-06-18)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 681f02e6dd..042051a216 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.32",
+  "version": "1.0.0-alpha.35",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
new file mode 100644
index 0000000000..a7638946e6
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
@@ -0,0 +1,13 @@
+<template>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+  const snippetConfig = window.InterfaceX?.getSnippetConfig();
+  provide('snippetConfig', snippetConfig);
+  const { params } = useState('extraParams', ['params']);
+  window.InterfaceX?.setSnippetConfig({ store: 'demo', lang: 'es', warehouse: 1234 });
+</script>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 45c4690d74..66a0cf6ff6 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -14,3 +14,4 @@ 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';
+export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index de859ebc69..fe773026db 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,20 +1,22 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
+  createResultStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
+import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
 import {
   facetsXModule,
   nextQueriesXModule,
+  popularSearchesXModule,
   queriesPreviewXModule,
   recommendationsXModule,
   scrollXModule,
@@ -75,7 +77,11 @@ const adapter = {
         promoteds: getPromotedsStub(),
         banners: getBannersStub()
       });
-    })
+    }),
+  identifierResults: () =>
+    new Promise(resolve =>
+      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
+    )
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});
@@ -83,18 +89,24 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, {
-    adapter,
-    store,
-    __PRIVATE__xModules: {
-      facets: facetsXModule,
-      nextQueries: nextQueriesXModule,
-      scroll: scrollXModule,
-      search: searchXModule,
-      queriesPreview: queriesPreviewXModule,
-      semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule,
-      identifierResults: identifierResultsXModule
-    }
-  })
   .mount('#app');
+
+window.initX = {
+  instance: 'empathy',
+  lang: 'en'
+};
+new XInstaller({
+  adapter,
+  store,
+  __PRIVATE__xModules: {
+    facets: facetsXModule,
+    nextQueries: nextQueriesXModule,
+    scroll: scrollXModule,
+    search: searchXModule,
+    queriesPreview: queriesPreviewXModule,
+    semanticQueries: semanticQueriesXModule,
+    recommendations: recommendationsXModule,
+    identifierResults: identifierResultsXModule,
+    popularSearches: popularSearchesXModule
+  }
+}).init();
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 6a9454ec3a..e9a253de77 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -38,8 +38,10 @@ import {
   TestQuerySuggestions,
   TestSemanticQueries,
   TestRecommendations,
+  TestPopularSearches,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestExtraParams
 } from './';
 
 const routes = [
@@ -233,6 +235,11 @@ const routes = [
     name: 'Recommendations',
     component: TestRecommendations
   },
+  {
+    path: '/popular-searches',
+    name: 'PopularSearches',
+    component: TestPopularSearches
+  },
   {
     path: '/next-queries',
     name: 'NextQueries',
@@ -242,6 +249,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/snippet-config-extraparams',
+    name: 'SnippetConfigExtraparams',
+    component: TestExtraParams
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
index 70ba15093a..d801729f7f 100644
--- a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
@@ -1,6 +1,5 @@
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
 import { IdentifierResultsXModule } from '../../../../x-components/src/x-modules/identifier-results/x-module';
-import { createResultStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
 
 export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXModule> = {
   storeModule: {
@@ -11,7 +10,7 @@ export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXM
         identifierDetectionRegexp: '^[0-9]{2,}$',
         separatorChars: '-/ '
       },
-      identifierResults: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)),
+      identifierResults: [],
       origin: null,
       query: 'test',
       params: {},
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index a78483264e..c935daf10c 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -10,4 +10,5 @@ export * from './history-queries';
 export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
+export * from './popular-searches';
 export * from './identifier-results';
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts b/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts
new file mode 100644
index 0000000000..5b975a41d8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts
@@ -0,0 +1,2 @@
+export * from './x-module';
+export { default as TestPopularSearches } from './test-popular-searches.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue b/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue
new file mode 100644
index 0000000000..c00389b39c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue
@@ -0,0 +1,23 @@
+<template>
+  <SearchInput />
+  <ClearSearchInput />
+  <div v-if="!query">
+    <h1>Popular searches</h1>
+    <PopularSearches />
+  </div>
+</template>
+
+<script setup>
+  import PopularSearches from '../../../../x-components/src/x-modules/popular-searches/components/popular-searches.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ClearSearchInput from '../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const { query } = useState('search', ['query']);
+</script>
+
+<style scoped>
+  .x-popular-searches {
+    width: fit-content;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts b/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts
new file mode 100644
index 0000000000..0aeaee7431
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts
@@ -0,0 +1,16 @@
+import { PopularSearchesXModule } from '../../../../x-components/src/x-modules/popular-searches/x-module';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { createPopularSearch } from '../../../../x-components/src/__stubs__/popular-searches-stubs.factory';
+
+export const popularSearchesXModule: PrivateXModuleOptions<PopularSearchesXModule> = {
+  storeModule: {
+    state: {
+      popularSearches: ['patata', 'salchicón', 'pan', 'queso', 'leche', 'galletas'].map(query =>
+        createPopularSearch(query)
+      ),
+      config: {
+        hideSessionQueries: false
+      }
+    }
+  }
+};
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index d0e50dc52e..659ed5a190 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,51 @@
 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.54](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.53...@empathyco/x-components@5.0.0-alpha.54) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [5.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.52...@empathyco/x-components@5.0.0-alpha.53) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [5.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.51...@empathyco/x-components@5.0.0-alpha.52) (2024-06-20)
+
+
+### Features
+
+* migrate `QueryPreviewButton` component to composition API (#1525) ([3eff0c7](https://github.com/empathyco/x/commit/3eff0c7c9479abbebbda59e8cc538af6f55375e1))
+
+
+
+## [5.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.50...@empathyco/x-components@5.0.0-alpha.51) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
+## [5.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.49...@empathyco/x-components@5.0.0-alpha.50) (2024-06-19)
+
+
+### Features
+
+* migrate `facets provider` component to use Composition API (#1523) ([eff7b8d](https://github.com/empathyco/x/commit/eff7b8d92c54aece07061c2d8ce58507a56e7d01))
+
+
+
 ## [5.0.0-alpha.49](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.48...@empathyco/x-components@5.0.0-alpha.49) (2024-06-18)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index b07bdbd3c7..96f4814caf 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.49",
+  "version": "5.0.0-alpha.54",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
index bb3c969a0c..23e2ec1da4 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
@@ -47,7 +47,7 @@ describe('testing plugin alias', () => {
       status: {
         identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
         nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: undefined,
+        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
         recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
         relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
index 5376cdff4c..a226e19003 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
@@ -40,7 +40,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
@@ -48,7 +48,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 5678 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });
diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
index d24dc6301e..4d96cddc97 100644
--- a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State, xComponentMixin, XEmit } from '../../../components';
+  import { defineComponent, PropType, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
@@ -11,40 +11,34 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class ExtraParams extends Vue {
-    /**
-     * Emits the initial extra params, overriding with the state extra params, just in case, those
-     * values were already set by XComponents initialization (url, plugin config, etc.).
-     */
-    created(): void {
-      this.$x.emit('ExtraParamsInitialized', { ...this.values });
-      this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });
-    }
 
-    /**
-     * (Required) A Dictionary where the keys are the extra param names and its values.
-     *
-     * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the
-     * component is rendered or the values changed.
-     *
-     * @public
-     */
-    @XEmit('ExtraParamsProvided', { immediate: false, deep: true })
-    @Prop({ required: true })
-    public values!: Dictionary<unknown>;
+  export default defineComponent({
+    name: 'ExtraParams',
+    xModule: extraParamsXModule.name,
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>,
+        required: true
+      }
+    },
+    setup(props) {
+      const { params } = useState('extraParams', ['params']);
+      const $x = use$x();
 
-    /**
-     * State extra params. Used to override the initial extra params.
-     */
-    @State('extraParams', 'params')
-    public storeExtraParams!: Dictionary<unknown>;
+      $x.emit('ExtraParamsInitialized', { ...props.values });
+      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      watch(
+        () => props.values,
+        values => {
+          $x.emit('ExtraParamsProvided', { ...values });
+        },
+        { deep: true }
+      );
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
index a6e86d798c..b62ed09319 100644
--- a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
@@ -4,87 +4,59 @@
 
 <script lang="ts">
   import { forEach, Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, inject, PropType, ref, watch } from 'vue';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { extraParamsXModule } from '../x-module';
   import ExtraParams from './extra-params.vue';
 
-  /**
-   * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
-   * objects of every x-module.
-   *
-   * @public
-   */
-  @Component({
-    components: { ExtraParams },
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class SnippetConfigExtraParams extends Vue {
-    /**
-     * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig!: SnippetConfig;
-
-    /**
-     * A Dictionary where the keys are the extra param names and its values.
-     *
-     * @public
-     */
-    @Prop()
-    protected values?: Dictionary<unknown>;
-
-    /**
-     * Custom object containing the extra params from the snippet config and the values prop.
-     *
-     * @remarks This object keeps manually the desired snippet config properties to avoid
-     * unnecessary re-renders.
-     *
-     * @returns A dictionary with the extra params.
-     *
-     * @internal
-     */
-    protected extraParams: Dictionary<unknown> = {};
+  export default defineComponent({
+    name: 'SnippetConfigExtraParams',
+    xModule: extraParamsXModule.name,
+    components: {
+      ExtraParams
+    },
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>
+      },
+      excludedExtraParams: {
+        type: Array as PropType<Array<keyof SnippetConfig>>,
+        default: (): Array<keyof SnippetConfig> => [
+          'callbacks',
+          'productId',
+          'uiLang',
+          'consent',
+          'documentDirection',
+          'filters',
+          'isSpa',
+          'queriesPreview'
+        ]
+      }
+    },
+    setup(props) {
+      const snippetConfig = inject('snippetConfig') as SnippetConfig;
+      const extraParams = ref({});
 
-    /**
-     * Updates the extraParams object when the snippet config or the values prop changes.
-     *
-     * @internal
-     */
-    @Watch('snippetConfig', { deep: true, immediate: true })
-    @Watch('values', { deep: true, immediate: true })
-    syncExtraParams(): void {
-      forEach({ ...this.values, ...this.snippetConfig }, (name, value) => {
-        if (!this.excludedExtraParams.includes(name)) {
-          this.$set(this.extraParams, name, value);
+      watch(
+        [() => snippetConfig, () => props.values],
+        () => {
+          forEach({ ...props.values, ...snippetConfig }, (name, value) => {
+            if (!props.excludedExtraParams.includes(name)) {
+              extraParams.value = { ...extraParams.value, [name]: value };
+            }
+          });
+        },
+        {
+          deep: true,
+          immediate: true
         }
-      });
-    }
+      );
 
-    /**
-     * Collection of properties from the snippet config to exclude from the
-     * extra params object.
-     *
-     * @public
-     */
-    @Prop({
-      default: (): Array<keyof SnippetConfig> => [
-        'callbacks',
-        'productId',
-        'uiLang',
-        'consent',
-        'documentDirection',
-        'filters',
-        'isSpa',
-        'queriesPreview'
-      ]
-    })
-    protected excludedExtraParams!: Array<keyof SnippetConfig>;
-  }
+      return {
+        extraParams
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/x-module.ts b/packages/x-components/src/x-modules/extra-params/x-module.ts
index 241efc6bd8..26033bcecc 100644
--- a/packages/x-components/src/x-modules/extra-params/x-module.ts
+++ b/packages/x-components/src/x-modules/extra-params/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { extraParamsEmitters } from './store/emitters';
 import { extraParamsXStoreModule } from './store/module';
 import { ExtraParamsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const extraParamsXModule: ExtraParamsXModule = {
   storeEmitters: extraParamsEmitters,
   wiring: extraParamsWiring
 };
+
+XPlugin.registerXModule(extraParamsXModule);
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
index d34c8811eb..63ab6d9000 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
@@ -1,15 +1,12 @@
 <script lang="ts">
   import { Facet, Filter, isHierarchicalFacet } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { XOn } from '../../../../components';
-  import { xComponentMixin } from '../../../../components/x-component.mixin';
+  import { computed, defineComponent, h, PropType, Ref, ref, watch } from 'vue';
   import { clone } from '../../../../utils';
   import { areFiltersDifferent } from '../../../../utils/filters';
-  import { FacetsGroup } from '../../service/types';
   import { GroupId } from '../../store/types';
   import { flatHierarchicalFilters } from '../../utils';
   import { facetsXModule } from '../../x-module';
+  import { use$x } from '../../../../composables/use-$x';
 
   /**
    * This component allows to provide facets by prop, to add them to the state of the
@@ -19,97 +16,105 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FacetsProvider extends Vue {
-    /**
-     * An facet group identifier to distinguish the provided facets from other facets like the
-     * `Search X-Module` facets.
-     *
-     * @public
-     */
-    @Prop({ default: 'provided-facets' })
-    public groupId!: GroupId;
-
-    /**
-     * The facets to provide to the `Facets X-Module` state. They have to include the
-     * {@link @empathyco/x-types#Filter}.
-     *
-     * @internal
-     */
-    @Prop({ required: true })
-    public facets!: Facet[];
-
-    /**
-     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.
-     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.
-     *
-     * @internal
-     */
-    protected selectedFilters: Filter[] | null = null;
-
-    /**
-     * A computed property to group the facets and the groupId. This is used by the watcher.
-     *
-     * @returns The FacetGroup with the facets and the group id.
-     *
-     * @internal
-     */
-    protected get facetsGroup(): FacetsGroup {
-      return { id: this.groupId, facets: this.facets };
-    }
-
-    /**
-     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes
-     * the selected filters.
-     *
-     * @param selectedFilters - The new list of selected filters.
-     * @internal
-     */
-    @XOn('SelectedFiltersChanged')
-    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {
-      if (
-        this.selectedFilters === null ||
-        areFiltersDifferent(this.selectedFilters, selectedFilters)
-      ) {
-        this.$x.emit('UserChangedSelectedFilters', selectedFilters);
+  export default defineComponent({
+    name: 'FacetsProvider',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * An facet group identifier to distinguish the provided facets from other facets like the
+       * `Search X-Module` facets.
+       *
+       * @public
+       */
+      groupId: {
+        type: String as PropType<GroupId>,
+        default: 'provided-facets'
+      },
+      /**
+       * The facets to provide to the `Facets X-Module` state. They have to include the
+       * {@link @empathyco/x-types#Filter}.
+       *
+       * @internal
+       */
+      facets: {
+        type: Array as PropType<Facet[]>,
+        required: true
       }
-      this.selectedFilters = null;
-    }
+    },
+    setup: function (props) {
+      const $x = use$x();
+
+      /**
+       * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.
+       * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.
+       *
+       * @internal
+       */
+      const selectedFilters: Ref<Filter[] | null> = ref(null);
+
+      /**
+       * A computed property to group the facets and the groupId. This is used by the watcher.
+       *
+       * @returns The FacetGroup with the facets and the group id.
+       *
+       * @internal
+       */
+      const facetsGroup = computed(() => ({ id: props.groupId, facets: props.facets }));
+
+      /**
+       * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes
+       * the selected filters.
+       *
+       * @param selectedFilters - The new list of selected filters.
+       * @internal
+       */
+      $x.on('SelectedFiltersChanged', false).subscribe((selectedFiltersParams: Filter[]) => {
+        if (
+          selectedFilters.value === null ||
+          areFiltersDifferent(selectedFilters.value, selectedFiltersParams)
+        ) {
+          $x.emit('UserChangedSelectedFilters', selectedFiltersParams);
+        }
+        selectedFilters.value = null;
+      });
+
+      /**
+       * Extracts the selected filters from the facets and stores them in the
+       * {@link FacetsProvider.selectedFilters} property.
+       *
+       * @param facets - The facets from whom extract the selected filters.
+       * @internal
+       */
+      const extractSelectedFilters = (facets: Facet[]) => {
+        selectedFilters.value = facets
+          .flatMap(facet =>
+            isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters
+          )
+          .filter(filter => filter.selected);
+      };
 
-    /**
-     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the
-     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected
-     * filters.
-     */
-    @Watch('facetsGroup', { immediate: true })
-    provideFacets(): void {
-      if (this.facetsGroup.facets) {
-        const facetsGroupClone = clone(this.facetsGroup);
-        this.$x.emit('FacetsGroupProvided', facetsGroupClone);
-        this.extractSelectedFilters(this.facets);
-      }
-    }
+      /**
+       * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the
+       * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected
+       * filters.
+       */
+      watch(
+        () => facetsGroup.value,
+        () => {
+          if (facetsGroup.value.facets) {
+            const facetsGroupClone = clone(facetsGroup.value);
+            $x.emit('FacetsGroupProvided', facetsGroupClone);
+            extractSelectedFilters(props.facets);
+          }
+        },
+        { immediate: true }
+      );
 
-    /**
-     * Extracts the selected filters from the facets and stores them in the
-     * {@link FacetsProvider.selectedFilters} property.
-     *
-     * @param facets - The facets from whom extract the selected filters.
-     * @internal
-     */
-    protected extractSelectedFilters(facets: Facet[]): void {
-      this.selectedFilters = facets
-        .flatMap(facet =>
-          isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters
-        )
-        .filter(filter => filter.selected);
+      return () => {
+        return h();
+      };
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
index b92927dc4a..1170ed2a2d 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
@@ -19,10 +19,8 @@
 
 <script lang="ts">
   import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { popularSearchesXModule } from '../x-module';
 
@@ -33,31 +31,35 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearch',
+    xModule: popularSearchesXModule.name,
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearch extends Vue {
-    /**
-     * The suggestion to render and use in the default slot.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: Suggestion;
+    props: {
+      /**
+       * The suggestion to render and use in the default slot.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<Suggestion>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * Events list which are going to be emitted when a popular search is selected.
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserSelectedAPopularSearch: props.suggestion })
+      );
 
-    /**
-     * Events list which are going to be emitted when a popular search is selected.
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return {
-        UserSelectedAPopularSearch: this.suggestion
-      };
+      return { events };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
index 066cf60297..c76a139d4a 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
@@ -32,13 +32,10 @@
 </template>
 
 <script lang="ts">
-  import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { popularSearchesXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import PopularSearch from './popular-search.vue';
 
   /**
@@ -49,20 +46,25 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearches',
+    xModule: popularSearchesXModule.name,
+    components: {
+      PopularSearch,
+      BaseSuggestions
+    },
     inheritAttrs: false,
-    components: { PopularSearch, BaseSuggestions },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearches extends Vue {
-    /**
-     * The list of popular searches.
-     *
-     * @internal
-     */
-    @Getter('popularSearches', 'popularSearches')
-    public popularSearches!: Suggestion[];
-  }
+    setup() {
+      /**
+       * The list of popular searches.
+       *
+       * @internal
+       */
+      const { popularSearches } = useGetter('popularSearches', ['popularSearches']);
+
+      return { popularSearches };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->
diff --git a/packages/x-components/src/x-modules/popular-searches/x-module.ts b/packages/x-components/src/x-modules/popular-searches/x-module.ts
index b7abb3f6ff..7b75d9cb4a 100644
--- a/packages/x-components/src/x-modules/popular-searches/x-module.ts
+++ b/packages/x-components/src/x-modules/popular-searches/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { popularSearchesEmitters } from './store/emitters';
 import { popularSearchesXStoreModule } from './store/module';
 import { PopularSearchesXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const popularSearchesXModule: PopularSearchesXModule = {
   storeEmitters: popularSearchesEmitters,
   wiring: popularSearchesWiring
 };
+
+XPlugin.registerXModule(popularSearchesXModule);
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
index 5a27b1e247..df8e415a37 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
@@ -13,14 +13,12 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { Dictionary } from '@empathyco/x-utils';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent, PropType } from 'vue';
   import { QueryPreviewInfo } from '../store/types';
   import { XEventsTypes } from '../../../wiring/events.types';
-  import { BaseEventButton, xComponentMixin } from '../../../components';
+  import { BaseEventButton } from '../../../components';
   import { queriesPreviewXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * Component containing an event button that emits
@@ -31,55 +29,61 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'QueryPreviewButton',
+    xModule: queriesPreviewXModule.name,
     components: { BaseEventButton },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreviewButton extends Vue {
-    /**
-     * The information about the request of the query preview.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected queryPreviewInfo!: QueryPreviewInfo;
-
-    /**
-     * We use the module extra params to combine them with the query preview's extra params.
-     */
-    @State('queriesPreview', 'params')
-    public params!: Dictionary<unknown>;
-
-    /**
-     * The provided query preview with the base extra params from the module merged in.
-     *
-     * @returns The query preview info with the base extra params merged in.
-     * @public
-     */
-    protected get fullQueryPreviewInfo(): QueryPreviewInfo {
-      return {
-        ...this.queryPreviewInfo,
-        extraParams: {
-          ...this.params,
-          ...this.queryPreviewInfo.extraParams
-        },
-        filters: this.queryPreviewInfo.filters
-      };
-    }
+    props: {
+      /**
+       * The information about the request of the query preview.
+       *
+       * @public
+       */
+      queryPreviewInfo: {
+        type: Object as PropType<QueryPreviewInfo>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * We use the module extra params to combine them with the query preview's extra params.
+       */
+      const { params } = useState('queriesPreview', ['params']);
+
+      /**
+       * The provided query preview with the base extra params from the module merged in.
+       *
+       * @returns The query preview info with the base extra params merged in.
+       * @public
+       */
+      const fullQueryPreviewInfo = computed(
+        (): QueryPreviewInfo => ({
+          ...props.queryPreviewInfo,
+          extraParams: {
+            ...params.value,
+            ...props.queryPreviewInfo.extraParams
+          },
+          filters: props.queryPreviewInfo.filters
+        })
+      );
+
+      /**
+       * List of events to emit by the BaseEventButton.
+       *
+       * @returns An object with the event and payload.
+       *
+       * @internal
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value })
+      );
 
-    /**
-     * List of events to emit by the BaseEventButton.
-     *
-     * @returns An object with the event and payload.
-     *
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
       return {
-        UserAcceptedAQueryPreview: this.fullQueryPreviewInfo
+        fullQueryPreviewInfo,
+        events
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">