diff --git a/package-lock.json b/package-lock.json
index 40ba0c1cb..32fcf804a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
+        "pinia": "^2.2.4",
         "velocity-animate": "^1.5.2",
         "vue": "^2.7.16",
         "vue-apexcharts": "^1.6.2",
@@ -34,8 +35,7 @@
         "vue-router": "^3.6.5",
         "vue2-leaflet": "^2.7.1",
         "vuedraggable": "^2.24.3",
-        "vuejs-logger": "1.5.5",
-        "vuex": "^3.6.2"
+        "vuejs-logger": "1.5.5"
       },
       "devDependencies": {
         "@types/leaflet": "^1.9.12",
@@ -3700,6 +3700,12 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
@@ -15668,6 +15674,58 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pino": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/pino/-/pino-6.14.0.tgz",
@@ -18542,7 +18600,7 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -19218,15 +19276,6 @@
       "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
       "license": "MIT"
     },
-    "node_modules/vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^2.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/package.json b/package.json
index 124c2b782..d76d380a0 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "pinia": "^2.2.4",
     "velocity-animate": "^1.5.2",
     "vue": "^2.7.16",
     "vue-apexcharts": "^1.6.2",
@@ -41,8 +42,7 @@
     "vue-router": "^3.6.5",
     "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",
-    "vuejs-logger": "1.5.5",
-    "vuex": "^3.6.2"
+    "vuejs-logger": "1.5.5"
   },
   "engines": {
     "node": ">= 20.0.0",
diff --git a/src/components/ApiAction.vue b/src/components/ApiAction.vue
index e308ce9fe..024e11570 100644
--- a/src/components/ApiAction.vue
+++ b/src/components/ApiAction.vue
@@ -73,9 +73,10 @@
 
 <script>
 import _ from 'lodash';
+import { mapState } from 'pinia';
 import { Multipane, MultipaneResizer } from 'vue-multipane';
-import { mapGetters } from 'vuex';
 
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import QueryCard from '@/components/ApiAction/QueryCard.vue';
@@ -103,8 +104,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'currentEnvironment']),
-    ...mapGetters('auth', ['canGetPublicApi', 'canGetOpenApi']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'currentEnvironment']),
+    ...mapState(useAuthStore, ['canGetPublicApi', 'canGetOpenApi']),
     emptyTab() {
       return {
         query: {
diff --git a/src/components/Common/Breadcrumb.vue b/src/components/Common/Breadcrumb.vue
index 7366c5c77..b9dce2acf 100644
--- a/src/components/Common/Breadcrumb.vue
+++ b/src/components/Common/Breadcrumb.vue
@@ -98,16 +98,19 @@
 </template>
 
 <script>
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 
 export default {
   name: 'CommonBreadcrumb',
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   methods: {
     index() {
       return this.$route.params.indexName
-        ? this.$store.getters[`${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`](
-            this.$route.params.indexName,
-          )
+        ? this.storageIndexStore.getOneIndex(this.$route.params.indexName)
         : undefined;
     },
     isCollectionRealtime() {
@@ -115,9 +118,8 @@ export default {
         return false;
       }
 
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-      ](this.index, this.$route.params.collectionName).isRealtime;
+      return this.storageIndexStore.getOneCollection(this.index, this.$route.params.collectionName)
+        .isRealtime;
     },
     isRouteActive(routeName) {
       if (Array.isArray(routeName)) {
diff --git a/src/components/Common/CommonList.vue b/src/components/Common/CommonList.vue
index fbc58e40d..51065040b 100644
--- a/src/components/Common/CommonList.vue
+++ b/src/components/Common/CommonList.vue
@@ -53,7 +53,7 @@ import ProfileItem from '../Security/Profiles/ProfileItem.vue';
 import RoleItem from '../Security/Roles/RoleItem.vue';
 import UserItem from '../Security/Users/UserItem.vue';
 import * as filterManager from '@/services/filterManager';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import CrudlDocument from './CrudlDocument.vue';
 
@@ -83,7 +83,11 @@ export default {
       required: true,
     },
   },
-
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       searchFilterOperands: filterManager.searchFilterOperands,
@@ -162,9 +166,9 @@ export default {
         filterManager.save(newFilters, this.$router, this.index, this.collection);
         filterManager.addNewHistoryItemAndSave(newFilters, this.index, this.collection);
       } catch (error) {
-        this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+        this.toasterStore.toast = {
           text: 'An error occurred while updating filters: <br />' + error.message,
-        });
+        };
       }
     },
     fetchDocuments() {
@@ -196,9 +200,9 @@ export default {
           this.totalDocuments = res.total;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: 'An error occurred while performing search: <br />' + e.message,
-          });
+          };
         });
     },
     editDocument(route, id) {
diff --git a/src/components/Common/CrudlDocument.vue b/src/components/Common/CrudlDocument.vue
index 88355ecc7..fefc3a7ce 100644
--- a/src/components/Common/CrudlDocument.vue
+++ b/src/components/Common/CrudlDocument.vue
@@ -129,7 +129,7 @@
 <script>
 import Modal from '../Materialize/Modal.vue';
 import Pagination from '../Materialize/Pagination.vue';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import Filters from './Filters/Filters.vue';
 
@@ -140,7 +140,6 @@ export default {
     Modal,
     Filters,
   },
-
   props: {
     index: String,
     collection: String,
@@ -169,6 +168,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       documentIdToDelete: '',
@@ -204,9 +208,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     confirmSingleDelete(id) {
@@ -217,9 +221,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     onFiltersUpdated(newFilters) {
diff --git a/src/components/Common/Environments/CreateEnvironment.vue b/src/components/Common/Environments/CreateEnvironment.vue
index 45462dfec..57f6782ee 100644
--- a/src/components/Common/Environments/CreateEnvironment.vue
+++ b/src/components/Common/Environments/CreateEnvironment.vue
@@ -126,7 +126,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { numeric, required, helpers } from '@vuelidate/validators';
 
-import { KKuzzleActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 import { DEFAULT_COLOR, ENV_COLORS, NO_ADMIN_WARNING_HOSTS } from '@/utils';
 import { isValidHostname, notIncludeScheme } from '@/validators';
 
@@ -153,7 +153,10 @@ export default {
   components: {},
   props: ['environmentId'],
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      kuzzleStore: useKuzzleStore(),
+    };
   },
   data() {
     return {
@@ -214,7 +217,7 @@ export default {
       return ENV_COLORS;
     },
     environments() {
-      return this.$store.state.kuzzle.environments;
+      return this.kuzzleStore.environments;
     },
     useHttps() {
       return useHttps;
@@ -317,37 +320,31 @@ export default {
       this.submitting = true;
       try {
         if (this.environmentId) {
-          return this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.UPDATE_ENVIRONMENT}`,
-            {
-              id: this.environmentId,
-              environment: {
-                name: this.environment.name,
-                color: this.environment.color,
-                host: this.environment.host,
-                port: parseInt(this.environment.port),
-                ssl: this.environment.ssl,
-                backendMajorVersion: this.environment.backendMajorVersion,
-                hideAdminWarning: this.environment.hideAdminWarning,
-              },
+          return this.kuzzleStore.updateEnvironment({
+            id: this.environmentId,
+            environment: {
+              name: this.environment.name,
+              color: this.environment.color,
+              host: this.environment.host,
+              port: parseInt(this.environment.port),
+              ssl: this.environment.ssl,
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: this.environment.hideAdminWarning,
             },
-          );
+          });
         } else {
-          return this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.CREATE_ENVIRONMENT}`,
-            {
-              id: this.environment.name,
-              environment: {
-                name: this.environment.name,
-                color: this.environment.color,
-                host: this.environment.host,
-                port: parseInt(this.environment.port),
-                ssl: this.environment.ssl,
-                backendMajorVersion: this.environment.backendMajorVersion,
-                hideAdminWarning: !!NO_ADMIN_WARNING_HOSTS.includes(this.environment.host),
-              },
+          return this.kuzzleStore.createEnvironment({
+            id: this.environment.name,
+            environment: {
+              name: this.environment.name,
+              color: this.environment.color,
+              host: this.environment.host,
+              port: parseInt(this.environment.port),
+              ssl: this.environment.ssl,
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: !!NO_ADMIN_WARNING_HOSTS.includes(this.environment.host),
             },
-          );
+          });
         }
       } catch (error) {
         this.$log.error(error.message);
diff --git a/src/components/Common/Environments/CreateEnvironmentPage.vue b/src/components/Common/Environments/CreateEnvironmentPage.vue
index a6533e584..8ccff3f77 100644
--- a/src/components/Common/Environments/CreateEnvironmentPage.vue
+++ b/src/components/Common/Environments/CreateEnvironmentPage.vue
@@ -51,9 +51,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KKuzzleActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 
 import CreateEnvironment from './CreateEnvironment.vue';
 
@@ -62,8 +62,13 @@ export default {
   components: {
     CreateEnvironment,
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   computed: {
-    ...mapGetters('kuzzle', ['hasEnvironment', 'environments']),
+    ...mapState(useKuzzleStore, ['hasEnvironment', 'environments']),
   },
   methods: {
     async submit() {
@@ -75,10 +80,7 @@ export default {
       if (Object.keys(this.environments).length > 1) {
         this.$router.push({ name: 'SelectEnvironment' });
       } else {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT}`,
-          id,
-        );
+        await this.kuzzleStore.setCurrentEnvironment(id);
         this.$router.push('/');
       }
     },
diff --git a/src/components/Common/Environments/EnvironmentsSwitch.vue b/src/components/Common/Environments/EnvironmentsSwitch.vue
index e086f4b4e..3d44c2c15 100644
--- a/src/components/Common/Environments/EnvironmentsSwitch.vue
+++ b/src/components/Common/Environments/EnvironmentsSwitch.vue
@@ -58,9 +58,9 @@
 
 <script>
 import { mapValues, omit } from 'lodash';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KKuzzleActionsTypes, KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 import { formatForDom, sortObject } from '@/utils';
 import { isValidEnvironment } from '@/validators';
 
@@ -80,12 +80,15 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   computed: {
-    ...mapGetters('kuzzle', ['currentEnvironment']),
+    ...mapState(useKuzzleStore, ['currentEnvironment']),
     exportUrl() {
-      const envWitoutToken = mapValues(this.$store.state.kuzzle.environments, (e) =>
-        omit(e, 'token'),
-      );
+      const envWitoutToken = mapValues(this.kuzzleStore.environments, (e) => omit(e, 'token'));
 
       const blob = new Blob([JSON.stringify(envWitoutToken)], {
         type: 'application/json',
@@ -94,27 +97,19 @@ export default {
       return URL.createObjectURL(blob);
     },
     environments() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.ENVIRONMENTS}`
-      ];
+      return this.kuzzleStore.environments;
     },
   },
   methods: {
     isValidEnvironment,
     async switchEnv(id) {
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT}`,
-          id,
-        );
+        await this.kuzzleStore.setCurrentEnvironment(id);
         this.$emit('environmentSwitched');
       } catch (error) {
         this.$log.error(error);
         if (error.code) {
-          await this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.ON_CONNECTION_ERROR}`,
-            error,
-          );
+          await this.kuzzleStore.onConnectionError(error);
         }
       }
     },
diff --git a/src/components/Common/Environments/ModalDelete.vue b/src/components/Common/Environments/ModalDelete.vue
index 5ffa379fc..6d8b679fb 100644
--- a/src/components/Common/Environments/ModalDelete.vue
+++ b/src/components/Common/Environments/ModalDelete.vue
@@ -38,12 +38,7 @@
 
 <script>
 import Focus from '@/directives/focus.directive';
-import {
-  KAuthActionsTypes,
-  KKuzzleActionsTypes,
-  KKuzzleGettersTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 export default {
   name: 'EnvironmentDeleteModal',
@@ -52,6 +47,12 @@ export default {
   },
   components: {},
   props: ['environmentId', 'id'],
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       envConfirmation: null,
@@ -59,7 +60,7 @@ export default {
   },
   computed: {
     environments() {
-      return this.$store.state.kuzzle.environments;
+      return this.kuzzleStore.environments;
     },
     confirmationOk() {
       return this.environmentName !== null && this.environmentName === this.envConfirmation;
@@ -77,23 +78,13 @@ export default {
     },
     async confirmDeleteEnvironment() {
       if (this.confirmationOk) {
-        if (
-          this.$store.state.kuzzle.currentId === this.environmentId &&
-          this.$store.state.kuzzle.online
-        ) {
-          await this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.DO_LOGOUT}`);
+        if (this.kuzzleStore.currentId === this.environmentId && this.kuzzleStore.online) {
+          await this.authStore.doLogout();
         }
 
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.DELETE_ENVIRONMENT}`,
-          this.environmentId,
-        );
+        this.kuzzleStore.deleteEnvironment(this.environmentId);
 
-        if (
-          this.$store.getters[
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.HAS_ENVIRONMENT}`
-          ]
-        ) {
+        if (this.kuzzleStore.hasEnvironment) {
           this.$router.push({ name: 'SelectEnvironment' });
         } else {
           this.$router.push({ name: 'CreateEnvironment' });
diff --git a/src/components/Common/Environments/ModalImport.vue b/src/components/Common/Environments/ModalImport.vue
index 27f2b15ed..304ab8109 100644
--- a/src/components/Common/Environments/ModalImport.vue
+++ b/src/components/Common/Environments/ModalImport.vue
@@ -53,12 +53,17 @@
 </template>
 
 <script>
-import { KKuzzleActionsTypes, KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'ModalImport',
   components: {},
   props: ['id'],
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       file: null,
@@ -92,18 +97,15 @@ export default {
     },
     async importEnv() {
       let mustSwitch = false;
-      if (Object.keys(this.$store.state.kuzzle.environments).length === 0) {
+      if (Object.keys(this.kuzzleStore.environments).length === 0) {
         mustSwitch = true;
       }
       for (const name in this.env) {
         try {
-          this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.CREATE_ENVIRONMENT}`,
-            {
-              id: name,
-              environment: this.env[name],
-            },
-          );
+          this.kuzzleStore.createEnvironment({
+            id: name,
+            environment: this.env[name],
+          });
         } catch (e) {
           this.$log.error(e);
           this.errors.push(e);
@@ -111,12 +113,8 @@ export default {
       }
       if (!this.errors.length) {
         this.$log.debug(`Finished import must switch: ${mustSwitch}, env:`);
-        this.$log.debug(this.$store.state.kuzzle.environments);
-        if (
-          !this.$store.getters[
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-          ]
-        ) {
+        this.$log.debug(this.kuzzleStore.environments);
+        if (!this.kuzzleStore.currentEnvironment) {
           this.$router.push({ name: 'SelectEnvironment' });
         }
         this.$bvModal.hide(this.id);
diff --git a/src/components/Common/Filters/BasicFilter.vue b/src/components/Common/Filters/BasicFilter.vue
index 836b8a6df..272a51db8 100644
--- a/src/components/Common/Filters/BasicFilter.vue
+++ b/src/components/Common/Filters/BasicFilter.vue
@@ -197,7 +197,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useKuzzleStore } from '@/stores';
 
 const emptyBasicFilter = { attribute: null, operator: 'contains', value: null };
 const emptySorting = { attribute: null, order: 'asc' };
@@ -241,7 +243,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     selectAttributesValues() {
       return [
         { text: '_id', value: '_id' },
diff --git a/src/components/Common/Filters/FavoriteFilterItem.vue b/src/components/Common/Filters/FavoriteFilterItem.vue
index 538a1f059..8b519eb37 100644
--- a/src/components/Common/Filters/FavoriteFilterItem.vue
+++ b/src/components/Common/Filters/FavoriteFilterItem.vue
@@ -53,9 +53,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import * as filterManager from '@/services/filterManager';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'FavoriteFilterItem',
@@ -72,7 +73,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
   },
   methods: {
     cancelChange() {
diff --git a/src/components/Common/Filters/FilterHistoryItem.vue b/src/components/Common/Filters/FilterHistoryItem.vue
index 74488b0db..fdd8baa18 100644
--- a/src/components/Common/Filters/FilterHistoryItem.vue
+++ b/src/components/Common/Filters/FilterHistoryItem.vue
@@ -67,9 +67,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import * as filterManager from '@/services/filterManager';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'FilterHistoryItem',
@@ -87,7 +88,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
   },
   methods: {
     isFavorite() {
diff --git a/src/components/Common/Filters/RawFilter.vue b/src/components/Common/Filters/RawFilter.vue
index 4274ffd8b..a3bfb97d7 100644
--- a/src/components/Common/Filters/RawFilter.vue
+++ b/src/components/Common/Filters/RawFilter.vue
@@ -36,7 +36,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useKuzzleStore } from '@/stores';
 
 import JsonEditor from '@/components/Common/JsonEditor.vue';
 
@@ -68,6 +70,11 @@ export default {
       },
     },
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       rawFilter: `{
@@ -78,7 +85,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     filterState() {
       try {
         return JSON.parse(this.rawFilter);
diff --git a/src/components/Common/Login/Form.vue b/src/components/Common/Login/Form.vue
index be9393980..f4a6d1d1d 100644
--- a/src/components/Common/Login/Form.vue
+++ b/src/components/Common/Login/Form.vue
@@ -44,10 +44,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Focus from '@/directives/focus.directive';
-import { KAuthActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 export default {
   name: 'LoginForm',
@@ -57,6 +57,11 @@ export default {
   props: {
     onLogin: { type: Function, default: () => {} },
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+    };
+  },
   data() {
     return {
       username: null,
@@ -65,7 +70,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
   },
   methods: {
     dismissError() {
@@ -74,10 +79,11 @@ export default {
     async login() {
       this.error = '';
       try {
-        await this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.DO_LOGIN}`, {
+        await this.authStore.doLogin({
           username: this.username,
           password: this.password,
         });
+
         this.onLogin(); // TODO change this to $emit
       } catch (err) {
         if (
@@ -102,10 +108,7 @@ export default {
       this.error = '';
       this.$kuzzle.jwt = null;
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.SET_SESSION}`,
-          'anonymous',
-        );
+        await this.authStore.setSession('anonymous');
         await this.onLogin();
       } catch (error) {
         this.error = error.message;
diff --git a/src/components/Common/Login/ResetPasswordForm.vue b/src/components/Common/Login/ResetPasswordForm.vue
index 8213282ec..c24756440 100644
--- a/src/components/Common/Login/ResetPasswordForm.vue
+++ b/src/components/Common/Login/ResetPasswordForm.vue
@@ -69,7 +69,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { sameAs, required, helpers } from '@vuelidate/validators';
 
-import { KAuthActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'ResetPasswordForm',
@@ -77,7 +77,10 @@ export default {
     resetToken: String,
   },
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      authStore: useAuthStore(),
+    };
   },
   data() {
     return {
@@ -127,13 +130,10 @@ export default {
       this.error = '';
 
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.DO_RESET_PASSWORD}`,
-          {
-            password: this.password,
-            token: this.resetToken,
-          },
-        );
+        await this.authStore.doResetPassword({
+          password: this.password,
+          token: this.resetToken,
+        });
 
         this.$emit('reset-password::after');
       } catch (error) {
diff --git a/src/components/Common/MainMenu.vue b/src/components/Common/MainMenu.vue
index 35a19b6b9..8ffb94301 100644
--- a/src/components/Common/MainMenu.vue
+++ b/src/components/Common/MainMenu.vue
@@ -78,9 +78,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KAuthActionsTypes, KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import EnvironmentSwitch from './Environments/EnvironmentsSwitch.vue';
 
@@ -89,6 +89,12 @@ export default {
   components: {
     EnvironmentSwitch,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       feedbackOptions: [
@@ -111,11 +117,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['hasSecurityRights', 'user']),
+    ...mapState(useAuthStore, ['hasSecurityRights', 'user']),
     currentEnvironmentColor() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-      ].color;
+      return this.kuzzleStore.currentEnvironment?.color;
     },
     currentUserName() {
       if (!this.user) {
@@ -139,7 +143,7 @@ export default {
   methods: {
     async doLogout() {
       try {
-        await this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.DO_LOGOUT}`);
+        await this.authStore.doLogout();
       } catch (error) {
         this.$log.error(error);
       } finally {
diff --git a/src/components/Common/Offline.vue b/src/components/Common/Offline.vue
index 70ee9c02b..8dbed72a3 100644
--- a/src/components/Common/Offline.vue
+++ b/src/components/Common/Offline.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 
 import EnvironmentSwitch from './Environments/EnvironmentsSwitch.vue';
 
@@ -46,11 +46,14 @@ export default {
   components: {
     EnvironmentSwitch,
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   computed: {
     currentEnvironment() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-      ];
+      return this.kuzzleStore.currentEnvironment;
     },
     host() {
       return this.currentEnvironment ? this.currentEnvironment.host : '';
@@ -59,7 +62,7 @@ export default {
       return this.currentEnvironment ? this.currentEnvironment.port : '';
     },
     errorInternalMessage() {
-      return this.$store.state.kuzzle.errorFromKuzzle;
+      return this.kuzzleStore.errorFromKuzzle;
     },
   },
   methods: {
diff --git a/src/components/ConnectionAwareContainer.vue b/src/components/ConnectionAwareContainer.vue
index b7858499f..eb904f00b 100644
--- a/src/components/ConnectionAwareContainer.vue
+++ b/src/components/ConnectionAwareContainer.vue
@@ -41,17 +41,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import { antiGlitchOverlayTimeout } from '../utils';
-import {
-  KAuthActionsTypes,
-  KAuthGettersTypes,
-  KAuthMutationsTypes,
-  KKuzzleActionsTypes,
-  KKuzzleMutationsTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import OfflineSpinner from './Common/Offline.vue';
 import ErrorPage from './Error/KuzzleErrorPage.vue';
@@ -62,24 +55,30 @@ export default {
     OfflineSpinner,
     ErrorPage,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       showOfflineSpinner: false,
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'currentEnvironment']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'currentEnvironment']),
     currentEnvironmentId() {
-      return this.$store.state.kuzzle.currentId;
+      return this.kuzzleStore.currentId;
     },
     kuzzleError() {
-      return this.$store.state.kuzzle.errorFromKuzzle;
+      return this.kuzzleStore.errorFromKuzzle;
     },
     online() {
-      return this.$store.state.kuzzle.online;
+      return this.kuzzleStore.online;
     },
     connecting() {
-      return this.$store.state.kuzzle.connecting;
+      return this.kuzzleStore.connecting;
     },
   },
   watch: {
@@ -137,48 +136,32 @@ export default {
         this.$log.error(`ConnectionAwareContainer:kuzzle.on('networkError'): ${error.message}`);
       });
       this.$kuzzle.addListener('connected', async () => {
-        this.$store.commit(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleMutationsTypes.SET_CONNECTING}`,
-          false,
-        );
-        this.$store.commit(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleMutationsTypes.SET_ONLINE}`,
-          true,
-        );
+        this.kuzzleStore.connecting = false;
+        this.kuzzleStore.online = true;
+
         this.$log.debug('ConnectionAwareContainer::initializing auth upon connection...');
         try {
-          await this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.INIT}`);
+          await this.authStore.init();
         } catch (error) {
           this.$log.error(
             `ConnectionAwareContainer:initializing auth: "${error.message}" - code: ${error.code} - id: ${error.id}`,
           );
           if (error.id === 'api.process.incompatible_sdk_version') {
-            return this.$store.dispatch(
-              `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.ON_CONNECTION_ERROR}`,
-              error,
-            );
+            return this.kuzzleStore.onConnectionError(error);
           }
         }
         this.authenticationGuard();
       });
       this.$kuzzle.addListener('reconnected', () => {
-        this.$store.commit(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleMutationsTypes.SET_CONNECTING}`,
-          false,
-        );
-        this.$store.commit(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleMutationsTypes.SET_ONLINE}`,
-          true,
-        );
+        this.kuzzleStore.connecting = false;
+        this.kuzzleStore.online = true;
+
         this.$log.debug('ConnectionAwareContainer::checking token after reconnection...');
-        this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.CHECK_TOKEN}`);
+        this.authStore.checkToken();
       });
       this.$kuzzle.addListener('disconnected', () => {
         this.$log.debug('ConnectionAwareContainer::backend went offline...');
-        this.$store.commit(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleMutationsTypes.SET_ONLINE}`,
-          false,
-        );
+        this.kuzzleStore.online = false;
       });
     },
     removeListeners() {
@@ -204,17 +187,13 @@ export default {
     },
     async onEnvironmentSwitch() {
       this.$log.debug('ConnectionAwareContainer::environmentSwitched');
-      this.$store.commit(
-        `${StoreNamespaceTypes.AUTH}/${KAuthMutationsTypes.SET_TOKEN_VALID}`,
-        false,
-      );
+      this.authStore.tokenValid = false;
+
       this.updatePageTitle();
       this.removeListeners();
       this.initListeners();
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.CONNECT_TO_CURRENT_ENVIRONMENT}`,
-        );
+        await this.kuzzleStore.connectToCurrentEnvironment();
       } catch (error) {
         this.$log.error(`ConnectionAwareContainer:onEnvironmentSwitch: ${error.message}`);
       }
@@ -226,7 +205,7 @@ export default {
       }
       if (
         this.$route.matched.some((record) => record.meta.requiresAuth) &&
-        !this.$store.getters[`${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.IS_AUTHENTICATED}`]
+        !this.authStore.isAuthenticated
       ) {
         this.$log.debug('ConnectionAwareContainer::not authenticated');
         this.$router.push({ name: 'Login', query: { to: this.$route.name } });
diff --git a/src/components/Data/Collections/BulkDeleteCollectionsModal.vue b/src/components/Data/Collections/BulkDeleteCollectionsModal.vue
index 78b9792b4..26ac583e6 100644
--- a/src/components/Data/Collections/BulkDeleteCollectionsModal.vue
+++ b/src/components/Data/Collections/BulkDeleteCollectionsModal.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { KIndexActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 
 const BULK_DELETE_CONFIRMATION = 'DELETE';
 
@@ -55,6 +55,11 @@ export default {
       required: false,
     },
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       error: '',
@@ -88,13 +93,10 @@ export default {
       }
 
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.BULK_DELETE_COLLECTIONS}`,
-          {
-            index: this.index,
-            collections: this.collections,
-          },
-        );
+        await this.storageIndexStore.bulkDeleteCollections({
+          index: this.index,
+          collections: this.collections,
+        });
 
         this.onDeleteSuccess();
       } catch (err) {
diff --git a/src/components/Data/Collections/CollectionList.vue b/src/components/Data/Collections/CollectionList.vue
index cad214d23..2b06f763c 100644
--- a/src/components/Data/Collections/CollectionList.vue
+++ b/src/components/Data/Collections/CollectionList.vue
@@ -231,18 +231,13 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import ListNotAllowed from '../../Common/ListNotAllowed.vue';
 import Headline from '../../Materialize/Headline.vue';
 import DeleteIndexModal from '../Indexes/DeleteIndexModal.vue';
 import IndexDropdownAction from '../Indexes/DropdownActions.vue';
-import {
-  KIndexActionsTypes,
-  KIndexGettersTypes,
-  KKuzzleGettersTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore, useStorageIndexStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import BulkDeleteCollectionsModal from './BulkDeleteCollectionsModal.vue';
@@ -261,6 +256,12 @@ export default {
   props: {
     indexName: String,
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       deleteCollectionModalId: 'deleteCollectionModal',
@@ -274,12 +275,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['canSearchCollection', 'canCreateCollection', 'canEditCollection']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['canSearchCollection', 'canCreateCollection', 'canEditCollection']),
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collections() {
       return this.index ? this.index.collections : [];
@@ -322,9 +321,7 @@ export default {
       return `delete-index-${this.indexName}`;
     },
     currentEnvironment() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-      ];
+      return this.kuzzleStore.currentEnvironment;
     },
   },
   async created() {
@@ -338,10 +335,7 @@ export default {
     },
     async onDeleteIndexConfirm() {
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.DELETE_INDEX}`,
-          this.index,
-        );
+        await this.storageIndexStore.deleteIndex(this.index);
         this.$bvModal.hide(this.deleteIndexModalId);
         this.$router.push({ name: 'Indexes', params: {} });
       } catch (err) {
diff --git a/src/components/Data/Collections/Create.vue b/src/components/Data/Collections/Create.vue
index 9469ccdc2..e76fd157c 100644
--- a/src/components/Data/Collections/Create.vue
+++ b/src/components/Data/Collections/Create.vue
@@ -12,10 +12,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import PageNotAllowed from '../../Common/PageNotAllowed.vue';
-import { KIndexActionsTypes, KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useStorageIndexStore } from '@/stores';
 
 import CreateOrUpdate from './CreateOrUpdate.vue';
 
@@ -28,28 +28,28 @@ export default {
   props: {
     indexName: String,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   computed: {
-    ...mapGetters('auth', ['canCreateCollection']),
+    ...mapState(useAuthStore, ['canCreateCollection']),
     hasRights() {
       return this.canCreateCollection(this.index.name);
     },
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
   },
   methods: {
     async create(payload) {
       try {
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.CREATE_COLLECTION}`,
-          {
-            index: this.index,
-            name: payload.name,
-            mapping: payload.mapping,
-          },
-        );
+        await this.storageIndexStore.createCollection({
+          index: this.index,
+          name: payload.name,
+          mapping: payload.mapping,
+        });
 
         this.$router.push({
           name: 'Collections',
diff --git a/src/components/Data/Collections/CreateOrUpdate.vue b/src/components/Data/Collections/CreateOrUpdate.vue
index bf0f5a5bd..92d7b03b8 100644
--- a/src/components/Data/Collections/CreateOrUpdate.vue
+++ b/src/components/Data/Collections/CreateOrUpdate.vue
@@ -118,11 +118,12 @@
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredUnless } from '@vuelidate/validators';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import JsonEditor from '../../Common/JsonEditor.vue';
 import Headline from '../../Materialize/Headline.vue';
 import Focus from '@/directives/focus.directive';
+import { useKuzzleStore } from '@/stores';
 
 function isValidCollectionName(value) {
   const containsDisallowed = /\\\\|\/|\*|\?|"|<|>|\||\s|,|#|:|%|&|\./.test(value);
@@ -153,7 +154,9 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+    };
   },
   data() {
     return {
@@ -180,7 +183,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['currentEnvironment']),
+    ...mapState(useKuzzleStore, ['currentEnvironment']),
     indexName() {
       return this.$route.params.indexName;
     },
diff --git a/src/components/Data/Collections/DeleteCollectionModal.vue b/src/components/Data/Collections/DeleteCollectionModal.vue
index 7e6d62c4e..482e9f029 100644
--- a/src/components/Data/Collections/DeleteCollectionModal.vue
+++ b/src/components/Data/Collections/DeleteCollectionModal.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { KIndexActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 export default {
@@ -57,6 +57,11 @@ export default {
       required: false,
     },
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       error: '',
@@ -91,13 +96,10 @@ export default {
       }
 
       try {
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.DELETE_COLLECTION}`,
-          {
-            index: this.index,
-            collection: this.collection,
-          },
-        );
+        this.storageIndexStore.deleteCollection({
+          index: this.index,
+          collection: this.collection,
+        });
 
         this.onDeleteSuccess();
       } catch (err) {
diff --git a/src/components/Data/Collections/DropdownAction.vue b/src/components/Data/Collections/DropdownAction.vue
index 4537b69b1..0d6d038ce 100644
--- a/src/components/Data/Collections/DropdownAction.vue
+++ b/src/components/Data/Collections/DropdownAction.vue
@@ -67,9 +67,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import ModalClear from './ModalClear.vue';
 
@@ -88,17 +88,20 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data: function () {
     return {
       deleteConfirmation: '',
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditCollection', 'canTruncateCollection']),
+    ...mapState(useAuthStore, ['canEditCollection', 'canTruncateCollection']),
     backendMajorVersion() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-      ].backendMajorVersion;
+      return this.kuzzleStore.currentEnvironment?.backendMajorVersion;
     },
   },
   methods: {
diff --git a/src/components/Data/Collections/DropdownView.vue b/src/components/Data/Collections/DropdownView.vue
index 0e0ab62a3..8008c280f 100644
--- a/src/components/Data/Collections/DropdownView.vue
+++ b/src/components/Data/Collections/DropdownView.vue
@@ -63,7 +63,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'CollectionDropdownView',
@@ -75,7 +77,7 @@ export default {
     index: String,
   },
   computed: {
-    ...mapGetters('auth', ['canSubscribe']),
+    ...mapState(useAuthStore, ['canSubscribe']),
     mappingHasIntegerField() {
       return (
         Object.keys(this.mappingAttributes).filter(
diff --git a/src/components/Data/Collections/ModalClear.vue b/src/components/Data/Collections/ModalClear.vue
index 47f369fe2..81099980f 100644
--- a/src/components/Data/Collections/ModalClear.vue
+++ b/src/components/Data/Collections/ModalClear.vue
@@ -34,9 +34,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Focus from '@/directives/focus.directive';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'ClearCollectionModal',
@@ -54,7 +55,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
     confirmationOk() {
       return this.collection !== null && this.collection === this.confirmation;
     },
diff --git a/src/components/Data/Collections/Tabs.vue b/src/components/Data/Collections/Tabs.vue
index d741a4983..37b7bcbeb 100644
--- a/src/components/Data/Collections/Tabs.vue
+++ b/src/components/Data/Collections/Tabs.vue
@@ -54,12 +54,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'CollectionTabs',
   computed: {
-    ...mapGetters('auth', ['canCreateDocument', 'canSubscribe']),
+    ...mapState(useAuthStore, ['canCreateDocument', 'canSubscribe']),
   },
   methods: {
     isRouteActive(routeName) {
diff --git a/src/components/Data/Collections/Update.vue b/src/components/Data/Collections/Update.vue
index 65b8e089a..7fd951580 100644
--- a/src/components/Data/Collections/Update.vue
+++ b/src/components/Data/Collections/Update.vue
@@ -19,10 +19,10 @@
 </template>
 <script>
 import { omit } from 'lodash';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import PageNotAllowed from '../../Common/PageNotAllowed.vue';
-import { KIndexActionsTypes, KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useStorageIndexStore } from '@/stores';
 
 import CreateOrUpdate from './CreateOrUpdate.vue';
 
@@ -36,6 +36,11 @@ export default {
     indexName: { type: String, required: true },
     collectionName: { type: String, required: true },
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       mapping: {},
@@ -43,19 +48,15 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditCollection']),
+    ...mapState(useAuthStore, ['canEditCollection']),
     hasRights() {
       return this.canEditCollection(this.indexName, this.collectionName);
     },
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collection() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-      ](this.index, this.collectionName);
+      return this.storageIndexStore.getOneCollection(this.index, this.collectionName);
     },
     fullMappings() {
       const mappings = {
@@ -66,23 +67,19 @@ export default {
       return mappings;
     },
     loading() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.LOADING_COLLECTIONS}`
-      ](this.index.name);
+      return this.storageIndexStore.loadingCollections(this.index.name);
     },
   },
   methods: {
     async update(payload) {
       this.error = '';
       try {
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.UPDATE_COLLECTION}`,
-          {
-            index: this.index,
-            name: payload.name,
-            mapping: payload.mapping,
-          },
-        );
+        this.storageIndexStore.updateCollection({
+          index: this.index,
+          name: payload.name,
+          mapping: payload.mapping,
+        });
+
         this.$router.push({
           name: 'Collections',
           params: { indexName: this.index.name },
diff --git a/src/components/Data/Collections/Watch.vue b/src/components/Data/Collections/Watch.vue
index 7e26c6fc5..8aab6334c 100644
--- a/src/components/Data/Collections/Watch.vue
+++ b/src/components/Data/Collections/Watch.vue
@@ -254,7 +254,7 @@
 <script>
 import { isEqual } from 'lodash';
 import moment from 'moment';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import JsonEditor from '../../Common/JsonEditor.vue';
 import Headline from '../../Materialize/Headline.vue';
@@ -262,7 +262,7 @@ import Notification from '../Realtime/Notification.vue';
 import JsonFormatter from '@/directives/json-formatter.directive';
 import * as filterManager from '@/services/filterManager';
 import { extractAttributesFromMapping } from '@/services/mappingHelpers';
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore, useStorageIndexStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import DeleteCollectionModal from './DeleteCollectionModal.vue';
@@ -286,6 +286,11 @@ export default {
     indexName: String,
     collectionName: String,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       advancedFiltersVisible: false,
@@ -300,18 +305,14 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['canSubscribe']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['canSubscribe']),
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collection() {
       return this.index
-        ? this.$store.getters[
-            `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-          ](this.index, this.collectionName)
+        ? this.storageIndexStore.getOneCollection(this.index, this.collectionName)
         : null;
     },
     collectionMapping() {
diff --git a/src/components/Data/Documents/Create.vue b/src/components/Data/Documents/Create.vue
index bb866f04e..da959dcdd 100644
--- a/src/components/Data/Documents/Create.vue
+++ b/src/components/Data/Documents/Create.vue
@@ -23,9 +23,9 @@
 <script>
 import get from 'lodash/get';
 import omit from 'lodash/omit';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KIndexActionsTypes, KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore, useStorageIndexStore } from '@/stores';
 
 import PageNotAllowed from '@/components/Common/PageNotAllowed.vue';
 import Headline from '@/components/Materialize/Headline.vue';
@@ -42,6 +42,11 @@ export default {
     indexName: String,
     collectionName: String,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       submitting: false,
@@ -49,17 +54,13 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['canCreateDocument']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['canCreateDocument']),
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collection() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-      ](this.index, this.collectionName);
+      return this.storageIndexStore.getOneCollection(this.index, this.collectionName);
     },
     mappingAttributes() {
       return get(this, 'collection.mapping', null)
@@ -116,13 +117,10 @@ export default {
     },
     async fetchCollectionMapping() {
       try {
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.FETCH_COLLECTION_MAPPING}`,
-          {
-            index: this.index,
-            collection: this.collection,
-          },
-        );
+        await this.storageIndexStore.fetchCollectionMapping({
+          index: this.index,
+          collection: this.collection,
+        });
       } catch (error) {
         this.$log.error(error);
         this.$bvToast.toast('The complete error has been printed to the console.', {
diff --git a/src/components/Data/Documents/DocumentBoxItem.vue b/src/components/Data/Documents/DocumentBoxItem.vue
index 829fdc5f8..136153981 100644
--- a/src/components/Data/Documents/DocumentBoxItem.vue
+++ b/src/components/Data/Documents/DocumentBoxItem.vue
@@ -21,10 +21,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Dropdown from '@/components/Materialize/Dropdown';
 import JsonFormat from '@/directives/json-formatter.directive';
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'DocumentBoxItem',
@@ -43,7 +44,7 @@ export default {
     return {};
   },
   computed: {
-    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument']),
+    ...mapState(useAuthStore, ['canEditDocument', 'canDeleteDocument']),
     documentContent() {
       const content = Object.assign(this.document.content, {});
       delete content._kuzzle_info;
diff --git a/src/components/Data/Documents/DocumentListItem.vue b/src/components/Data/Documents/DocumentListItem.vue
index cb3943b31..aecbd5d75 100644
--- a/src/components/Data/Documents/DocumentListItem.vue
+++ b/src/components/Data/Documents/DocumentListItem.vue
@@ -75,10 +75,11 @@
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import JsonFormatter from '@/directives/json-formatter.directive';
 import { getBadgeVariant, getBadgeText } from '@/services/documentNotifications';
+import { useAuthStore } from '@/stores';
 import { dateFromTimestamp } from '@/utils';
 
 export default {
@@ -121,7 +122,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument']),
+    ...mapState(useAuthStore, ['canEditDocument', 'canDeleteDocument']),
     notifBadgeVariant() {
       if (!get(this.notification, 'action')) {
         return '';
diff --git a/src/components/Data/Documents/EmptyState.vue b/src/components/Data/Documents/EmptyState.vue
index f97ea2df5..446e52431 100644
--- a/src/components/Data/Documents/EmptyState.vue
+++ b/src/components/Data/Documents/EmptyState.vue
@@ -22,7 +22,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useAuthStore } from '@/stores';
 
 export default {
   props: {
@@ -31,7 +33,7 @@ export default {
     hasNewDocuments: Boolean,
   },
   computed: {
-    ...mapGetters('auth', ['canCreateDocument']),
+    ...mapState(useAuthStore, ['canCreateDocument']),
   },
 };
 </script>
diff --git a/src/components/Data/Documents/Page.vue b/src/components/Data/Documents/Page.vue
index 589f31700..91d420f39 100644
--- a/src/components/Data/Documents/Page.vue
+++ b/src/components/Data/Documents/Page.vue
@@ -239,7 +239,7 @@ import get from 'lodash/get';
 import isUndefined from 'lodash/isUndefined';
 import mapValues from 'lodash/mapValues';
 import pickBy from 'lodash/pickBy';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import DeleteCollectionModal from '../Collections/DeleteCollectionModal.vue';
 import CollectionDropdownAction from '../Collections/DropdownAction.vue';
@@ -254,7 +254,7 @@ import {
   saveSettingsForCollection,
 } from '@/services/localSettings';
 import { extractAttributesFromMapping } from '@/services/mappingHelpers';
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore, useStorageIndexStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import Filters from '@/components/Common/Filters/Filters.vue';
@@ -290,6 +290,11 @@ export default {
     indexName: String,
     collectionName: String,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       searchQuery: null,
@@ -329,8 +334,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper', '$kuzzle']),
-    ...mapGetters('auth', [
+    ...mapState(useKuzzleStore, ['wrapper', '$kuzzle']),
+    ...mapState(useAuthStore, [
       'canSearchDocument',
       'canCreateDocument',
       'canDeleteDocument',
@@ -403,15 +408,11 @@ export default {
         }));
     },
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collection() {
       return this.index
-        ? this.$store.getters[
-            `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-          ](this.index, this.collectionName)
+        ? this.storageIndexStore.getOneCollection(this.index, this.collectionName)
         : null;
     },
     collectionMapping() {
diff --git a/src/components/Data/Documents/RealtimeOnlyEmptyState.vue b/src/components/Data/Documents/RealtimeOnlyEmptyState.vue
index 3399bf640..064c624a7 100644
--- a/src/components/Data/Documents/RealtimeOnlyEmptyState.vue
+++ b/src/components/Data/Documents/RealtimeOnlyEmptyState.vue
@@ -29,7 +29,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useAuthStore } from '@/stores';
 
 export default {
   props: {
@@ -37,7 +39,7 @@ export default {
     collection: String,
   },
   computed: {
-    ...mapGetters('auth', ['canEditCollection']),
+    ...mapState(useAuthStore, ['canEditCollection']),
   },
 };
 </script>
diff --git a/src/components/Data/Documents/Update.vue b/src/components/Data/Documents/Update.vue
index 2b9a27296..fc55ae3c5 100644
--- a/src/components/Data/Documents/Update.vue
+++ b/src/components/Data/Documents/Update.vue
@@ -35,9 +35,9 @@
 <script>
 import get from 'lodash/get';
 import omit from 'lodash/omit';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore, useStorageIndexStore } from '@/stores';
 
 import PageNotAllowed from '@/components/Common/PageNotAllowed.vue';
 import Headline from '@/components/Materialize/Headline.vue';
@@ -55,6 +55,11 @@ export default {
     indexName: { type: String, required: true },
     collectionName: { type: String, required: true },
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       document: {},
@@ -63,22 +68,18 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'wrapper']),
-    ...mapGetters('auth', ['canEditDocument']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'wrapper']),
+    ...mapState(useAuthStore, ['canEditDocument']),
     mappingAttributes() {
       return get(this, 'collection.mapping', null)
         ? omit(this.collection.mapping, '_kuzzle_info')
         : null;
     },
     index() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-      ](this.indexName);
+      return this.storageIndexStore.getOneIndex(this.indexName);
     },
     collection() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-      ](this.index, this.collectionName);
+      return this.storageIndexStore.getOneCollection(this.index, this.collectionName);
     },
     hasRights() {
       return this.canEditDocument(this.indexName, this.collectionName);
diff --git a/src/components/Data/Documents/Views/Column/Column.vue b/src/components/Data/Documents/Views/Column/Column.vue
index 4d32e9197..a30cfe710 100644
--- a/src/components/Data/Documents/Views/Column/Column.vue
+++ b/src/components/Data/Documents/Views/Column/Column.vue
@@ -222,13 +222,13 @@
 <script>
 import defaultsDeep from 'lodash/defaultsDeep';
 import get from 'lodash/get';
+import { mapState } from 'pinia';
 import draggable from 'vuedraggable';
-import { mapGetters } from 'vuex';
 
 import JsonFormatter from '@/directives/json-formatter.directive';
 import { flattenObjectMapping } from '@/services/collectionHelper';
 import { getBadgeVariant, getBadgeText } from '@/services/documentNotifications';
-import { KAuthActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
@@ -265,6 +265,11 @@ export default {
     notifications: Object,
     hasNewDocuments: Boolean,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+    };
+  },
   data() {
     return {
       itemsPerPage: [10, 25, 50, 100, 500],
@@ -286,8 +291,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument', 'user']),
-    ...mapGetters('kuzzle', ['wrapper', 'currentEnvironment']),
+    ...mapState(useAuthStore, ['canEditDocument', 'canDeleteDocument', 'user']),
+    ...mapState(useKuzzleStore, ['wrapper', 'currentEnvironment']),
     exportUrl() {
       const protocol = this.currentEnvironment.ssl ? 'https' : 'http';
       const baseUrl = `${protocol}://${this.currentEnvironment.host}:${this.currentEnvironment.port}`;
@@ -376,9 +381,7 @@ export default {
   },
   methods: {
     async fetchSingleUseToken() {
-      this.singleUseToken = await this.$store.dispatch(
-        `${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.CREATE_SINGLE_USE_TOKEN}`,
-      );
+      this.singleUseToken = await this.authStore.createSingleUseToken();
     },
     clearSingleUseToken() {
       this.singleUseToken = null;
diff --git a/src/components/Data/Documents/Views/List.vue b/src/components/Data/Documents/Views/List.vue
index 79b7d6e07..85a01a29e 100644
--- a/src/components/Data/Documents/Views/List.vue
+++ b/src/components/Data/Documents/Views/List.vue
@@ -44,10 +44,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import NewDocumentsBadge from '../Common/NewDocumentsBadge.vue';
 import DocumentListItem from '../DocumentListItem.vue';
+import { useAuthStore } from '@/stores';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
 
@@ -106,7 +107,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canDeleteDocument']),
+    ...mapState(useAuthStore, ['canDeleteDocument']),
     hasSelectedDocuments() {
       return this.selectedDocuments.length > 0;
     },
diff --git a/src/components/Data/Documents/Views/Map.vue b/src/components/Data/Documents/Views/Map.vue
index f0aa2c729..ef750fed1 100644
--- a/src/components/Data/Documents/Views/Map.vue
+++ b/src/components/Data/Documents/Views/Map.vue
@@ -158,11 +158,12 @@
 <script>
 import L from 'leaflet';
 import get from 'lodash/get';
+import { mapState } from 'pinia';
 import { LMap, LTileLayer, LMarker, LCircle, LPolygon } from 'vue2-leaflet';
-import { mapGetters } from 'vuex';
 
 import '@/assets/leaflet.css';
 import JsonFormatter from '@/directives/json-formatter.directive';
+import { useAuthStore } from '@/stores';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
 
@@ -264,7 +265,7 @@ export default {
     totalDocuments() {
       return this.geoDocuments.length;
     },
-    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument']),
+    ...mapState(useAuthStore, ['canEditDocument', 'canDeleteDocument']),
     coordinates() {
       const coordinates = [
         ...this.geoDocuments.map((d) => d.coordinates),
diff --git a/src/components/Data/Indexes/BulkDeleteIndexesModal.vue b/src/components/Data/Indexes/BulkDeleteIndexesModal.vue
index 235594d41..f48d42ec1 100644
--- a/src/components/Data/Indexes/BulkDeleteIndexesModal.vue
+++ b/src/components/Data/Indexes/BulkDeleteIndexesModal.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { KIndexActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 
 const BULK_DELETE_CONFIRMATION = 'DELETE';
 
@@ -49,6 +49,11 @@ export default {
       required: false,
     },
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       error: '',
@@ -82,10 +87,7 @@ export default {
       }
 
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.BULK_DELETE_INDEXES}`,
-          this.indexes,
-        );
+        await this.storageIndexStore.bulkDeleteIndexes(this.indexes);
         this.onDeleteSuccess();
       } catch (err) {
         this.error = err.message;
diff --git a/src/components/Data/Indexes/CreateIndexModal.vue b/src/components/Data/Indexes/CreateIndexModal.vue
index 5ab80ec7a..b2e3ae326 100644
--- a/src/components/Data/Indexes/CreateIndexModal.vue
+++ b/src/components/Data/Indexes/CreateIndexModal.vue
@@ -59,7 +59,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { not, required, helpers } from '@vuelidate/validators';
 
-import { KIndexActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 import { startsWithSpace, isWhitespace, isUppercase } from '@/validators';
 
 function includesInvalidIndexChars(value) {
@@ -76,7 +76,10 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      storageIndexStore: useStorageIndexStore(),
+    };
   },
   data() {
     return {
@@ -146,10 +149,7 @@ export default {
       this.modalBusy = true;
 
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.CREATE_INDEX}`,
-          this.index,
-        );
+        await this.storageIndexStore.createIndex(this.index);
         this.onCreateSuccess();
       } catch (err) {
         this.error = err.message;
diff --git a/src/components/Data/Indexes/DropdownActions.vue b/src/components/Data/Indexes/DropdownActions.vue
index 2c5cdce31..0d53a2e4f 100644
--- a/src/components/Data/Indexes/DropdownActions.vue
+++ b/src/components/Data/Indexes/DropdownActions.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KKuzzleGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 export default {
   name: 'IndexDropdownAction',
@@ -42,12 +42,15 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   computed: {
-    ...mapGetters('auth', ['canDeleteIndex']),
+    ...mapState(useAuthStore, ['canDeleteIndex']),
     backendMajorVersion() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`
-      ].backendMajorVersion;
+      return this.kuzzleStore.currentEnvironment?.backendMajorVersion;
     },
   },
   methods: {
diff --git a/src/components/Data/Indexes/Page.vue b/src/components/Data/Indexes/Page.vue
index 41e2ebfe4..a3b6bb2a1 100644
--- a/src/components/Data/Indexes/Page.vue
+++ b/src/components/Data/Indexes/Page.vue
@@ -167,9 +167,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KIndexActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useStorageIndexStore } from '@/stores';
 
 import ListNotAllowed from '@/components/Common/ListNotAllowed.vue';
 import Headline from '@/components/Materialize/Headline.vue';
@@ -186,6 +186,11 @@ export default {
     BulkDeleteIndexesModal,
     ListNotAllowed,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       createIndexModalId: 'createIndexModal',
@@ -230,8 +235,8 @@ export default {
     this.updateFilteredIndexes(this.indexes);
   },
   computed: {
-    ...mapGetters('auth', ['canSearchIndex', 'canCreateIndex']),
-    ...mapGetters('index', ['indexes', 'loadingIndexes']),
+    ...mapState(useAuthStore, ['canSearchIndex', 'canCreateIndex']),
+    ...mapState(useStorageIndexStore, ['indexes', 'loadingIndexes']),
     bulkDeleteEnabled() {
       return this.selectedIndexes.length > 0;
     },
@@ -260,10 +265,7 @@ export default {
     },
     async onConfirmDeleteModal() {
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.DELETE_INDEX}`,
-          this.indexToDelete,
-        );
+        await this.storageIndexStore.deleteIndex(this.indexToDelete);
         this.$bvModal.hide(this.deleteIndexModalId);
         await this.refreshIndexes();
       } catch (err) {
@@ -278,9 +280,7 @@ export default {
     },
     async refreshIndexes() {
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.FETCH_INDEX_LIST}`,
-        );
+        await this.storageIndexStore.fetchIndexList();
       } catch (err) {
         this.$log.error(err);
         this.$bvToast.toast('The complete error has been printed to the console.', {
diff --git a/src/components/Data/Layout.vue b/src/components/Data/Layout.vue
index b4ea666aa..1dfe80753 100644
--- a/src/components/Data/Layout.vue
+++ b/src/components/Data/Layout.vue
@@ -29,10 +29,10 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import { Multipane, MultipaneResizer } from 'vue-multipane';
-import { mapGetters } from 'vuex';
 
-import { KIndexActionsTypes, KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useStorageIndexStore } from '@/stores';
 import { setPersistedItem, getPersistedItem } from './itemsStorage';
 
 import Treeview from '@/components/Data/Leftnav/Treeview.vue';
@@ -46,6 +46,11 @@ export default {
     MultipaneResizer,
     DataNotFound,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       isFetching: true,
@@ -55,8 +60,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('index', ['loadingIndexes', 'loadingCollections']),
-    ...mapGetters('auth', ['isAuthenticated']),
+    ...mapState(useStorageIndexStore, ['loadingIndexes', 'loadingCollections']),
+    ...mapState(useAuthStore, ['isAuthenticated']),
     indexName() {
       return this.$route.params.indexName;
     },
@@ -102,9 +107,7 @@ export default {
     },
     async fetchIndexList() {
       try {
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.FETCH_INDEX_LIST}`,
-        );
+        await this.storageIndexStore.fetchIndexList();
       } catch (error) {
         this.$log.error(error);
         this.$bvToast.toast('The complete error has been printed to the console.', {
@@ -119,19 +122,14 @@ export default {
     },
     async fetchCollectionList() {
       try {
-        const index = this.$store.getters[
-          `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-        ](this.indexName);
+        const index = this.storageIndexStore.getOneIndex(this.indexName);
 
         if (!index) {
           this.handleDataNotFound();
           return;
         }
 
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.FETCH_COLLECTION_LIST}`,
-          index,
-        );
+        await this.storageIndexStore.fetchCollectionList(index);
       } catch (error) {
         this.$log.error(error);
         this.$bvToast.toast('The complete error has been printed to the console.', {
@@ -146,31 +144,21 @@ export default {
     },
     async fetchCollectionMapping() {
       try {
-        const index = this.$store.getters[
-          `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`
-        ](this.indexName);
+        const index = this.storageIndexStore.getOneIndex(this.indexName);
 
         if (!index) {
           this.handleDataNotFound();
           return;
         }
 
-        const collection = this.$store.getters[
-          `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-        ](index, this.collectionName);
+        const collection = this.storageIndexStore.getOneCollection(index, this.collectionName);
 
         if (!collection) {
           this.handleDataNotFound();
           return;
         }
 
-        await this.$store.dispatch(
-          `${StoreNamespaceTypes.INDEX}/${KIndexActionsTypes.FETCH_COLLECTION_MAPPING}`,
-          {
-            index,
-            collection,
-          },
-        );
+        await this.storageIndexStore.fetchCollectionMapping({ index, collection });
       } catch (error) {
         this.$log.error(error);
         this.$bvToast.toast('The complete error has been printed to the console.', {
diff --git a/src/components/Data/Leftnav/IndexBranch.vue b/src/components/Data/Leftnav/IndexBranch.vue
index a83affe24..725810e50 100644
--- a/src/components/Data/Leftnav/IndexBranch.vue
+++ b/src/components/Data/Leftnav/IndexBranch.vue
@@ -75,8 +75,9 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapState } from 'pinia';
 
+import { useStorageIndexStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import HighlightedSpan from '@/components/Common/HighlightedSpan.vue';
@@ -105,7 +106,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('index', ['loadingCollections']),
+    ...mapState(useStorageIndexStore, ['loadingCollections']),
     showMoreCollectionsDisplay() {
       if (
         this.filter.length > 0 &&
@@ -153,7 +154,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('index', ['fetchCollectionList']),
+    ...mapActions(useStorageIndexStore, ['fetchCollectionList']),
     truncateName,
     async onToggleBranchClicked() {
       if (!this.open) {
diff --git a/src/components/Data/Leftnav/Treeview.vue b/src/components/Data/Leftnav/Treeview.vue
index 563ccd652..6ff4e4b37 100644
--- a/src/components/Data/Leftnav/Treeview.vue
+++ b/src/components/Data/Leftnav/Treeview.vue
@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import { filterIndexesByKeyword } from '@/services/indexHelpers';
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useStorageIndexStore } from '@/stores';
 
 import IndexBranch from './IndexBranch.vue';
 
@@ -52,25 +52,28 @@ export default {
     indexName: String,
     collectionName: String,
   },
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   data() {
     return {
       filter: '',
     };
   },
   computed: {
-    ...mapGetters('auth', ['canSearchIndex']),
+    ...mapState(useAuthStore, ['canSearchIndex']),
     orderedFilteredIndexes() {
       return [...filterIndexesByKeyword(this.indexes, this.filter)].sort((a, b) =>
         a.name.localeCompare(b.name),
       );
     },
     isLoading() {
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.LOADING_INDEXES}`
-      ];
+      return this.storageIndexStore.loadingIndexes;
     },
     indexes() {
-      return this.$store.getters[`${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.INDEXES}`];
+      return this.storageIndexStore.indexes;
     },
   },
 };
diff --git a/src/components/Error/KuzzleDisconnectedPage.vue b/src/components/Error/KuzzleDisconnectedPage.vue
index 3f62e93cf..e6039649d 100644
--- a/src/components/Error/KuzzleDisconnectedPage.vue
+++ b/src/components/Error/KuzzleDisconnectedPage.vue
@@ -17,7 +17,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useKuzzleStore } from '@/stores';
 
 import EnvironmentSwitch from '@/components/Common/Environments/EnvironmentsSwitch.vue';
 import Connecting from './Connecting.vue';
@@ -38,7 +40,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
   },
   mounted() {
     this.host = this.$kuzzle.protocol.host;
diff --git a/src/components/Error/KuzzleErrorPage.vue b/src/components/Error/KuzzleErrorPage.vue
index c76015639..6355213c8 100644
--- a/src/components/Error/KuzzleErrorPage.vue
+++ b/src/components/Error/KuzzleErrorPage.vue
@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import { useKuzzleStore } from '@/stores';
+
 import EnvironmentSwitch from '@/components/Common/Environments/EnvironmentsSwitch.vue';
 
 export default {
@@ -40,6 +42,11 @@ export default {
   components: {
     EnvironmentSwitch,
   },
+  setup() {
+    return {
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       host: null,
@@ -48,7 +55,7 @@ export default {
   },
   computed: {
     kuzzleError() {
-      return this.$store.state.kuzzle.errorFromKuzzle;
+      return this.kuzzleStore.errorFromKuzzle;
     },
   },
   methods: {
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 1a720cb3c..ee450d8dc 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -50,14 +50,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import {
-  KAuthActionsTypes,
-  KAuthGettersTypes,
-  KKuzzleActionsTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import LoginForm from './Common/Login/Form.vue';
 import MainMenu from './Common/MainMenu.vue';
@@ -70,6 +65,12 @@ export default {
     MainMenu,
     MainSpinner,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       host: null,
@@ -78,12 +79,12 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'currentEnvironment']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'currentEnvironment']),
     tokenValid() {
-      return this.$store.state.auth.tokenValid;
+      return this.authStore.tokenValid;
     },
     authInitializing() {
-      return this.$store.state.auth.initializing;
+      return this.authStore.initializing;
     },
   },
   watch: {
@@ -124,27 +125,22 @@ export default {
   },
   methods: {
     hideNoAdminWarning() {
-      this.$store.dispatch(
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.UPDATE_ENVIRONMENT}`,
-        {
-          id: this.$store.state.kuzzle.currentId,
-          environment: {
-            ...this.currentEnvironment,
-            hideAdminWarning: true,
-          },
+      this.kuzzleStore.updateEnvironment({
+        id: this.kuzzleStore.currentId,
+        environment: {
+          ...this.currentEnvironment,
+          hideAdminWarning: true,
         },
-      );
+      });
 
       this.$bvToast.hide('no-admin-warning');
     },
     onTokenExpired() {
-      this.$store.dispatch(`${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.SET_SESSION}`, null);
+      this.authStore.setSession(null);
     },
     noop() {},
     displayNoAdminWarning() {
-      if (
-        this.$store.getters[`${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.ADMIN_ALREADY_EXISTS}`]
-      ) {
+      if (this.authStore.adminAlreadyExists) {
         return;
       }
       if (this.currentEnvironment.hideAdminWarning) {
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 31f06d94e..489687085 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -38,14 +38,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import {
-  KAuthGettersTypes,
-  KRoutingGettersTypes,
-  KRoutingMutationsTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore, useRoutingStore } from '@/stores';
 
 import EnvironmentSwitch from './Common/Environments/EnvironmentsSwitch.vue';
 import LoginForm from './Common/Login/Form.vue';
@@ -56,17 +51,21 @@ export default {
     LoginForm,
     EnvironmentSwitch,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      routingStore: useRoutingStore(),
+    };
+  },
   data() {
     return {
       environmentId: null,
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['currentEnvironment']),
+    ...mapState(useKuzzleStore, ['currentEnvironment']),
     displayNoAdminWarning() {
-      return !this.$store.getters[
-        `${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.ADMIN_ALREADY_EXISTS}`
-      ];
+      return !this.authStore.adminAlreadyExists;
     },
   },
   methods: {
@@ -77,19 +76,12 @@ export default {
       // see src/components/Materialize/Modale.vue#62
       window.document.body.style.overflow = 'visible';
 
-      if (
-        this.$store.getters[
-          `${StoreNamespaceTypes.ROUTING}/${KRoutingGettersTypes.ROUTE_BEFORE_REDIRECT}`
-        ]
-      ) {
-        this.$store.commit(
-          `${StoreNamespaceTypes.ROUTING}/${KRoutingMutationsTypes.SET_ROUTE_BEFORE_REDIRECT}`,
-          undefined,
-        );
+      if (this.routingStore.routeBeforeRedirect) {
+        const route = this.routingStore.routeBeforeRedirect;
+        this.routingStore.routeBeforeRedirect = undefined;
+
         this.$router.push({
-          name: this.$store.getters[
-            `${StoreNamespaceTypes.ROUTING}/${KRoutingGettersTypes.ROUTE_BEFORE_REDIRECT}`
-          ],
+          name: route,
         });
       } else {
         this.$router.push('/');
diff --git a/src/components/Materialize/Toaster.vue b/src/components/Materialize/Toaster.vue
index a2a4a05af..082998310 100644
--- a/src/components/Materialize/Toaster.vue
+++ b/src/components/Materialize/Toaster.vue
@@ -2,19 +2,21 @@
   <div class="toast-error" />
 </template>
 
-<script>
-export default {
-  name: 'Toaster',
-  watch: {
-    '$store.state.toaster.toast'() {
-      /* eslint no-undef: 0 */
-      M.toast({
-        html: this.$store.state.toaster.toast.text,
-        inDuration: this.$store.state.toaster.toast.duration,
-        classes: this.$store.state.toaster.toast.cssClass,
-        completeCallback: this.$store.state.toaster.toast.cb,
-      });
-    },
-  },
-};
+<script setup lang="ts">
+import { useToasterStore } from '@/stores';
+
+const toasterStore = useToasterStore();
+
+toasterStore.$subscribe((_mutation, state) => {
+  if (state.toast != undefined) {
+    // TODO: Import Materialize properly
+    // @ts-expect-error
+    M.toast({
+      html: state.toast.text,
+      inDuration: state.toast.duration,
+      classes: state.toast.cssClass,
+      completeCallback: state.toast.cb,
+    });
+  }
+});
 </script>
diff --git a/src/components/ResetPassword.vue b/src/components/ResetPassword.vue
index d6d11b364..e15671ba6 100644
--- a/src/components/ResetPassword.vue
+++ b/src/components/ResetPassword.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { KRoutingMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useRoutingStore } from '@/stores';
 
 import ResetPasswordForm from './Common/Login/ResetPasswordForm.vue';
 
@@ -43,21 +43,19 @@ export default {
     showIntro: Boolean,
     token: String,
   },
+  setup() {
+    return {
+      routingStore: useRoutingStore(),
+    };
+  },
   methods: {
     onReset() {
-      if (
-        this.$store.getters[
-          `${StoreNamespaceTypes.ROUTING}/${KRoutingGettersTypes.ROUTE_BEFORE_REDIRECT}`
-        ]
-      ) {
-        this.$store.commit(
-          `${StoreNamespaceTypes.ROUTING}/${KRoutingMutationsTypes.SET_ROUTE_BEFORE_REDIRECT}`,
-          undefined,
-        );
+      if (this.routingStore.routeBeforeRedirect) {
+        const route = this.routingStore.routeBeforeRedirect;
+        this.routingStore.routeBeforeRedirect = undefined;
+
         this.$router.push({
-          name: this.$store.getters[
-            `${StoreNamespaceTypes.ROUTING}/${KRoutingGettersTypes.ROUTE_BEFORE_REDIRECT}`
-          ],
+          name: route,
         });
       } else {
         this.$router.push('/');
diff --git a/src/components/Security/Common/List.vue b/src/components/Security/Common/List.vue
index 628e25cff..11f731414 100644
--- a/src/components/Security/Common/List.vue
+++ b/src/components/Security/Common/List.vue
@@ -55,7 +55,7 @@ import ProfileItem from '../Profiles/ProfileItem.vue';
 import RoleItem from '../Roles/RoleItem.vue';
 import UserItem from '../Users/UserItem.vue';
 import { availableFilters } from '@/services/filterManager';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import CrudlDocument from './CrudlDocument.vue';
 
@@ -81,6 +81,11 @@ export default {
     routeCreate: String,
     routeUpdate: String,
   },
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       availableFilters,
@@ -172,9 +177,9 @@ export default {
           this.totalDocuments = res.total;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: 'An error occurred while performing search: <br />' + e.message,
-          });
+          };
         });
     },
     editDocument(route, id) {
diff --git a/src/components/Security/Layout.vue b/src/components/Security/Layout.vue
index ee5ad4c18..9ddf301de 100644
--- a/src/components/Security/Layout.vue
+++ b/src/components/Security/Layout.vue
@@ -47,12 +47,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'SecurityLayout',
   computed: {
-    ...mapGetters('auth', ['canManageUsers', 'canManageRoles', 'canManageProfiles']),
+    ...mapState(useAuthStore, ['canManageUsers', 'canManageRoles', 'canManageProfiles']),
   },
 };
 </script>
diff --git a/src/components/Security/Profiles/Create.vue b/src/components/Security/Profiles/Create.vue
index bf2f88875..302c7e93c 100644
--- a/src/components/Security/Profiles/Create.vue
+++ b/src/components/Security/Profiles/Create.vue
@@ -7,10 +7,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Headline from '../../Materialize/Headline.vue';
 import Notice from '../Common/Notice.vue';
+import { useKuzzleStore } from '@/stores';
 
 import CreateOrUpdate from './CreateOrUpdate.vue';
 
@@ -22,7 +23,7 @@ export default {
     Notice,
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
   },
   methods: {
     async onSubmit({ profile, id }) {
diff --git a/src/components/Security/Profiles/CrudlDocument.vue b/src/components/Security/Profiles/CrudlDocument.vue
index fcea19023..8d81e46f9 100644
--- a/src/components/Security/Profiles/CrudlDocument.vue
+++ b/src/components/Security/Profiles/CrudlDocument.vue
@@ -120,7 +120,7 @@
 
 <script>
 import { formatFromBasicSearch, ACTIVE_BASIC, NO_ACTIVE } from '@/services/filterManager';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import Modal from '@/components/Materialize/Modal.vue';
 import Pagination from '@/components/Materialize/Pagination.vue';
@@ -155,6 +155,11 @@ export default {
     documentToDelete: String,
     performDelete: Function,
   },
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       formatFromBasicSearch,
@@ -200,9 +205,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     confirmSingleDelete(id) {
@@ -213,9 +218,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     onFiltersUpdated(newFilters) {
diff --git a/src/components/Security/Profiles/Filters.vue b/src/components/Security/Profiles/Filters.vue
index 29024fe97..3294adf14 100644
--- a/src/components/Security/Profiles/Filters.vue
+++ b/src/components/Security/Profiles/Filters.vue
@@ -59,8 +59,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
+import { useKuzzleStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 export default {
@@ -84,7 +85,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     hasFilter() {
       return this.selectedRoles.length > 0;
     },
diff --git a/src/components/Security/Profiles/List.vue b/src/components/Security/Profiles/List.vue
index d42c5e0c7..8cf78296a 100644
--- a/src/components/Security/Profiles/List.vue
+++ b/src/components/Security/Profiles/List.vue
@@ -120,9 +120,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import ProfileItem from '../Profiles/ProfileItem.vue';
+import { useKuzzleStore } from '@/stores';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
 import DeleteModal from './DeleteModal.vue';
@@ -162,7 +163,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     displayBulkDelete() {
       return this.selectedDocuments.length > 0;
     },
diff --git a/src/components/Security/Profiles/Page.vue b/src/components/Security/Profiles/Page.vue
index 296633684..9d06023e3 100644
--- a/src/components/Security/Profiles/Page.vue
+++ b/src/components/Security/Profiles/Page.vue
@@ -38,10 +38,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import ListNotAllowed from '../../Common/ListNotAllowed.vue';
 import Headline from '../../Materialize/Headline.vue';
+import { useAuthStore } from '@/stores';
 
 import List from './List.vue';
 
@@ -53,7 +54,7 @@ export default {
     Headline,
   },
   computed: {
-    ...mapGetters('auth', ['canSearchProfile', 'canCreateProfile']),
+    ...mapState(useAuthStore, ['canSearchProfile', 'canCreateProfile']),
   },
   methods: {
     createProfile() {
diff --git a/src/components/Security/Profiles/ProfileItem.vue b/src/components/Security/Profiles/ProfileItem.vue
index 67eddc078..3581df964 100644
--- a/src/components/Security/Profiles/ProfileItem.vue
+++ b/src/components/Security/Profiles/ProfileItem.vue
@@ -72,9 +72,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import jsonFormatter from '@/directives/json-formatter.directive';
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'ProfileItem',
@@ -93,7 +94,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditProfile', 'canDeleteProfile']),
+    ...mapState(useAuthStore, ['canEditProfile', 'canDeleteProfile']),
     checkboxId() {
       return `checkbox-${this.document._id}`;
     },
diff --git a/src/components/Security/Profiles/RoleChips.vue b/src/components/Security/Profiles/RoleChips.vue
index b0334ec7d..78c93b97b 100644
--- a/src/components/Security/Profiles/RoleChips.vue
+++ b/src/components/Security/Profiles/RoleChips.vue
@@ -26,9 +26,10 @@
 </template>
 
 <script type="text/javascript">
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import MSelect from '../../Common/MSelect.vue';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'RoleChips',
@@ -46,7 +47,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     availableRoles() {
       return this.roleList.filter((role) => {
         return this.addedRoles.indexOf(role.id) === -1;
diff --git a/src/components/Security/Profiles/Update.vue b/src/components/Security/Profiles/Update.vue
index 69014567c..9e907c7c4 100644
--- a/src/components/Security/Profiles/Update.vue
+++ b/src/components/Security/Profiles/Update.vue
@@ -19,10 +19,11 @@
 
 <script>
 import omit from 'lodash/omit';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Headline from '../../Materialize/Headline.vue';
 import Notice from '../Common/Notice.vue';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import CreateOrUpdate from './CreateOrUpdate.vue';
 
@@ -47,8 +48,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['userProfiles']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['userProfiles']),
     displayWarningAlert() {
       return this.userProfiles && this.userProfiles.includes(this.id);
     },
diff --git a/src/components/Security/Roles/CreateOrUpdate.vue b/src/components/Security/Roles/CreateOrUpdate.vue
index 32193f66f..3fc7776db 100644
--- a/src/components/Security/Roles/CreateOrUpdate.vue
+++ b/src/components/Security/Roles/CreateOrUpdate.vue
@@ -104,11 +104,12 @@
 import { useVuelidate } from '@vuelidate/core';
 import { not, requiredUnless, helpers } from '@vuelidate/validators';
 import { omit, intersection } from 'lodash';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import JsonEditor from '../../Common/JsonEditor.vue';
 import Headline from '../../Materialize/Headline.vue';
 import Notice from '../Common/Notice.vue';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import { startsWithSpace, isWhitespace } from '@/validators';
 
 export default {
@@ -164,8 +165,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['userProfiles']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['userProfiles']),
     displayWarningAlert() {
       return intersection(this.attachedProfiles, this.userProfiles).length !== 0;
     },
diff --git a/src/components/Security/Roles/CrudlDocument.vue b/src/components/Security/Roles/CrudlDocument.vue
index a41ab0d93..e55605ad8 100644
--- a/src/components/Security/Roles/CrudlDocument.vue
+++ b/src/components/Security/Roles/CrudlDocument.vue
@@ -111,7 +111,7 @@
 import Modal from '../../Materialize/Modal.vue';
 import Pagination from '../../Materialize/Pagination.vue';
 import { formatFromBasicSearch, ACTIVE_BASIC, NO_ACTIVE } from '@/services/filterManager';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import Filters from './Filters.vue';
 
@@ -142,6 +142,11 @@ export default {
     documentToDelete: String,
     performDelete: Function,
   },
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       formatFromBasicSearch,
@@ -187,9 +192,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     confirmSingleDelete(id) {
@@ -200,9 +205,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     onFiltersUpdated(newFilters) {
diff --git a/src/components/Security/Roles/Filters.vue b/src/components/Security/Roles/Filters.vue
index e59c3ad6b..0d0c536bc 100644
--- a/src/components/Security/Roles/Filters.vue
+++ b/src/components/Security/Roles/Filters.vue
@@ -43,7 +43,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'RolesFilters',
@@ -52,7 +54,7 @@ export default {
     currentFilter: Object,
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
   },
   data() {
     return {
diff --git a/src/components/Security/Roles/List.vue b/src/components/Security/Roles/List.vue
index c6d181554..ed26ed6e6 100644
--- a/src/components/Security/Roles/List.vue
+++ b/src/components/Security/Roles/List.vue
@@ -102,10 +102,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import RoleItem from '../Roles/RoleItem.vue';
 import * as filterManager from '@/services/filterManager';
+import { useKuzzleStore } from '@/stores';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
 import DeleteModal from './DeleteModal.vue';
@@ -143,7 +144,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     displayBulkDelete() {
       return this.selectedDocuments.length > 0;
     },
diff --git a/src/components/Security/Roles/Page.vue b/src/components/Security/Roles/Page.vue
index 3599de7f6..9094b3c8a 100644
--- a/src/components/Security/Roles/Page.vue
+++ b/src/components/Security/Roles/Page.vue
@@ -61,11 +61,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import ListNotAllowed from '../../Common/ListNotAllowed.vue';
 import Headline from '../../Materialize/Headline.vue';
-import { KAuthGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import RoleList from './List.vue';
 
@@ -76,6 +76,11 @@ export default {
     RoleList,
     Headline,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+    };
+  },
   methods: {
     async revokeAnonymous() {
       try {
@@ -147,16 +152,14 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
-    ...mapGetters('auth', ['canSearchRole', 'canCreateRole']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
+    ...mapState(useAuthStore, ['canSearchRole', 'canCreateRole']),
     displayRevokeAnonymous() {
       return (
-        this.$store.getters[
-          `${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.ADMIN_ALREADY_EXISTS}`
-        ] &&
-        this.$store.getters[`${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.CAN_EDIT_ROLE}`] &&
-        this.$store.getters[`${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.CAN_MANAGE_ROLES}`] &&
-        this.$store.getters[`${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.USER}`].id !== -1
+        this.authStore.adminAlreadyExists &&
+        this.authStore.canEditRole &&
+        this.authStore.canManageRoles &&
+        this.authStore.user?.id !== -1
       );
     },
   },
diff --git a/src/components/Security/Roles/RoleItem.vue b/src/components/Security/Roles/RoleItem.vue
index 426f31184..be95ffa7c 100644
--- a/src/components/Security/Roles/RoleItem.vue
+++ b/src/components/Security/Roles/RoleItem.vue
@@ -56,9 +56,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import jsonFormatter from '@/directives/json-formatter.directive';
+import { useAuthStore } from '@/stores';
 
 export default {
   name: 'RoleItem',
@@ -77,7 +78,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditRole', 'canDeleteRole']),
+    ...mapState(useAuthStore, ['canEditRole', 'canDeleteRole']),
   },
   watch: {
     isChecked: {
diff --git a/src/components/Security/Users/CreateOrUpdate.vue b/src/components/Security/Users/CreateOrUpdate.vue
index dd7fea34e..677dc0e7d 100644
--- a/src/components/Security/Users/CreateOrUpdate.vue
+++ b/src/components/Security/Users/CreateOrUpdate.vue
@@ -94,12 +94,12 @@
 import { useVuelidate } from '@vuelidate/core';
 import { not, helpers } from '@vuelidate/validators';
 import Promise from 'bluebird';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import MainSpinner from '../../Common/MainSpinner.vue';
 import Headline from '../../Materialize/Headline.vue';
 import Notice from '../Common/Notice.vue';
-import { KAuthActionsTypes, KAuthGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import { startsWithSpace, isWhitespace } from '@/validators';
 
 import Basic from './Steps/Basic.vue';
@@ -122,7 +122,10 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      authStore: useAuthStore(),
+    };
   },
   data() {
     return {
@@ -174,7 +177,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'wrapper']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'wrapper']),
   },
   async mounted() {
     this.loading = true;
@@ -321,15 +324,9 @@ export default {
             },
             credentials: this.credentials,
           });
-          if (
-            !this.$store.getters[
-              `${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.ADMIN_ALREADY_EXISTS}`
-            ]
-          ) {
+          if (!this.authStore.adminAlreadyExists) {
             try {
-              await this.$store.dispatch(
-                `${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.CHECK_FIRST_ADMIN}`,
-              );
+              await this.authStore.checkFirstAdmin();
             } catch (err) {
               this.$log.error(err);
             }
diff --git a/src/components/Security/Users/EditCustomMapping.vue b/src/components/Security/Users/EditCustomMapping.vue
index 47839b9d2..32d2b5e48 100644
--- a/src/components/Security/Users/EditCustomMapping.vue
+++ b/src/components/Security/Users/EditCustomMapping.vue
@@ -83,10 +83,11 @@
  * This feature is currently freezed.
  */
 import omit from 'lodash/omit';
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import JsonEditor from '../../Common/JsonEditor.vue';
 import Headline from '../../Materialize/Headline.vue';
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'UsersCustomMappingWizard',
@@ -102,7 +103,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper', 'currentEnvironment']),
+    ...mapState(useKuzzleStore, ['wrapper', 'currentEnvironment']),
     isMappingValid() {
       try {
         JSON.parse(this.mappingValue);
diff --git a/src/components/Security/Users/List.vue b/src/components/Security/Users/List.vue
index ad268fbf6..e029de0a4 100644
--- a/src/components/Security/Users/List.vue
+++ b/src/components/Security/Users/List.vue
@@ -129,11 +129,11 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import Filters from '../../Common/Filters/Filters.vue';
 import * as filterManager from '@/services/filterManager';
-import { KAuthActionsTypes, KAuthGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import PerPageSelector from '@/components/Common/PerPageSelector.vue';
 import DeleteModal from './DeleteModal.vue';
@@ -164,7 +164,11 @@ export default {
     routeCreate: String,
     routeUpdate: String,
   },
-
+  setup() {
+    return {
+      authStore: useAuthStore(),
+    };
+  },
   data() {
     return {
       currentFilter: new filterManager.Filter(),
@@ -181,7 +185,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     isDocumentListFiltered() {
       return this.currentFilter.active !== filterManager.NO_ACTIVE;
     },
@@ -350,15 +354,9 @@ export default {
         this.deleteModalIsLoading = false;
         this.$bvModal.hide('modal-delete-users');
         await this.fetchDocuments();
-        if (
-          this.$store.getters[
-            `${StoreNamespaceTypes.AUTH}/${KAuthGettersTypes.ADMIN_ALREADY_EXISTS}`
-          ]
-        ) {
+        if (this.authStore.adminAlreadyExists) {
           try {
-            await this.$store.dispatch(
-              `${StoreNamespaceTypes.AUTH}/${KAuthActionsTypes.CHECK_FIRST_ADMIN}`,
-            );
+            await this.authStore.checkFirstAdmin();
           } catch (err) {
             this.$log.error(err);
             this.setError(err.message);
diff --git a/src/components/Security/Users/Page.vue b/src/components/Security/Users/Page.vue
index 3ebb092ed..f46f818f0 100644
--- a/src/components/Security/Users/Page.vue
+++ b/src/components/Security/Users/Page.vue
@@ -59,11 +59,12 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import ListNotAllowed from '../../Common/ListNotAllowed.vue';
 import Headline from '../../Materialize/Headline.vue';
 import { extractAttributesFromMapping } from '@/services/mappingHelpers';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import List from './List.vue';
 
@@ -80,8 +81,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
-    ...mapGetters('auth', ['canSearchUser', 'canCreateUser']),
+    ...mapState(useKuzzleStore, ['wrapper']),
+    ...mapState(useAuthStore, ['canSearchUser', 'canCreateUser']),
     mappingAttributes() {
       return this.extractAttributesFromMapping(this.userMapping);
     },
diff --git a/src/components/Security/Users/Steps/StepsContent.vue b/src/components/Security/Users/Steps/StepsContent.vue
index 765f948e2..20d1483a0 100644
--- a/src/components/Security/Users/Steps/StepsContent.vue
+++ b/src/components/Security/Users/Steps/StepsContent.vue
@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore, useToasterStore } from '@/stores';
 
 import Basic from './Basic.vue';
 import CredentialsSelector from './CredentialsSelector.vue';
@@ -46,6 +46,11 @@ export default {
     CustomData,
   },
   props: ['step', 'isUpdate'],
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       kuid: null,
@@ -59,7 +64,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'wrapper']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'wrapper']),
   },
   async mounted() {
     this.loading = true;
@@ -119,9 +124,9 @@ export default {
       this.loading = false;
       this.updateUser();
     } catch (e) {
-      this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+      this.toasterStore.toast = {
         text: e.message,
-      });
+      };
     }
   },
   methods: {
diff --git a/src/components/Security/Users/Steps/UserProfileList.vue b/src/components/Security/Users/Steps/UserProfileList.vue
index 71abfa855..6b0605385 100644
--- a/src/components/Security/Users/Steps/UserProfileList.vue
+++ b/src/components/Security/Users/Steps/UserProfileList.vue
@@ -54,7 +54,9 @@
 </template>
 
 <script type="text/javascript">
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
+
+import { useKuzzleStore } from '@/stores';
 
 export default {
   name: 'UserProfileList',
@@ -71,7 +73,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['wrapper']),
+    ...mapState(useKuzzleStore, ['wrapper']),
     availableProfiles() {
       return this.profileList
         .filter((profile) => {
diff --git a/src/components/Security/Users/UserItem.vue b/src/components/Security/Users/UserItem.vue
index 78ee9bb87..4f9122edb 100644
--- a/src/components/Security/Users/UserItem.vue
+++ b/src/components/Security/Users/UserItem.vue
@@ -93,9 +93,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
 import jsonFormatter from '@/directives/json-formatter.directive';
+import { useAuthStore } from '@/stores';
 
 const MAX_PROFILES = 5;
 
@@ -116,7 +117,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('auth', ['canEditUser', 'canDeleteUser']),
+    ...mapState(useAuthStore, ['canEditUser', 'canDeleteUser']),
     profileList() {
       if (!this.document.profileIds) {
         return [];
diff --git a/src/components/Signup.vue b/src/components/Signup.vue
index 6b2c2928a..93e1b1e7f 100644
--- a/src/components/Signup.vue
+++ b/src/components/Signup.vue
@@ -123,14 +123,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState } from 'pinia';
 
-import {
-  KAuthActionsTypes,
-  KAuthMutationsTypes,
-  KKuzzleActionsTypes,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useAuthStore, useKuzzleStore } from '@/stores';
 
 import EnvironmentSwitch from './Common/Environments/EnvironmentsSwitch.vue';
 
@@ -139,6 +134,12 @@ export default {
   components: {
     EnvironmentSwitch,
   },
+  setup() {
+    return {
+      authStore: useAuthStore(),
+      kuzzleStore: useKuzzleStore(),
+    };
+  },
   data() {
     return {
       username: '',
@@ -150,7 +151,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle']),
+    ...mapState(useKuzzleStore, ['$kuzzle']),
   },
   methods: {
     async signup() {
@@ -183,14 +184,9 @@ export default {
             },
           },
         });
-        this.$store.dispatch(
-          `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.UPDATE_TOKEN_CURRENT_ENVIRONMENT}`,
-          null,
-        );
-        this.$store.commit(
-          `${StoreNamespaceTypes.AUTH}/${KAuthMutationsTypes.SET_ADMIN_EXISTS}`,
-          true,
-        );
+
+        this.kuzzleStore.updateTokenCurrentEnvironment(null);
+        this.authStore.adminAlreadyExists = true;
         this.$router.push({ name: 'Login' });
       } catch (err) {
         if (
@@ -214,8 +210,8 @@ export default {
     },
     loginAsGuest() {
       this.error = null;
-      this.$store
-        .dispatch(`${StoreNamespaceTypes.Auth}/${KAuthActionsTypes.SET_SESSION}`, 'anonymous')
+      this.authStore
+        .setSession('anonymous')
         .then(() => {
           this.$router.go({ name: 'Data' });
         })
diff --git a/src/main.ts b/src/main.ts
index 0852f8025..103b3277e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,13 @@
 import Vue from 'vue';
 import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import { createPinia, PiniaVuePlugin } from 'pinia';
+import VueRouter from 'vue-router';
 
 import createRoutes from './routes/index';
 import './plugins/logger';
-
+import { useKuzzleStore } from './stores';
 import VueFormGenerator from 'vue-form-generator';
-
 import 'vue-form-generator/dist/vfg.css';
-import { createStore } from './services/createStore';
-import { KKuzzleGettersTypes, StoreNamespaceTypes } from './store';
 
 import DateTimeFormInput from '@/components/Data/Documents/FormInputs/DateTimeFormInput.vue';
 import JsonFormInput from '@/components/Data/Documents/FormInputs/JsonFormInput.vue';
@@ -18,15 +17,19 @@ import App from './App.vue';
 
 Reflect.defineProperty(window, 'kuzzle', {
   get() {
-    return this.$store.getters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.$KUZZLE}`];
+    const kuzzleStore = useKuzzleStore();
+    return kuzzleStore.$kuzzle;
   },
 });
 
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
 
-const store = createStore();
-const router = createRoutes(Vue.prototype.$log, store);
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
+
+Vue.use(VueRouter);
+const router = createRoutes(Vue.prototype.$log);
 
 Vue.component('FieldJsonFormInput', JsonFormInput);
 Vue.component('FieldDateTimeFormInput', DateTimeFormInput);
@@ -50,7 +53,7 @@ Vue.use(VueFormGenerator);
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
+  pinia,
   router,
-  store,
   render: (h) => h(App),
 });
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 791df62b4..74e63e606 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,7 +1,5 @@
-import Vue from 'vue';
 import KeplerCompanion from 'kepler-companion';
 import VueRouter from 'vue-router';
-import type { Store } from 'vuex';
 
 import PageNotFound from '../components/404.vue';
 import ApiAction from '../components/ApiAction.vue';
@@ -15,51 +13,37 @@ import ResetPassword from '../components/ResetPassword.vue';
 import SecurityLayout from '../components/Security/Layout.vue';
 import Signup from '../components/Signup.vue';
 import telemetryCookies from '../services/telemetryCookies';
-import {
-  KKuzzleActionsTypes,
-  KKuzzleGettersTypes,
-  type RootState,
-  StoreNamespaceTypes,
-} from '@/store';
+import { useKuzzleStore } from '@/stores';
 import DataSubRoutes from './children/data';
 import SecuritySubRoutes from './children/security';
 
-Vue.use(VueRouter);
-
-export default function createRoutes(log, store: Store<RootState>) {
-  const environmentsGuard = async (from, to, next) => {
+export default function createRoutes(log) {
+  const environmentsGuard = async (_from, _to, next) => {
+    const kuzzleStore = useKuzzleStore();
     log.debug('Router:EnvironmentsGuard');
 
     try {
-      store.dispatch(`${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.LOAD_ENVIRONMENTS}`);
+      kuzzleStore.loadEnvironments();
     } catch (error) {
       log.error(
         'Something went wrong while loading the connections. The JSON content saved in the LocalStorage seems to be malformed.',
       );
-      log.error(error.message);
-    }
 
-    const hasEnvironment =
-      store.getters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.HAS_ENVIRONMENT}`];
-    const currentEnvironment =
-      store.getters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`];
-    const isCurrentEnvironmentValid =
-      store.getters[
-        `${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.IS_CURRENT_ENVIRONMENT_VALID}`
-      ];
+      log.error((error as Error).message);
+    }
 
-    if (hasEnvironment) {
+    if (kuzzleStore.hasEnvironment) {
       log.debug('Has environments');
 
-      if (!currentEnvironment) {
+      if (kuzzleStore.currentEnvironment == null) {
         log.debug('No environment selected');
         return next({ name: 'SelectEnvironment' });
       }
-      if (!isCurrentEnvironmentValid) {
+      if (!kuzzleStore.isCurrentEnvironmentValid) {
         log.debug('Current environment is not valid');
         return next({
           name: 'EditEnvironment',
-          params: { id: store.state.kuzzle.currentId },
+          params: { id: kuzzleStore.currentId },
         });
       }
       return next();
@@ -75,10 +59,10 @@ export default function createRoutes(log, store: Store<RootState>) {
       {
         path: '/create-connection',
         name: 'CreateEnvironment',
-        beforeEnter: async (from, to, next) => {
-          await store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.LOAD_ENVIRONMENTS}`,
-          );
+        beforeEnter: async (_from, _to, next) => {
+          const kuzzleStore = useKuzzleStore();
+          kuzzleStore.loadEnvironments();
+
           next();
         },
         props: true,
@@ -87,10 +71,10 @@ export default function createRoutes(log, store: Store<RootState>) {
       {
         path: '/edit-connection/:id',
         name: 'EditEnvironment',
-        beforeEnter: async (from, to, next) => {
-          await store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.LOAD_ENVIRONMENTS}`,
-          );
+        beforeEnter: async (_from, _to, next) => {
+          const kuzzleStore = useKuzzleStore();
+          kuzzleStore.loadEnvironments();
+
           next();
         },
         props: (route) => ({
@@ -101,10 +85,10 @@ export default function createRoutes(log, store: Store<RootState>) {
       {
         path: '/select-connection',
         name: 'SelectEnvironment',
-        beforeEnter: async (from, to, next) => {
-          await store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.LOAD_ENVIRONMENTS}`,
-          );
+        beforeEnter: async (_from, _to, next) => {
+          const kuzzleStore = useKuzzleStore();
+          kuzzleStore.loadEnvironments();
+
           next();
         },
         component: SelectEnvironmentPage,
diff --git a/src/services/createStore.ts b/src/services/createStore.ts
deleted file mode 100644
index 45827616a..000000000
--- a/src/services/createStore.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import Vuex, { type Store } from 'vuex';
-
-import {
-  type RootState,
-  StoreNamespaceTypes,
-  createAuthStoreModule,
-  createIndexStoreModule,
-  createKuzzleStoreModule,
-  createRoutingStoreModule,
-  createToasterStoreModule,
-} from '@/store';
-
-export function createStore(): Store<RootState> {
-  Vue.use(Vuex);
-
-  return new Vuex.Store<RootState>({
-    modules: {
-      [StoreNamespaceTypes.AUTH]: createAuthStoreModule(),
-      [StoreNamespaceTypes.INDEX]: createIndexStoreModule(),
-      [StoreNamespaceTypes.KUZZLE]: createKuzzleStoreModule(),
-      [StoreNamespaceTypes.ROUTING]: createRoutingStoreModule(),
-      [StoreNamespaceTypes.TOASTER]: createToasterStoreModule(),
-    },
-    strict: import.meta.env.NODE_ENV !== 'production',
-  });
-}
diff --git a/src/services/indexHelpers.ts b/src/services/indexHelpers.ts
index a967f4ae9..1a542ab4e 100644
--- a/src/services/indexHelpers.ts
+++ b/src/services/indexHelpers.ts
@@ -1,4 +1,4 @@
-import type { Index } from '@/store';
+import type { Index } from '@/stores';
 
 export const filterIndexesByKeyword = (indexes: Index[], word: string) => {
   if (!word || word === '') {
diff --git a/src/store/index.ts b/src/store/index.ts
deleted file mode 100644
index d439ead68..000000000
--- a/src/store/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './modules';
-export * from './namespace-types';
-export * from './types';
diff --git a/src/store/modules/Auth/actions.ts b/src/store/modules/Auth/actions.ts
deleted file mode 100644
index 149e2b9ab..000000000
--- a/src/store/modules/Auth/actions.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import type { ActionTree } from 'vuex';
-
-import { KKuzzleActionsTypes, KKuzzleGettersTypes } from '../Kuzzle';
-import { getKuzzleSdk } from '../utils';
-import { SessionUser } from '@/models/SessionUser';
-import { StoreNamespaceTypes } from '@/store/namespace-types';
-import type { RootState } from '@/store/types';
-import { KAuthActionsTypes, KAuthGettersTypes, KAuthMutationsTypes } from './constants';
-import type { AuthState } from './types';
-
-export const actions: ActionTree<AuthState, RootState> = {
-  async [KAuthActionsTypes.INIT](store) {
-    store.commit(KAuthMutationsTypes.RESET);
-    store.commit(KAuthMutationsTypes.SET_INITIALIZING, true);
-    await store.dispatch(KAuthActionsTypes.CHECK_FIRST_ADMIN);
-    await store.dispatch(KAuthActionsTypes.LOGIN_BY_TOKEN);
-  },
-  async [KAuthActionsTypes.CREATE_SINGLE_USE_TOKEN](store): Promise<string> {
-    const { result } = await getKuzzleSdk(store.rootGetters).query({
-      controller: 'auth',
-      action: 'createToken',
-      singleUse: true,
-    });
-
-    return result.token;
-  },
-  async [KAuthActionsTypes.SET_SESSION](store, token: string) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    await store.dispatch(
-      `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.UPDATE_TOKEN_CURRENT_ENVIRONMENT}`,
-      token,
-      { root: true },
-    );
-
-    if (token === null) {
-      store.commit(KAuthMutationsTypes.SET_CURRENT_USER, null);
-      store.commit(KAuthMutationsTypes.SET_TOKEN_VALID, false);
-      store.commit(KAuthMutationsTypes.SET_INITIALIZING, false);
-      return null;
-    }
-
-    if (token === 'anonymous') {
-      const sessionUser = new SessionUser();
-      const rights = await kuzzle.auth.getMyRights();
-      sessionUser.rights = rights;
-
-      store.commit(KAuthMutationsTypes.SET_CURRENT_USER, sessionUser);
-      store.commit(KAuthMutationsTypes.SET_TOKEN_VALID, true);
-      store.commit(KAuthMutationsTypes.SET_INITIALIZING, false);
-
-      return sessionUser;
-    }
-
-    const sessionUser = new SessionUser();
-    const user = await kuzzle.auth.getCurrentUser();
-    sessionUser.id = user._id;
-    sessionUser.token = token;
-    sessionUser.params = user._source;
-    const rights = await kuzzle.auth.getMyRights();
-    sessionUser.rights = rights;
-
-    store.commit(KAuthMutationsTypes.SET_CURRENT_USER, sessionUser);
-    store.commit(KAuthMutationsTypes.SET_TOKEN_VALID, true);
-    store.commit(KAuthMutationsTypes.SET_INITIALIZING, false);
-
-    return sessionUser;
-  },
-  async [KAuthActionsTypes.DO_LOGIN](store, credentials: { username: string; password: string }) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    kuzzle.jwt = null;
-
-    const jwt = await kuzzle.auth.login('local', credentials, '2h');
-    return await store.dispatch(KAuthActionsTypes.SET_SESSION, jwt);
-  },
-  async [KAuthActionsTypes.LOGIN_BY_TOKEN](store) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    const currentEnvironment =
-      store.rootGetters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`];
-
-    if (currentEnvironment.token === 'anonymous') {
-      kuzzle.jwt = null;
-      return await store.dispatch(KAuthActionsTypes.SET_SESSION, 'anonymous');
-    }
-
-    if (!currentEnvironment.token) {
-      kuzzle.jwt = null;
-      return await store.dispatch(KAuthActionsTypes.SET_SESSION, null);
-    } else {
-      const res = await kuzzle.auth.checkToken(currentEnvironment.token);
-
-      if (!res.valid) {
-        kuzzle.jwt = null;
-        return await store.dispatch(KAuthActionsTypes.SET_SESSION, null);
-      } else {
-        kuzzle.jwt = currentEnvironment.token;
-        return await store.dispatch(KAuthActionsTypes.SET_SESSION, currentEnvironment.token);
-      }
-    }
-  },
-  async [KAuthActionsTypes.CHECK_FIRST_ADMIN](store) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    try {
-      if (!(await kuzzle.server.adminExists({}))) {
-        return store.commit(KAuthMutationsTypes.SET_ADMIN_EXISTS, false);
-      }
-
-      return store.commit(KAuthMutationsTypes.SET_ADMIN_EXISTS, true);
-    } catch (error) {
-      if (
-        typeof error === 'object' &&
-        error !== null &&
-        'status' in error &&
-        (error.status === 403 || error.status === 401)
-      ) {
-        return store.commit(KAuthMutationsTypes.SET_ADMIN_EXISTS, true);
-      } else {
-        throw error;
-      }
-    }
-  },
-  async [KAuthActionsTypes.CHECK_TOKEN](store) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    const jwt =
-      store.rootGetters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.CURRENT_ENVIRONMENT}`]
-        .token;
-
-    if (!jwt) {
-      return false;
-    }
-
-    if (jwt === 'anonymous') {
-      return true;
-    }
-
-    const { valid } = await kuzzle.auth.checkToken(jwt);
-
-    if (!valid) {
-      await store.dispatch(KAuthActionsTypes.DO_LOGOUT);
-      await store.dispatch(KAuthActionsTypes.SET_SESSION, null);
-      return false;
-    }
-
-    kuzzle.jwt = jwt;
-
-    if (!store.getters[KAuthGettersTypes.USER]) {
-      await store.dispatch(KAuthActionsTypes.SET_SESSION, jwt);
-    }
-
-    return true;
-  },
-  async [KAuthActionsTypes.DO_LOGOUT](store) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    if (kuzzle.jwt) {
-      await kuzzle.auth.logout();
-    }
-
-    kuzzle.jwt = null;
-    store.dispatch(KAuthActionsTypes.SET_SESSION, null);
-
-    return await store.dispatch(KAuthActionsTypes.CHECK_FIRST_ADMIN);
-  },
-  async [KAuthActionsTypes.DO_RESET_PASSWORD](store, data) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    kuzzle.jwt = null;
-    const request = {
-      controller: 'kuzzle-plugin-auth-passport-local/password',
-      action: 'reset',
-      body: data,
-    };
-    const response = await kuzzle.query(request);
-    const jwt = response.result.jwt;
-    return await store.dispatch(KAuthActionsTypes.SET_SESSION, jwt);
-  },
-};
diff --git a/src/store/modules/Auth/constants/actions-types.ts b/src/store/modules/Auth/constants/actions-types.ts
deleted file mode 100644
index f45815a30..000000000
--- a/src/store/modules/Auth/constants/actions-types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum KAuthActionsTypes {
-  INIT = 'init',
-  CREATE_SINGLE_USE_TOKEN = 'createSingleUseToken',
-  SET_SESSION = 'setSession',
-  DO_LOGIN = 'doLogin',
-  LOGIN_BY_TOKEN = 'loginByToken',
-  CHECK_FIRST_ADMIN = 'checkFirstAdmin',
-  CHECK_TOKEN = 'checkToken',
-  DO_LOGOUT = 'doLogout',
-  DO_RESET_PASSWORD = 'doResetPassword',
-}
diff --git a/src/store/modules/Auth/constants/getters-types.ts b/src/store/modules/Auth/constants/getters-types.ts
deleted file mode 100644
index fc0a77576..000000000
--- a/src/store/modules/Auth/constants/getters-types.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export enum KAuthGettersTypes {
-  IS_AUTHENTICATED = 'isAuthenticated',
-  USER = 'user',
-  USER_PROFILES = 'userProfiles',
-  TOKEN_VALID = 'tokenValid',
-  ADMIN_ALREADY_EXISTS = 'adminAlreadyExists',
-
-  // Index
-  CAN_SEARCH_INDEX = 'canSearchIndex',
-  CAN_CREATE_INDEX = 'canCreateIndex',
-  CAN_DELETE_INDEX = 'canDeleteIndex',
-
-  // Collection
-  CAN_SEARCH_COLLECTION = 'canSearchCollection',
-  CAN_CREATE_COLLECTION = 'canCreateCollection',
-  CAN_EDIT_COLLECTION = 'canEditCollection',
-  CAN_TRUNCATE_COLLECTION = 'canTruncateCollection',
-
-  // Document CRUDL
-  CAN_READ_DOCUMENT = 'canReadDocument',
-  CAN_SEARCH_DOCUMENT = 'canSearchDocument',
-  CAN_CREATE_DOCUMENT = 'canCreateDocument',
-  CAN_EDIT_DOCUMENT = 'canEditDocument',
-  CAN_DELETE_DOCUMENT = 'canDeleteDocument',
-
-  // Realtime
-  CAN_SUBSCRIBE = 'canSubscribe',
-  CAN_PUBLISH = 'canPublish',
-  CAN_MANAGE_REALTIME = 'canManageRealtime',
-  CAN_MANAGE_DOCUMENTS = 'canManageDocuments',
-
-  // Roles
-  CAN_READ_ROLE = 'canReadRole',
-  CAN_SEARCH_ROLE = 'canSearchRole',
-  CAN_EDIT_ROLE = 'canEditRole',
-  CAN_CREATE_ROLE = 'canCreateRole',
-  CAN_DELETE_ROLE = 'canDeleteRole',
-  CAN_MANAGE_ROLES = 'canManageRoles',
-
-  // Profiles
-  CAN_READ_PROFILE = 'canReadProfile',
-  CAN_SEARCH_PROFILE = 'canSearchProfile',
-  CAN_EDIT_PROFILE = 'canEditProfile',
-  CAN_CREATE_PROFILE = 'canCreateProfile',
-  CAN_DELETE_PROFILE = 'canDeleteProfile',
-  CAN_MANAGE_PROFILES = 'canManageProfiles',
-
-  // Users
-  CAN_READ_USER = 'canReadUser',
-  CAN_SEARCH_USER = 'canSearchUser',
-  CAN_EDIT_USER = 'canEditUser',
-  CAN_CREATE_USER = 'canCreateUser',
-  CAN_DELETE_USER = 'canDeleteUser',
-  CAN_MANAGE_USERS = 'canManageUsers',
-  HAS_SECURITY_RIGHTS = 'hasSecurityRights',
-
-  // Server
-  CAN_GET_PUBLIC_API = 'canGetPublicApi',
-  CAN_GET_OPEN_API = 'canGetOpenApi',
-}
diff --git a/src/store/modules/Auth/constants/index.ts b/src/store/modules/Auth/constants/index.ts
deleted file mode 100644
index 0fa1d14c3..000000000
--- a/src/store/modules/Auth/constants/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions-types';
-export * from './getters-types';
-export * from './mutations-types';
diff --git a/src/store/modules/Auth/constants/mutations-types.ts b/src/store/modules/Auth/constants/mutations-types.ts
deleted file mode 100644
index d7d6950e1..000000000
--- a/src/store/modules/Auth/constants/mutations-types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum KAuthMutationsTypes {
-  SET_CURRENT_USER = 'setCurrentUser',
-  SET_TOKEN_VALID = 'setTokenValid',
-  SET_ADMIN_EXISTS = 'setAdminExists',
-  RESET = 'reset',
-  SET_INITIALIZING = 'setInitializing',
-}
diff --git a/src/store/modules/Auth/getters.ts b/src/store/modules/Auth/getters.ts
deleted file mode 100644
index 5b612aec3..000000000
--- a/src/store/modules/Auth/getters.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-import type { GetterTree } from 'vuex';
-
-import type { SessionUser } from '@/models/SessionUser';
-import type { RootState } from '@/store/types';
-import { KAuthGettersTypes } from './constants/getters-types';
-import type { AuthState } from './types';
-
-const isActionAllowed = (user, controller, action, index = '*', collection = '*'): boolean => {
-  if (!user) {
-    return false;
-  }
-
-  const rights = user.rights || [];
-
-  if (!rights || typeof rights !== 'object') {
-    throw new Error('rights parameter is mandatory for isActionAllowed function');
-  }
-  if (!controller || typeof controller !== 'string') {
-    throw new Error('controller parameter is mandatory for isActionAllowed function');
-  }
-  if (!action || typeof action !== 'string') {
-    throw new Error('action parameter is mandatory for isActionAllowed function');
-  }
-  // We filter in all the rights that match the request (including wildcards).
-  const filteredRights = rights
-    .filter(function (right) {
-      return right.controller === controller || right.controller === '*';
-    })
-    .filter(function (right) {
-      return right.action === action || right.action === '*';
-    })
-    .filter(function (right) {
-      return right.index === index || right.index === '*';
-    })
-    .filter(function (right) {
-      return right.collection === collection || right.collection === '*';
-    });
-
-  if (
-    filteredRights.some(function (item) {
-      return item.value === 'allowed';
-    }) &&
-    filteredRights.some(function (item) {
-      return item.value === 'denied';
-    })
-  ) {
-    return false;
-  } else if (
-    filteredRights.some(function (item) {
-      return item.value === 'allowed';
-    })
-  ) {
-    return true;
-  }
-  return false;
-};
-
-export const getters: GetterTree<AuthState, RootState> = {
-  [KAuthGettersTypes.IS_AUTHENTICATED](state): boolean {
-    return !!state?.user?.id;
-  },
-  [KAuthGettersTypes.USER](state): SessionUser | null {
-    return state.user;
-  },
-  [KAuthGettersTypes.USER_PROFILES](state): any {
-    return state.user?.params?.profiles || [];
-  },
-  [KAuthGettersTypes.TOKEN_VALID](state): boolean {
-    return state.tokenValid;
-  },
-  [KAuthGettersTypes.ADMIN_ALREADY_EXISTS](state): boolean {
-    return state.adminAlreadyExists;
-  },
-
-  // Index
-  [KAuthGettersTypes.CAN_SEARCH_INDEX](state): boolean {
-    if (state.user == null) {
-      return false;
-    }
-    const indexListRight = state.user.rights.filter(
-      (rights) =>
-        (rights.action === 'list' || rights.action === '*') &&
-        (rights.controller === 'index' || rights.controller === '*'),
-    );
-
-    return indexListRight[0] && indexListRight[0].value === 'allowed';
-  },
-  [KAuthGettersTypes.CAN_CREATE_INDEX](state): boolean {
-    return isActionAllowed(state.user, 'index', 'create');
-  },
-  [KAuthGettersTypes.CAN_DELETE_INDEX](state): (index: string) => boolean {
-    return (index) => isActionAllowed(state.user, 'index', 'delete', index);
-  },
-
-  // Collection
-  [KAuthGettersTypes.CAN_SEARCH_COLLECTION](state): (index: string) => boolean {
-    return (index) => isActionAllowed(state.user, 'collection', 'list', index);
-  },
-  [KAuthGettersTypes.CAN_CREATE_COLLECTION](state): (index: string) => boolean {
-    return (index) => isActionAllowed(state.user, 'collection', 'create', index);
-  },
-  [KAuthGettersTypes.CAN_EDIT_COLLECTION](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'collection', 'updateMapping', index, collection);
-  },
-  [KAuthGettersTypes.CAN_TRUNCATE_COLLECTION](
-    state,
-  ): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'collection', 'truncate', index, collection);
-  },
-
-  // Document CRUDL
-  [KAuthGettersTypes.CAN_READ_DOCUMENT](state): (index: string, collection: string) => boolean {
-    return (index, collection) => isActionAllowed(state.user, 'document', 'get', index, collection);
-  },
-  [KAuthGettersTypes.CAN_SEARCH_DOCUMENT](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'document', 'search', index, collection);
-  },
-  [KAuthGettersTypes.CAN_CREATE_DOCUMENT](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'document', 'create', index, collection);
-  },
-  [KAuthGettersTypes.CAN_EDIT_DOCUMENT](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'document', 'createOrReplace', index, collection);
-  },
-  [KAuthGettersTypes.CAN_DELETE_DOCUMENT](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'document', 'delete', index, collection);
-  },
-
-  // Realtime
-  [KAuthGettersTypes.CAN_SUBSCRIBE](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'realtime', 'subscribe', index, collection) &&
-      isActionAllowed(state.user, 'realtime', 'unsubscribe', index, collection);
-  },
-  [KAuthGettersTypes.CAN_PUBLISH](state): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      isActionAllowed(state.user, 'realtime', 'publish', index, collection);
-  },
-  [KAuthGettersTypes.CAN_MANAGE_REALTIME](
-    _state,
-    getters,
-  ): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      getters[KAuthGettersTypes.CAN_SUBSCRIBE](index, collection) ||
-      getters[KAuthGettersTypes.CAN_PUBLISH](index, collection);
-  },
-  [KAuthGettersTypes.CAN_MANAGE_DOCUMENTS](
-    _state,
-    getters,
-  ): (index: string, collection: string) => boolean {
-    return (index, collection) =>
-      getters[KAuthGettersTypes.CAN_READ_DOCUMENT](index, collection) ||
-      getters[KAuthGettersTypes.CAN_SEARCH_DOCUMENT](index, collection) ||
-      getters[KAuthGettersTypes.CAN_EDIT_DOCUMENT](index, collection) ||
-      getters[KAuthGettersTypes.CAN_CREATE_DOCUMENT](index, collection) ||
-      getters[KAuthGettersTypes.CAN_DELETE_DOCUMENT](index, collection);
-  },
-
-  // Roles
-  [KAuthGettersTypes.CAN_READ_ROLE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'getRole');
-  },
-  [KAuthGettersTypes.CAN_SEARCH_ROLE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'searchRoles');
-  },
-  [KAuthGettersTypes.CAN_EDIT_ROLE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'createOrReplaceRole');
-  },
-  [KAuthGettersTypes.CAN_CREATE_ROLE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'createRole');
-  },
-  [KAuthGettersTypes.CAN_DELETE_ROLE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'deleteRole');
-  },
-  [KAuthGettersTypes.CAN_MANAGE_ROLES](_state, getters): boolean {
-    return (
-      getters[KAuthGettersTypes.CAN_READ_ROLE] ||
-      getters[KAuthGettersTypes.CAN_SEARCH_ROLE] ||
-      getters[KAuthGettersTypes.CAN_EDIT_ROLE] ||
-      getters[KAuthGettersTypes.CAN_CREATE_ROLE] ||
-      getters[KAuthGettersTypes.CAN_DELETE_ROLE]
-    );
-  },
-
-  // Profiles
-  [KAuthGettersTypes.CAN_READ_PROFILE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'getProfile');
-  },
-  [KAuthGettersTypes.CAN_SEARCH_PROFILE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'searchProfiles');
-  },
-  [KAuthGettersTypes.CAN_EDIT_PROFILE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'createOrReplaceProfile');
-  },
-  [KAuthGettersTypes.CAN_CREATE_PROFILE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'createProfile');
-  },
-  [KAuthGettersTypes.CAN_DELETE_PROFILE](state): boolean {
-    return isActionAllowed(state.user, 'security', 'deleteProfile');
-  },
-  [KAuthGettersTypes.CAN_MANAGE_PROFILES](_state, getters): boolean {
-    return (
-      getters[KAuthGettersTypes.CAN_READ_PROFILE] ||
-      getters[KAuthGettersTypes.CAN_SEARCH_PROFILE] ||
-      getters[KAuthGettersTypes.CAN_EDIT_PROFILE] ||
-      getters[KAuthGettersTypes.CAN_CREATE_PROFILE] ||
-      getters[KAuthGettersTypes.CAN_DELETE_PROFILE]
-    );
-  },
-
-  // Users
-  [KAuthGettersTypes.CAN_READ_USER](state): boolean {
-    return isActionAllowed(state.user, 'security', 'getUser');
-  },
-  [KAuthGettersTypes.CAN_SEARCH_USER](state): boolean {
-    return isActionAllowed(state.user, 'security', 'searchUsers');
-  },
-  [KAuthGettersTypes.CAN_EDIT_USER](state): boolean {
-    return isActionAllowed(state.user, 'security', 'updateUser');
-  },
-  [KAuthGettersTypes.CAN_CREATE_USER](state): boolean {
-    return isActionAllowed(state.user, 'security', 'createUser');
-  },
-  [KAuthGettersTypes.CAN_DELETE_USER](state): boolean {
-    return isActionAllowed(state.user, 'security', 'deleteUser');
-  },
-  [KAuthGettersTypes.CAN_MANAGE_USERS](_state, getters): boolean {
-    return (
-      getters[KAuthGettersTypes.CAN_READ_USER] ||
-      getters[KAuthGettersTypes.CAN_SEARCH_USER] ||
-      getters[KAuthGettersTypes.CAN_EDIT_USER] ||
-      getters[KAuthGettersTypes.CAN_CREATE_USER] ||
-      getters[KAuthGettersTypes.CAN_DELETE_USER]
-    );
-  },
-  [KAuthGettersTypes.HAS_SECURITY_RIGHTS](_state, getters): boolean {
-    return (
-      getters[KAuthGettersTypes.CAN_MANAGE_ROLES] ||
-      getters[KAuthGettersTypes.CAN_MANAGE_PROFILES] ||
-      getters[KAuthGettersTypes.CAN_MANAGE_USERS]
-    );
-  },
-
-  // Server
-  [KAuthGettersTypes.CAN_GET_PUBLIC_API](state): boolean {
-    return isActionAllowed(state.user, 'server', 'publicApi');
-  },
-  [KAuthGettersTypes.CAN_GET_OPEN_API](state): boolean {
-    return isActionAllowed(state.user, 'server', 'openapi');
-  },
-};
diff --git a/src/store/modules/Auth/index.ts b/src/store/modules/Auth/index.ts
deleted file mode 100644
index d08c8ff60..000000000
--- a/src/store/modules/Auth/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './store';
-export * from './types';
diff --git a/src/store/modules/Auth/mutations.ts b/src/store/modules/Auth/mutations.ts
deleted file mode 100644
index 155ef5ab7..000000000
--- a/src/store/modules/Auth/mutations.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { MutationTree } from 'vuex';
-
-import { SessionUser } from '@/models/SessionUser';
-import { KAuthMutationsTypes } from './constants';
-import type { AuthState } from './types';
-
-export const mutations: MutationTree<AuthState> = {
-  [KAuthMutationsTypes.SET_CURRENT_USER](state, payload: SessionUser | null) {
-    state.user = payload;
-  },
-  [KAuthMutationsTypes.SET_TOKEN_VALID](state, payload: boolean) {
-    state.tokenValid = payload;
-  },
-  [KAuthMutationsTypes.SET_ADMIN_EXISTS](state, payload: boolean) {
-    state.adminAlreadyExists = payload;
-  },
-  [KAuthMutationsTypes.RESET](state) {
-    state.user = new SessionUser();
-    state.tokenValid = false;
-    state.adminAlreadyExists = false;
-    state.initializing = true;
-  },
-  [KAuthMutationsTypes.SET_INITIALIZING](state, payload: boolean) {
-    state.initializing = payload;
-  },
-};
diff --git a/src/store/modules/Auth/state.ts b/src/store/modules/Auth/state.ts
deleted file mode 100644
index 0fab7d251..000000000
--- a/src/store/modules/Auth/state.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SessionUser } from '@/models/SessionUser';
-import type { AuthState } from './types';
-
-export const state: AuthState = {
-  user: new SessionUser(),
-  tokenValid: false,
-  adminAlreadyExists: false,
-  initializing: true,
-};
diff --git a/src/store/modules/Auth/store.ts b/src/store/modules/Auth/store.ts
deleted file mode 100644
index 16d69a05c..000000000
--- a/src/store/modules/Auth/store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Module } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { actions } from './actions';
-import { getters } from './getters';
-import { mutations } from './mutations';
-import { state } from './state';
-import type { AuthState } from './types';
-
-const namespaced = true;
-
-export const createAuthStoreModule = (): Module<AuthState, RootState> => ({
-  namespaced,
-  state,
-  actions,
-  mutations,
-  getters,
-});
diff --git a/src/store/modules/Kuzzle/actions.ts b/src/store/modules/Kuzzle/actions.ts
deleted file mode 100644
index 406b871bb..000000000
--- a/src/store/modules/Kuzzle/actions.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import type { ActionTree } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { LS_ENVIRONMENTS, LS_LAST_ENV, NO_ADMIN_WARNING_HOSTS, SS_CURRENT_ENV } from '@/utils';
-import { KKuzzleActionsTypes, KKuzzleGettersTypes, KKuzzleMutationsTypes } from './constants';
-import type { KuzzleState } from './types';
-
-export const actions: ActionTree<KuzzleState, RootState> = {
-  [KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT](state, id: string) {
-    sessionStorage.setItem(SS_CURRENT_ENV, id);
-
-    state.commit(KKuzzleMutationsTypes.SET_CURRENT_ENVIRONMENT, id);
-  },
-  [KKuzzleActionsTypes.CREATE_ENVIRONMENT](store, payload) {
-    if (Object.keys(store.state.environments).includes(payload.id)) {
-      throw new Error(
-        `An environment with name ${payload.id} already exists. Please specify a different one.`,
-      );
-    }
-
-    store.commit(KKuzzleMutationsTypes.CREATE_ENVIRONMENT, payload);
-    localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(store.state.environments));
-
-    return payload.id;
-  },
-  [KKuzzleActionsTypes.DELETE_ENVIRONMENT](store, id) {
-    store.commit(KKuzzleMutationsTypes.DELETE_ENVIRONMENT, id);
-
-    if (store.state.currentId === id) {
-      store.dispatch(KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT, null);
-      sessionStorage.removeItem(SS_CURRENT_ENV);
-    }
-
-    localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(store.state.environments));
-  },
-  [KKuzzleActionsTypes.UPDATE_TOKEN_CURRENT_ENVIRONMENT](store, payload) {
-    store.commit(KKuzzleMutationsTypes.UPDATE_ENVIRONMENT, {
-      id: store.state.currentId,
-      environment: {
-        ...store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT],
-        token: payload,
-      },
-    });
-
-    localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(store.state.environments));
-  },
-  [KKuzzleActionsTypes.UPDATE_ENVIRONMENT](store, payload) {
-    let mustReconnect = false;
-
-    if (
-      payload.id === store.state.currentId &&
-      (payload.environment.host !== store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].host ||
-        payload.environment.port !== store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].port ||
-        payload.environment.ssl !== store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].ssl ||
-        payload.backendMajorVersion !==
-          store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].backendMajorVersion)
-    ) {
-      mustReconnect = true;
-    }
-
-    store.commit(KKuzzleMutationsTypes.UPDATE_ENVIRONMENT, {
-      id: payload.id,
-      environment: payload.environment,
-    });
-
-    localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(store.state.environments));
-
-    if (mustReconnect) {
-      store.dispatch(KKuzzleActionsTypes.SWITCH_ENVIRONMENT, payload.id);
-    }
-
-    return payload.id;
-  },
-  async [KKuzzleActionsTypes.CONNECT_TO_CURRENT_ENVIRONMENT](store) {
-    if (!store.getters[KKuzzleGettersTypes.HAS_ENVIRONMENT]) {
-      return;
-    }
-
-    if (!store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT]) {
-      throw new Error('No current environment selected');
-    }
-
-    store.commit(KKuzzleMutationsTypes.SET_ERROR_FROM_KUZZLE, null);
-
-    store.getters[KKuzzleGettersTypes.WRAPPER].disconnect();
-    store.commit(KKuzzleMutationsTypes.SET_CONNECTING, true);
-
-    try {
-      await store.getters[KKuzzleGettersTypes.WRAPPER].connectToEnvironment(
-        store.getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT],
-      );
-    } catch (error) {
-      if (typeof error === 'object' && error !== null && 'id' in error) {
-        store.dispatch(KKuzzleActionsTypes.ON_CONNECTION_ERROR, error);
-        return false;
-      }
-    }
-
-    return true;
-  },
-  async [KKuzzleActionsTypes.SWITCH_ENVIRONMENT](store, id: string) {
-    if (!id) {
-      throw new Error('No id provided');
-    }
-
-    const environment = store.getters[KKuzzleGettersTypes.ENVIRONMENTS][id];
-    if (!environment) {
-      throw new Error(`Id ${id} does not match any environment`);
-    }
-
-    await store.dispatch(KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT, id);
-    localStorage.setItem(LS_LAST_ENV, id);
-
-    return await store.dispatch(KKuzzleActionsTypes.CONNECT_TO_CURRENT_ENVIRONMENT);
-  },
-  [KKuzzleActionsTypes.ON_CONNECTION_ERROR](store, error: Error) {
-    store.commit(KKuzzleMutationsTypes.SET_CONNECTING, false);
-    store.commit(KKuzzleMutationsTypes.SET_ONLINE, true);
-    store.commit(KKuzzleMutationsTypes.SET_ERROR_FROM_KUZZLE, error.message);
-  },
-  [KKuzzleActionsTypes.LOAD_ENVIRONMENTS](store) {
-    const loadedEnv = JSON.parse(localStorage.getItem(LS_ENVIRONMENTS) || '{}');
-
-    Object.keys(loadedEnv).forEach((envName) => {
-      const env = loadedEnv[envName];
-
-      if (env.hideAdminWarning === undefined) {
-        env.hideAdminWarning = NO_ADMIN_WARNING_HOSTS.includes(env.host);
-      }
-
-      store.commit(KKuzzleMutationsTypes.CREATE_ENVIRONMENT, {
-        environment: env,
-        id: envName,
-      });
-    });
-
-    let currentId = sessionStorage.getItem(SS_CURRENT_ENV);
-    if (currentId) {
-      store.commit(KKuzzleMutationsTypes.SET_CURRENT_ENVIRONMENT, currentId);
-    } else {
-      currentId = localStorage.getItem(LS_LAST_ENV);
-      store.dispatch(KKuzzleActionsTypes.SET_CURRENT_ENVIRONMENT, currentId);
-    }
-  },
-};
diff --git a/src/store/modules/Kuzzle/constants/actions-types.ts b/src/store/modules/Kuzzle/constants/actions-types.ts
deleted file mode 100644
index 18bd969b3..000000000
--- a/src/store/modules/Kuzzle/constants/actions-types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum KKuzzleActionsTypes {
-  SET_CURRENT_ENVIRONMENT = 'setCurrentEnvironment',
-  CREATE_ENVIRONMENT = 'createEnvironment',
-  DELETE_ENVIRONMENT = 'deleteEnvironment',
-  UPDATE_TOKEN_CURRENT_ENVIRONMENT = 'updateTokenCurrentEnvironment',
-  UPDATE_ENVIRONMENT = 'updateEnvironment',
-  CONNECT_TO_CURRENT_ENVIRONMENT = 'connectToCurrentEnvironment',
-  SWITCH_ENVIRONMENT = 'switchEnvironment',
-  ON_CONNECTION_ERROR = 'onConnectionError',
-  LOAD_ENVIRONMENTS = 'loadEnvironments',
-}
diff --git a/src/store/modules/Kuzzle/constants/getters-types.ts b/src/store/modules/Kuzzle/constants/getters-types.ts
deleted file mode 100644
index 7343dd671..000000000
--- a/src/store/modules/Kuzzle/constants/getters-types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export enum KKuzzleGettersTypes {
-  WRAPPER = 'wrapper',
-  $KUZZLE = '$kuzzle',
-  CURRENT_ENVIRONMENT = 'currentEnvironment',
-  IS_CURRENT_ENVIRONMENT_VALID = 'isCurrentEnvironmentValid',
-  HAS_ENVIRONMENT = 'hasEnvironment',
-  ENVIRONMENTS = 'environments',
-}
diff --git a/src/store/modules/Kuzzle/constants/index.ts b/src/store/modules/Kuzzle/constants/index.ts
deleted file mode 100644
index 0fa1d14c3..000000000
--- a/src/store/modules/Kuzzle/constants/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions-types';
-export * from './getters-types';
-export * from './mutations-types';
diff --git a/src/store/modules/Kuzzle/constants/mutations-types.ts b/src/store/modules/Kuzzle/constants/mutations-types.ts
deleted file mode 100644
index f3ebe5b6f..000000000
--- a/src/store/modules/Kuzzle/constants/mutations-types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export enum KKuzzleMutationsTypes {
-  CREATE_ENVIRONMENT = 'createEnvironment',
-  UPDATE_ENVIRONMENT = 'updateEnvironment',
-  DELETE_ENVIRONMENT = 'deleteEnvironment',
-  SET_ERROR_FROM_KUZZLE = 'setErrorFromKuzzle',
-  SET_CURRENT_ENVIRONMENT = 'setCurrentEnvironment',
-  SET_CONNECTING = 'setConnecting',
-  SET_ONLINE = 'setOnline',
-}
diff --git a/src/store/modules/Kuzzle/getters.ts b/src/store/modules/Kuzzle/getters.ts
deleted file mode 100644
index a4cad1378..000000000
--- a/src/store/modules/Kuzzle/getters.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { GetterTree } from 'vuex';
-
-import * as kuzzleV1 from '@/services/kuzzleWrapper-v1';
-import * as kuzzleV2 from '@/services/kuzzleWrapper-v2';
-import type { RootState } from '@/store/types';
-import { isValidEnvironment } from '@/validators';
-import { KKuzzleGettersTypes } from './constants';
-import type { KuzzleState } from './types';
-
-export const getters: GetterTree<KuzzleState, RootState> = {
-  [KKuzzleGettersTypes.WRAPPER](_state, getters) {
-    if (!getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT]) {
-      return null;
-    }
-
-    switch (getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].backendMajorVersion) {
-      case 1:
-        return kuzzleV1.wrapper;
-      case 2:
-        return kuzzleV2.wrapper;
-      default:
-        throw new Error(
-          `No Kuzzle wrapper found for version ${getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].backendMajorVersion}`,
-        );
-    }
-  },
-  [KKuzzleGettersTypes.$KUZZLE](_state, getters) {
-    if (!getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT]) {
-      return null;
-    }
-
-    switch (getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].backendMajorVersion) {
-      case 1:
-        return kuzzleV1.kuzzle;
-      case 2:
-        return kuzzleV2.kuzzle;
-      default:
-        throw new Error(
-          `No Kuzzle SDK found for version ${getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT].backendMajorVersion}`,
-        );
-    }
-  },
-  [KKuzzleGettersTypes.CURRENT_ENVIRONMENT](state, getters) {
-    if (!getters[KKuzzleGettersTypes.HAS_ENVIRONMENT]) {
-      return null;
-    }
-
-    if (state.currentId === undefined) {
-      return null;
-    }
-
-    return state.environments[state.currentId];
-  },
-  [KKuzzleGettersTypes.IS_CURRENT_ENVIRONMENT_VALID](_state, getters) {
-    return isValidEnvironment(getters[KKuzzleGettersTypes.CURRENT_ENVIRONMENT]);
-  },
-  [KKuzzleGettersTypes.HAS_ENVIRONMENT](state) {
-    return Object.keys(state.environments).length !== 0;
-  },
-  [KKuzzleGettersTypes.ENVIRONMENTS](state) {
-    return state.environments;
-  },
-};
diff --git a/src/store/modules/Kuzzle/index.ts b/src/store/modules/Kuzzle/index.ts
deleted file mode 100644
index d08c8ff60..000000000
--- a/src/store/modules/Kuzzle/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './store';
-export * from './types';
diff --git a/src/store/modules/Kuzzle/mutations.ts b/src/store/modules/Kuzzle/mutations.ts
deleted file mode 100644
index 4e45d0961..000000000
--- a/src/store/modules/Kuzzle/mutations.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import Vue from 'vue';
-import type { MutationTree } from 'vuex';
-
-import { KKuzzleMutationsTypes } from './constants';
-import type { CreateEnvironmentPayload, KuzzleState, UpdateEnvironmentPayload } from './types';
-
-export const mutations: MutationTree<KuzzleState> = {
-  [KKuzzleMutationsTypes.CREATE_ENVIRONMENT](state, payload: CreateEnvironmentPayload) {
-    if (Object.keys(state.environments).includes(payload.id)) {
-      return;
-    }
-
-    try {
-      state.environments = {
-        ...state.environments,
-        [payload.id]: payload.environment,
-      };
-    } catch (error) {
-      throw new Error(`[${payload.id}] - ${(error as Error).message}`);
-    }
-  },
-  [KKuzzleMutationsTypes.UPDATE_ENVIRONMENT](state, payload: UpdateEnvironmentPayload) {
-    if (!Object.keys(state.environments).includes(payload.id)) {
-      throw new Error(`The given id ${payload.id} does not correspond to any existing
-        environment.`);
-    }
-
-    state.environments = {
-      ...state.environments,
-      [payload.id]: payload.environment,
-    };
-  },
-  [KKuzzleMutationsTypes.DELETE_ENVIRONMENT](state, id) {
-    if (!Object.keys(state.environments).includes(id)) {
-      return;
-    }
-
-    Vue.delete(state.environments, id);
-  },
-  [KKuzzleMutationsTypes.SET_ERROR_FROM_KUZZLE](state, error) {
-    state.errorFromKuzzle = error;
-  },
-  [KKuzzleMutationsTypes.SET_CURRENT_ENVIRONMENT](state, payload) {
-    state.currentId = payload;
-  },
-  [KKuzzleMutationsTypes.SET_CONNECTING](state, value: boolean) {
-    state.connecting = value;
-  },
-  [KKuzzleMutationsTypes.SET_ONLINE](state, value: boolean) {
-    state.online = value;
-  },
-};
diff --git a/src/store/modules/Kuzzle/state.ts b/src/store/modules/Kuzzle/state.ts
deleted file mode 100644
index cb27fd078..000000000
--- a/src/store/modules/Kuzzle/state.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { KuzzleState } from './types';
-
-export const state: KuzzleState = {
-  environments: {},
-  currentId: undefined,
-  connecting: true,
-  online: false,
-  errorFromKuzzle: undefined,
-};
diff --git a/src/store/modules/Kuzzle/store.ts b/src/store/modules/Kuzzle/store.ts
deleted file mode 100644
index f3d9770d9..000000000
--- a/src/store/modules/Kuzzle/store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Module } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { actions } from './actions';
-import { getters } from './getters';
-import { mutations } from './mutations';
-import { state } from './state';
-import type { KuzzleState } from './types';
-
-const namespaced = true;
-
-export const createKuzzleStoreModule = (): Module<KuzzleState, RootState> => ({
-  namespaced,
-  state,
-  actions,
-  mutations,
-  getters,
-});
diff --git a/src/store/modules/Routing/constants/getters-types.ts b/src/store/modules/Routing/constants/getters-types.ts
deleted file mode 100644
index 2f1fa0598..000000000
--- a/src/store/modules/Routing/constants/getters-types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum KRoutingGettersTypes {
-  ROUTE_BEFORE_REDIRECT = 'routeBeforeRedirect',
-}
diff --git a/src/store/modules/Routing/constants/index.ts b/src/store/modules/Routing/constants/index.ts
deleted file mode 100644
index 17d093865..000000000
--- a/src/store/modules/Routing/constants/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './getters-types';
-export * from './mutations-types';
diff --git a/src/store/modules/Routing/constants/mutations-types.ts b/src/store/modules/Routing/constants/mutations-types.ts
deleted file mode 100644
index a685b8626..000000000
--- a/src/store/modules/Routing/constants/mutations-types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum KRoutingMutationsTypes {
-  SET_ROUTE_BEFORE_REDIRECT = 'setRouteBeforeRedirect',
-}
diff --git a/src/store/modules/Routing/getters.ts b/src/store/modules/Routing/getters.ts
deleted file mode 100644
index 10b5d696b..000000000
--- a/src/store/modules/Routing/getters.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { GetterTree } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { KRoutingGettersTypes } from './constants';
-import type { RoutingState } from './types';
-
-export const getters: GetterTree<RoutingState, RootState> = {
-  [KRoutingGettersTypes.ROUTE_BEFORE_REDIRECT](state) {
-    return state.routeBeforeRedirect;
-  },
-};
diff --git a/src/store/modules/Routing/index.ts b/src/store/modules/Routing/index.ts
deleted file mode 100644
index d08c8ff60..000000000
--- a/src/store/modules/Routing/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './store';
-export * from './types';
diff --git a/src/store/modules/Routing/mutations.ts b/src/store/modules/Routing/mutations.ts
deleted file mode 100644
index 5315e59a7..000000000
--- a/src/store/modules/Routing/mutations.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { MutationTree } from 'vuex';
-
-import { KRoutingMutationsTypes } from './constants';
-import type { RoutingState } from './types';
-
-export const mutations: MutationTree<RoutingState> = {
-  [KRoutingMutationsTypes.SET_ROUTE_BEFORE_REDIRECT](state, value) {
-    state.routeBeforeRedirect = value;
-  },
-};
diff --git a/src/store/modules/Routing/state.ts b/src/store/modules/Routing/state.ts
deleted file mode 100644
index f7979a361..000000000
--- a/src/store/modules/Routing/state.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { RoutingState } from './types';
-
-export const state: RoutingState = {
-  routeBeforeRedirect: undefined,
-};
diff --git a/src/store/modules/Routing/store.ts b/src/store/modules/Routing/store.ts
deleted file mode 100644
index b65f47c7b..000000000
--- a/src/store/modules/Routing/store.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Module } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { getters } from './getters';
-import { mutations } from './mutations';
-import { state } from './state';
-import type { RoutingState } from './types';
-
-const namespaced = true;
-
-export const createRoutingStoreModule = (): Module<RoutingState, RootState> => ({
-  namespaced,
-  state,
-  mutations,
-  getters,
-});
diff --git a/src/store/modules/StorageIndex/actions.ts b/src/store/modules/StorageIndex/actions.ts
deleted file mode 100644
index c74602459..000000000
--- a/src/store/modules/StorageIndex/actions.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import _ from 'lodash';
-import type { ActionTree } from 'vuex';
-
-import { getKuzzleSdk, getKuzzleWrapper } from '../utils';
-import type { RootState } from '@/store/types';
-import { KIndexActionsTypes, KIndexMutationsTypes } from './constants';
-import {
-  Collection,
-  type CreateCollectionPayload,
-  Index,
-  type IndexCollectionPayload,
-  type IndexCollectionsPayload,
-  type IndexState,
-  type UpdateCollectionPayload,
-} from './types';
-
-export const actions: ActionTree<IndexState, RootState> = {
-  async [KIndexActionsTypes.CREATE_INDEX](store, indexName: string) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    await kuzzle.index.create(indexName);
-    const index = new Index(indexName);
-
-    store.commit(KIndexMutationsTypes.ADD_INDEX, index);
-  },
-  async [KIndexActionsTypes.DELETE_INDEX](store, index: Index) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    await kuzzle.index.delete(index.name);
-
-    store.commit(KIndexMutationsTypes.REMOVE_INDEX, index);
-  },
-  async [KIndexActionsTypes.BULK_DELETE_INDEXES](store, indexes: Index[]) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    const indexesNames = indexes.map((el) => el.name);
-
-    await kuzzle.index.mDelete(indexesNames);
-    store.commit(KIndexMutationsTypes.REMOVE_INDEXES, indexes);
-  },
-  async [KIndexActionsTypes.FETCH_INDEX_LIST](store) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    const indexes: Index[] = [];
-    store.commit(KIndexMutationsTypes.SET_LOADING_INDEXES, true);
-
-    const result = await kuzzle.index.list();
-
-    for (const indexName of result) {
-      indexes.push(new Index(indexName));
-    }
-
-    // remove deleted indexes
-    _.differenceBy(store.state.indexes, indexes, 'name').forEach((el) => {
-      store.commit(KIndexMutationsTypes.REMOVE_INDEX, el);
-    });
-
-    // add new indexes
-    _.differenceBy(indexes, store.state.indexes, 'name').forEach((el) => {
-      store.commit(KIndexMutationsTypes.ADD_INDEX, el);
-    });
-
-    store.commit(KIndexMutationsTypes.SET_LOADING_INDEXES, false);
-  },
-  async [KIndexActionsTypes.FETCH_COLLECTION_LIST](store, index: Index) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    store.commit(KIndexMutationsTypes.SET_LOADING_COLLECTIONS, { index, loading: true });
-
-    const result = await kuzzle.collection.list(index.name);
-
-    const collections = result.collections
-      .filter((el) => {
-        if (
-          el.type === 'realtime' &&
-          result.collections.find(
-            (findEl) => findEl.name === el.name && findEl.type === 'stored',
-          ) != null
-        ) {
-          return false;
-        }
-        return true;
-      })
-      .map((el) => {
-        return new Collection(el.name, el.type);
-      });
-
-    if (index.collections == null) {
-      store.commit(KIndexMutationsTypes.SET_COLLECTIONS, {
-        index,
-        collections,
-      });
-    } else {
-      // remove deleted collections
-      _.differenceBy(index.collections, collections, 'name').forEach((el) => {
-        store.commit(KIndexMutationsTypes.REMOVE_COLLECTION, el);
-      });
-
-      // add new collections
-      _.differenceBy(collections, index.collections, 'name').forEach((el) => {
-        store.commit(KIndexMutationsTypes.ADD_COLLECTION, el);
-      });
-    }
-
-    store.commit(KIndexMutationsTypes.SET_LOADING_COLLECTIONS, { index, loading: false });
-  },
-  async [KIndexActionsTypes.CREATE_COLLECTION](
-    store,
-    { index, name, mapping }: CreateCollectionPayload,
-  ) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    if (name.length === 0) {
-      throw new Error('Invalid collection name');
-    }
-
-    if (index.doesCollectionExist(name)) {
-      throw new Error(`Collection "${name}" already exists`);
-    }
-
-    const collection = new Collection(name, 'stored');
-
-    collection.mapping = mapping;
-
-    await kuzzle.collection.create(index.name, name, mapping);
-
-    store.commit(KIndexMutationsTypes.ADD_COLLECTION, { index, collection });
-  },
-  async [KIndexActionsTypes.UPDATE_COLLECTION](
-    store,
-    { index, name, mapping }: UpdateCollectionPayload,
-  ) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    if (!index.doesCollectionExist(name)) {
-      throw new Error(`Collection "${name}" doesn't exist`);
-    }
-
-    const updatedCollection = new Collection(name, 'stored');
-
-    updatedCollection.mapping = mapping;
-
-    // TODO: use dedicated SDK method instead of query
-    await kuzzle.query({
-      controller: 'collection',
-      action: 'updateMapping',
-      collection: name,
-      index: index.name,
-      body: mapping,
-    });
-
-    store.commit(KIndexMutationsTypes.UPDATE_COLLECTION, { index, collection: updatedCollection });
-  },
-  async [KIndexActionsTypes.DELETE_COLLECTION](
-    store,
-    { index, collection }: IndexCollectionPayload,
-  ) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-
-    if (!index.doesCollectionExist(collection.name)) {
-      throw new Error(`Collection "${collection.name}" doesn't exist`);
-    }
-
-    await kuzzle.collection.delete(index.name, collection.name);
-
-    store.commit(KIndexMutationsTypes.REMOVE_COLLECTION, { index, collection });
-  },
-  async [KIndexActionsTypes.BULK_DELETE_COLLECTIONS](
-    store,
-    { index, collections }: IndexCollectionsPayload,
-  ) {
-    const kuzzle = getKuzzleSdk(store.rootGetters);
-    store.commit(KIndexMutationsTypes.SET_LOADING_COLLECTIONS, { index, loading: true });
-
-    for (const collection of collections) {
-      await kuzzle.collection.delete(index.name, collection.name);
-
-      store.commit(KIndexMutationsTypes.REMOVE_COLLECTION, { index, collection });
-    }
-
-    store.commit(KIndexMutationsTypes.SET_LOADING_COLLECTIONS, { index, loading: false });
-  },
-  async [KIndexActionsTypes.FETCH_COLLECTION_MAPPING](
-    store,
-    { index, collection }: IndexCollectionPayload,
-  ) {
-    if (!index.doesCollectionExist(collection.name)) {
-      throw new Error(`Collection "${collection.name}" doesn't exist`);
-    }
-
-    const kuzzleMapping = await getKuzzleWrapper(store.rootGetters)?.getMappingDocument(
-      collection.name,
-      index.name,
-    );
-
-    const updatedCollection = new Collection(collection.name, 'stored');
-
-    updatedCollection.mapping = kuzzleMapping.properties;
-    updatedCollection.dynamic = kuzzleMapping.dynamic;
-
-    store.commit(KIndexMutationsTypes.UPDATE_COLLECTION, { index, collection: updatedCollection });
-  },
-};
diff --git a/src/store/modules/StorageIndex/constants/actions-types.ts b/src/store/modules/StorageIndex/constants/actions-types.ts
deleted file mode 100644
index 5466daa9d..000000000
--- a/src/store/modules/StorageIndex/constants/actions-types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum KIndexActionsTypes {
-  CREATE_INDEX = 'createIndex',
-  DELETE_INDEX = 'deleteIndex',
-  BULK_DELETE_INDEXES = 'bulkDeleteIndexes',
-  FETCH_INDEX_LIST = 'fetchIndexList',
-  FETCH_COLLECTION_LIST = 'fetchCollectionList',
-  CREATE_COLLECTION = 'createCollection',
-  UPDATE_COLLECTION = 'updateCollection',
-  DELETE_COLLECTION = 'deleteCollection',
-  BULK_DELETE_COLLECTIONS = 'bulkDeleteCollections',
-  FETCH_COLLECTION_MAPPING = 'fetchCollectionMapping',
-}
diff --git a/src/store/modules/StorageIndex/constants/getters-types.ts b/src/store/modules/StorageIndex/constants/getters-types.ts
deleted file mode 100644
index b6c63d2bd..000000000
--- a/src/store/modules/StorageIndex/constants/getters-types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export enum KIndexGettersTypes {
-  GET_ONE_INDEX = 'getOneIndex',
-  INDEXES = 'indexes',
-  LOADING_INDEXES = 'loadingIndexes',
-  LOADING_COLLECTIONS = 'loadingCollections',
-  COLLECTIONS = 'collections',
-  GET_ONE_COLLECTION = 'getOneCollection',
-}
diff --git a/src/store/modules/StorageIndex/constants/index.ts b/src/store/modules/StorageIndex/constants/index.ts
deleted file mode 100644
index 0fa1d14c3..000000000
--- a/src/store/modules/StorageIndex/constants/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions-types';
-export * from './getters-types';
-export * from './mutations-types';
diff --git a/src/store/modules/StorageIndex/constants/mutations-types.ts b/src/store/modules/StorageIndex/constants/mutations-types.ts
deleted file mode 100644
index 5fb152a8e..000000000
--- a/src/store/modules/StorageIndex/constants/mutations-types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export enum KIndexMutationsTypes {
-  RESET = 'reset',
-  SET_LOADING_INDEXES = 'setLoadingIndexes',
-  SET_LOADING_COLLECTIONS = 'setLoadingCollections',
-  SET_INDEXES = 'setIndexes',
-  SET_COLLECTIONS = 'setCollections',
-  ADD_COLLECTION = 'addCollection',
-  UPDATE_COLLECTION = 'updateCollection',
-  ADD_INDEX = 'addIndex',
-  REMOVE_INDEX = 'removeIndex',
-  REMOVE_INDEXES = 'removeIndexes',
-  REMOVE_COLLECTION = 'removeCollection',
-}
diff --git a/src/store/modules/StorageIndex/getters.ts b/src/store/modules/StorageIndex/getters.ts
deleted file mode 100644
index 10610db39..000000000
--- a/src/store/modules/StorageIndex/getters.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { GetterTree } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { KIndexGettersTypes } from './constants';
-import type { Index, IndexState } from './types';
-
-export const getters: GetterTree<IndexState, RootState> = {
-  [KIndexGettersTypes.GET_ONE_INDEX](state) {
-    return (indexName: string) => {
-      return state.indexes.find((el) => el.name === indexName);
-    };
-  },
-  [KIndexGettersTypes.INDEXES](state) {
-    return state.indexes;
-  },
-  [KIndexGettersTypes.LOADING_INDEXES](state) {
-    return state.loadingIndexes;
-  },
-  [KIndexGettersTypes.LOADING_COLLECTIONS](state) {
-    return (indexName: string) => {
-      const index = state.indexes.find((el) => el.name === indexName);
-      return index != null ? index.loading : false;
-    };
-  },
-  [KIndexGettersTypes.COLLECTIONS](state) {
-    return (indexName: string) => {
-      const index = state.indexes.find((el) => el.name === indexName);
-      return index != null ? index.collections : [];
-    };
-  },
-  [KIndexGettersTypes.GET_ONE_COLLECTION](state) {
-    return (index: Index, collectionName: string) => {
-      return index.getOneCollection(collectionName);
-    };
-  },
-};
diff --git a/src/store/modules/StorageIndex/index.ts b/src/store/modules/StorageIndex/index.ts
deleted file mode 100644
index d08c8ff60..000000000
--- a/src/store/modules/StorageIndex/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './store';
-export * from './types';
diff --git a/src/store/modules/StorageIndex/mutations.ts b/src/store/modules/StorageIndex/mutations.ts
deleted file mode 100644
index d6e8d202e..000000000
--- a/src/store/modules/StorageIndex/mutations.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { MutationTree } from 'vuex';
-
-import { getIndexPosition } from '@/services/indexHelpers';
-import { KIndexMutationsTypes } from './constants';
-import type {
-  Index,
-  IndexCollectionPayload,
-  IndexCollectionsPayload,
-  IndexLoadingCollectionsPayload,
-  IndexState,
-} from './types';
-
-export const mutations: MutationTree<IndexState> = {
-  [KIndexMutationsTypes.RESET](state) {
-    state.indexes = [];
-    state.loadingIndexes = false;
-  },
-  [KIndexMutationsTypes.SET_LOADING_INDEXES](state, value: boolean) {
-    state.loadingIndexes = value;
-  },
-  [KIndexMutationsTypes.SET_LOADING_COLLECTIONS](
-    state,
-    { index, loading }: IndexLoadingCollectionsPayload,
-  ) {
-    state.indexes[getIndexPosition(state.indexes, index.name)].loading = loading;
-  },
-  [KIndexMutationsTypes.SET_INDEXES](state, indexes: Index[]) {
-    state.indexes = indexes;
-  },
-  [KIndexMutationsTypes.SET_COLLECTIONS](state, { index, collections }: IndexCollectionsPayload) {
-    index.collections = collections;
-  },
-  [KIndexMutationsTypes.ADD_COLLECTION](state, { index, collection }: IndexCollectionPayload) {
-    state.indexes[getIndexPosition(state.indexes, index.name)].addCollection(collection);
-  },
-  [KIndexMutationsTypes.UPDATE_COLLECTION](state, { index, collection }: IndexCollectionPayload) {
-    if (index.collections == null) {
-      return;
-    }
-
-    const collectionPosition = index.collections.findIndex((el) => el.name === collection.name);
-
-    index.collections[collectionPosition] = collection;
-  },
-  [KIndexMutationsTypes.ADD_INDEX](state, index: Index) {
-    state.indexes.push(index);
-  },
-  [KIndexMutationsTypes.REMOVE_INDEX](state, index: Index) {
-    state.indexes.splice(getIndexPosition(state.indexes, index.name), 1);
-  },
-  [KIndexMutationsTypes.REMOVE_INDEXES](state, indexes: Index[]) {
-    const keptIndexes = state.indexes.filter((el) => !indexes.includes(el));
-    state.indexes = keptIndexes;
-  },
-  [KIndexMutationsTypes.REMOVE_COLLECTION](state, { index, collection }: IndexCollectionPayload) {
-    state.indexes[getIndexPosition(state.indexes, index.name)].removeCollection(collection);
-  },
-};
diff --git a/src/store/modules/StorageIndex/state.ts b/src/store/modules/StorageIndex/state.ts
deleted file mode 100644
index 6845119c1..000000000
--- a/src/store/modules/StorageIndex/state.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { IndexState } from './types';
-
-export const state: IndexState = {
-  indexes: [],
-  loadingIndexes: false,
-};
diff --git a/src/store/modules/StorageIndex/store.ts b/src/store/modules/StorageIndex/store.ts
deleted file mode 100644
index 5a08e1c31..000000000
--- a/src/store/modules/StorageIndex/store.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Module } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { actions } from './actions';
-import { getters } from './getters';
-import { mutations } from './mutations';
-import { state } from './state';
-import type { IndexState } from './types';
-
-const namespaced = true;
-
-export const createIndexStoreModule = (): Module<IndexState, RootState> => ({
-  namespaced,
-  state,
-  actions,
-  mutations,
-  getters,
-});
diff --git a/src/store/modules/Toaster/constants/index.ts b/src/store/modules/Toaster/constants/index.ts
deleted file mode 100644
index a683729ba..000000000
--- a/src/store/modules/Toaster/constants/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './mutations-types';
diff --git a/src/store/modules/Toaster/constants/mutations-types.ts b/src/store/modules/Toaster/constants/mutations-types.ts
deleted file mode 100644
index d4a1912a5..000000000
--- a/src/store/modules/Toaster/constants/mutations-types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum KToasterMutationsTypes {
-  SET_TOAST = 'setToast',
-}
diff --git a/src/store/modules/Toaster/index.ts b/src/store/modules/Toaster/index.ts
deleted file mode 100644
index d08c8ff60..000000000
--- a/src/store/modules/Toaster/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants';
-export * from './store';
-export * from './types';
diff --git a/src/store/modules/Toaster/mutations.ts b/src/store/modules/Toaster/mutations.ts
deleted file mode 100644
index 73a9fb652..000000000
--- a/src/store/modules/Toaster/mutations.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { MutationTree } from 'vuex';
-
-import { KToasterMutationsTypes } from './constants';
-import type { ToasterState } from './types';
-
-export const mutations: MutationTree<ToasterState> = {
-  [KToasterMutationsTypes.SET_TOAST](state, payload) {
-    state.toast = {
-      text: null,
-      duration: 5000,
-      cssClass: 'error',
-      cb: null,
-      ...payload,
-    };
-  },
-};
diff --git a/src/store/modules/Toaster/state.ts b/src/store/modules/Toaster/state.ts
deleted file mode 100644
index 67d4f5fa5..000000000
--- a/src/store/modules/Toaster/state.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ToasterState } from './types';
-
-export const state: ToasterState = {
-  toast: {},
-};
diff --git a/src/store/modules/Toaster/store.ts b/src/store/modules/Toaster/store.ts
deleted file mode 100644
index 2592bb39e..000000000
--- a/src/store/modules/Toaster/store.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Module } from 'vuex';
-
-import type { RootState } from '@/store/types';
-import { mutations } from './mutations';
-import { state } from './state';
-import type { ToasterState } from './types';
-
-const namespaced = true;
-
-export const createToasterStoreModule = (): Module<ToasterState, RootState> => ({
-  namespaced,
-  state,
-  mutations,
-});
diff --git a/src/store/modules/Toaster/types.ts b/src/store/modules/Toaster/types.ts
deleted file mode 100644
index 5c9c72fa6..000000000
--- a/src/store/modules/Toaster/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ToasterState {
-  toast: object;
-}
diff --git a/src/store/modules/index.ts b/src/store/modules/index.ts
deleted file mode 100644
index 0f0a7b5d3..000000000
--- a/src/store/modules/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './Auth';
-export * from './Kuzzle';
-export * from './Routing';
-export * from './StorageIndex';
-export * from './Toaster';
diff --git a/src/store/modules/utils.ts b/src/store/modules/utils.ts
deleted file mode 100644
index be047be92..000000000
--- a/src/store/modules/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Kuzzle } from 'kuzzle-sdk-v7';
-
-import { StoreNamespaceTypes } from '../namespace-types';
-import type { KuzzleWrapperV1 } from '@/services/kuzzleWrapper-v1';
-import type { KuzzleWrapperV2 } from '@/services/kuzzleWrapper-v2';
-import { KKuzzleGettersTypes } from './Kuzzle';
-
-export const getKuzzleSdk = (rootGetters): Kuzzle => {
-  return rootGetters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.$KUZZLE}`];
-};
-
-export const getKuzzleWrapper = (rootGetters): KuzzleWrapperV1 & KuzzleWrapperV2 => {
-  return rootGetters[`${StoreNamespaceTypes.KUZZLE}/${KKuzzleGettersTypes.WRAPPER}`];
-};
diff --git a/src/store/namespace-types.ts b/src/store/namespace-types.ts
deleted file mode 100644
index 850414e56..000000000
--- a/src/store/namespace-types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum StoreNamespaceTypes {
-  AUTH = 'auth',
-  INDEX = 'index',
-  KUZZLE = 'kuzzle',
-  ROUTING = 'routing',
-  TOASTER = 'toaster',
-}
diff --git a/src/store/types.ts b/src/store/types.ts
deleted file mode 100644
index 28f0d9b11..000000000
--- a/src/store/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { AuthState } from './modules/Auth/types';
-import type { KuzzleState } from './modules/Kuzzle/types';
-import type { RoutingState } from './modules/Routing/types';
-import type { IndexState } from './modules/StorageIndex/types';
-import type { ToasterState } from './modules/Toaster/types';
-
-export interface RootState {
-  strict: boolean;
-  auth: AuthState;
-  index: IndexState;
-  kuzzle: KuzzleState;
-  routing: RoutingState;
-  toaster: ToasterState;
-}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
new file mode 100644
index 000000000..500434c30
--- /dev/null
+++ b/src/stores/auth.ts
@@ -0,0 +1,451 @@
+import { defineStore } from 'pinia';
+
+import { SessionUser } from '@/models/SessionUser';
+import { useKuzzleStore } from './kuzzle';
+import type { AuthState } from './types/auth';
+
+const isActionAllowed = (user, controller, action, index = '*', collection = '*'): boolean => {
+  if (!user) {
+    return false;
+  }
+
+  const rights = user.rights || [];
+
+  if (!rights || typeof rights !== 'object') {
+    throw new Error('rights parameter is mandatory for isActionAllowed function');
+  }
+  if (!controller || typeof controller !== 'string') {
+    throw new Error('controller parameter is mandatory for isActionAllowed function');
+  }
+  if (!action || typeof action !== 'string') {
+    throw new Error('action parameter is mandatory for isActionAllowed function');
+  }
+  // We filter in all the rights that match the request (including wildcards).
+  const filteredRights = rights
+    .filter(function (right) {
+      return right.controller === controller || right.controller === '*';
+    })
+    .filter(function (right) {
+      return right.action === action || right.action === '*';
+    })
+    .filter(function (right) {
+      return right.index === index || right.index === '*';
+    })
+    .filter(function (right) {
+      return right.collection === collection || right.collection === '*';
+    });
+
+  if (
+    filteredRights.some(function (item) {
+      return item.value === 'allowed';
+    }) &&
+    filteredRights.some(function (item) {
+      return item.value === 'denied';
+    })
+  ) {
+    return false;
+  } else if (
+    filteredRights.some(function (item) {
+      return item.value === 'allowed';
+    })
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthState => ({
+    user: new SessionUser(),
+    tokenValid: false,
+    adminAlreadyExists: false,
+    initializing: true,
+  }),
+  getters: {
+    isAuthenticated(state): boolean {
+      return !!state?.user?.id;
+    },
+    userProfiles(state): any {
+      return state.user?.params?.profiles || [];
+    },
+
+    // Index
+    canSearchIndex(state): boolean {
+      if (state.user == null) {
+        return false;
+      }
+      const indexListRight = state.user.rights.filter(
+        (rights) =>
+          (rights.action === 'list' || rights.action === '*') &&
+          (rights.controller === 'index' || rights.controller === '*'),
+      );
+
+      return indexListRight[0] && indexListRight[0].value === 'allowed';
+    },
+    canCreateIndex(state): boolean {
+      return isActionAllowed(state.user, 'index', 'create');
+    },
+    canDeleteIndex(state): (index: string) => boolean {
+      return (index) => isActionAllowed(state.user, 'index', 'delete', index);
+    },
+
+    // Collection
+    canSearchCollection(state): (index: string) => boolean {
+      return (index) => isActionAllowed(state.user, 'collection', 'list', index);
+    },
+    canCreateCollection(state): (index: string) => boolean {
+      return (index) => isActionAllowed(state.user, 'collection', 'create', index);
+    },
+    canEditCollection(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'collection', 'updateMapping', index, collection);
+    },
+    canTruncateCollection(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'collection', 'truncate', index, collection);
+    },
+
+    // Document CRUDL
+    canReadDocument(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'document', 'get', index, collection);
+    },
+    canSearchDocument(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'document', 'search', index, collection);
+    },
+    canCreateDocument(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'document', 'create', index, collection);
+    },
+    canEditDocument(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'document', 'createOrReplace', index, collection);
+    },
+    canDeleteDocument(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'document', 'delete', index, collection);
+    },
+
+    // Realtime
+    canSubscribe(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'realtime', 'subscribe', index, collection) &&
+        isActionAllowed(state.user, 'realtime', 'unsubscribe', index, collection);
+    },
+    canPublish(state): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        isActionAllowed(state.user, 'realtime', 'publish', index, collection);
+    },
+    canManageRealtime(): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        this.canSubscribe(index, collection) || this.canPublish(index, collection);
+    },
+    canManageDocuments(): (index: string, collection: string) => boolean {
+      return (index, collection) =>
+        this.canReadDocument(index, collection) ||
+        this.canSearchDocument(index, collection) ||
+        this.canEditDocument(index, collection) ||
+        this.canCreateDocument(index, collection) ||
+        this.canDeleteDocument(index, collection);
+    },
+
+    // Roles
+    canReadRole(state): boolean {
+      return isActionAllowed(state.user, 'security', 'getRole');
+    },
+    canSearchRole(state): boolean {
+      return isActionAllowed(state.user, 'security', 'searchRoles');
+    },
+    canEditRole(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createOrReplaceRole');
+    },
+    canCreateRole(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createRole');
+    },
+    canDeleteRole(state): boolean {
+      return isActionAllowed(state.user, 'security', 'deleteRole');
+    },
+    canManageRoles(): boolean {
+      return (
+        this.canReadRole ||
+        this.canSearchRole ||
+        this.canEditRole ||
+        this.canCreateRole ||
+        this.canDeleteRole
+      );
+    },
+
+    // Profiles
+    canReadProfile(state): boolean {
+      return isActionAllowed(state.user, 'security', 'getProfile');
+    },
+    canSearchProfile(state): boolean {
+      return isActionAllowed(state.user, 'security', 'searchProfiles');
+    },
+    canEditProfile(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createOrReplaceProfile');
+    },
+    canCreateProfile(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createProfile');
+    },
+    canDeleteProfile(state): boolean {
+      return isActionAllowed(state.user, 'security', 'deleteProfile');
+    },
+    canManageProfiles(): boolean {
+      return (
+        this.canReadProfile ||
+        this.canSearchProfile ||
+        this.canEditProfile ||
+        this.canCreateProfile ||
+        this.canDeleteProfile
+      );
+    },
+
+    // Users
+    canReadUser(state): boolean {
+      return isActionAllowed(state.user, 'security', 'getUser');
+    },
+    canSearchUser(state): boolean {
+      return isActionAllowed(state.user, 'security', 'searchUsers');
+    },
+    canEditUser(state): boolean {
+      return isActionAllowed(state.user, 'security', 'updateUser');
+    },
+    canCreateUser(state): boolean {
+      return isActionAllowed(state.user, 'security', 'createUser');
+    },
+    canDeleteUser(state): boolean {
+      return isActionAllowed(state.user, 'security', 'deleteUser');
+    },
+    canManageUsers(): boolean {
+      return (
+        this.canReadUser ||
+        this.canSearchUser ||
+        this.canEditUser ||
+        this.canCreateUser ||
+        this.canDeleteUser
+      );
+    },
+    hasSecurityRights(): boolean {
+      return this.canManageRoles || this.canManageProfiles || this.canManageUsers;
+    },
+
+    // Server
+    canGetPublicApi(state): boolean {
+      return isActionAllowed(state.user, 'server', 'publicApi');
+    },
+    canGetOpenApi(state): boolean {
+      return isActionAllowed(state.user, 'server', 'openapi');
+    },
+  },
+  actions: {
+    async init() {
+      this.reset();
+      this.initializing = true;
+      await this.checkFirstAdmin();
+      await this.loginByToken();
+    },
+    async createSingleUseToken(): Promise<string> {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      const { result } = await kuzzle.query({
+        controller: 'auth',
+        action: 'createToken',
+        singleUse: true,
+      });
+
+      return result.token;
+    },
+    async setSession(token: string | null) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      await kuzzleStore.updateTokenCurrentEnvironment(token);
+
+      if (token === null) {
+        this.user = null;
+        this.tokenValid = false;
+        this.initializing = false;
+        return null;
+      }
+
+      if (token === 'anonymous') {
+        const sessionUser = new SessionUser();
+        const rights = await kuzzle.auth.getMyRights();
+        sessionUser.rights = rights;
+
+        this.user = sessionUser;
+        this.tokenValid = true;
+        this.initializing = false;
+
+        return sessionUser;
+      }
+
+      const sessionUser = new SessionUser();
+      const user = await kuzzle.auth.getCurrentUser();
+      sessionUser.id = user._id;
+      sessionUser.token = token;
+      sessionUser.params = user._source;
+      const rights = await kuzzle.auth.getMyRights();
+      sessionUser.rights = rights;
+
+      this.user = sessionUser;
+      this.tokenValid = true;
+      this.initializing = false;
+
+      return sessionUser;
+    },
+    async doLogin(credentials: { username: string; password: string }) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      kuzzle.jwt = null;
+
+      const jwt = await kuzzle.auth.login('local', credentials, '2h');
+      return await this.setSession(jwt);
+    },
+    async loginByToken() {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (kuzzleStore.currentEnvironment?.token === 'anonymous') {
+        kuzzle.jwt = null;
+        return await this.setSession('anonymous');
+      }
+
+      if (!kuzzleStore.currentEnvironment?.token) {
+        kuzzle.jwt = null;
+        return await this.setSession(null);
+      } else {
+        const res = await kuzzle.auth.checkToken(kuzzleStore.currentEnvironment.token);
+
+        if (!res.valid) {
+          kuzzle.jwt = null;
+          return await this.setSession(null);
+        } else {
+          kuzzle.jwt = kuzzleStore.currentEnvironment.token;
+          return await this.setSession(kuzzleStore.currentEnvironment.token);
+        }
+      }
+    },
+    async checkFirstAdmin() {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      try {
+        if (!(await kuzzle.server.adminExists({}))) {
+          this.adminAlreadyExists = false;
+          return;
+        }
+
+        this.adminAlreadyExists = true;
+      } catch (error) {
+        if (
+          typeof error === 'object' &&
+          error !== null &&
+          'status' in error &&
+          (error.status === 403 || error.status === 401)
+        ) {
+          this.adminAlreadyExists = true;
+        } else {
+          throw error;
+        }
+      }
+    },
+    async checkToken() {
+      const kuzzleStore = useKuzzleStore();
+      const jwt = kuzzleStore.currentEnvironment?.token;
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (!jwt) {
+        return false;
+      }
+
+      if (jwt === 'anonymous') {
+        return true;
+      }
+
+      const { valid } = await kuzzle.auth.checkToken(jwt);
+
+      if (!valid) {
+        await this.doLogout();
+        await this.setSession(null);
+
+        return false;
+      }
+
+      kuzzle.jwt = jwt;
+
+      if (this.user == null) {
+        await this.setSession(jwt);
+      }
+
+      return true;
+    },
+    async doLogout() {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (kuzzle.jwt) {
+        await kuzzle.auth.logout();
+      }
+
+      kuzzle.jwt = null;
+      this.setSession(null);
+
+      return await this.checkFirstAdmin();
+    },
+    async doResetPassword(data) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      kuzzle.jwt = null;
+      const request = {
+        controller: 'kuzzle-plugin-auth-passport-local/password',
+        action: 'reset',
+        body: data,
+      };
+      const response = await kuzzle.query(request);
+      const jwt = response.result.jwt;
+
+      return await this.setSession(jwt);
+    },
+    reset() {
+      this.$reset();
+    },
+  },
+});
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 000000000..e33913be8
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,6 @@
+export * from './auth';
+export * from './kuzzle';
+export * from './routing';
+export * from './storage-index';
+export * from './toaster';
+export * from './types';
diff --git a/src/stores/kuzzle.ts b/src/stores/kuzzle.ts
new file mode 100644
index 000000000..5bf546636
--- /dev/null
+++ b/src/stores/kuzzle.ts
@@ -0,0 +1,235 @@
+import Vue from 'vue';
+import type { Kuzzle } from 'kuzzle-sdk-v7';
+import { defineStore } from 'pinia';
+
+import * as kuzzleV1 from '@/services/kuzzleWrapper-v1';
+import * as kuzzleV2 from '@/services/kuzzleWrapper-v2';
+import { LS_ENVIRONMENTS, LS_LAST_ENV, NO_ADMIN_WARNING_HOSTS, SS_CURRENT_ENV } from '@/utils';
+import { isValidEnvironment } from '@/validators';
+import type { CreateEnvironmentPayload, KuzzleState } from './types/kuzzle';
+
+export const useKuzzleStore = defineStore('kuzzle', {
+  state: (): KuzzleState => ({
+    environments: {},
+    currentId: undefined,
+    connecting: true,
+    online: false,
+    errorFromKuzzle: undefined,
+  }),
+  getters: {
+    wrapper(): (kuzzleV1.KuzzleWrapperV1 & kuzzleV2.KuzzleWrapperV2) | null {
+      if (this.currentEnvironment == null) {
+        return null;
+      }
+
+      switch (this.currentEnvironment.backendMajorVersion) {
+        case 1:
+          return kuzzleV1.wrapper;
+        case 2:
+          return kuzzleV2.wrapper;
+        default:
+          throw new Error(
+            `No Kuzzle wrapper found for version ${this.currentEnvironment.backendMajorVersion}`,
+          );
+      }
+    },
+    $kuzzle(): Kuzzle | null {
+      if (this.currentEnvironment == null) {
+        return null;
+      }
+
+      switch (this.currentEnvironment.backendMajorVersion) {
+        case 1:
+          return kuzzleV1.kuzzle;
+        case 2:
+          return kuzzleV2.kuzzle;
+        default:
+          throw new Error(
+            `No Kuzzle SDK found for version ${this.currentEnvironment.backendMajorVersion}`,
+          );
+      }
+    },
+    currentEnvironment(state) {
+      if (!this.hasEnvironment) {
+        return null;
+      }
+
+      if (state.currentId === undefined) {
+        return null;
+      }
+
+      return state.environments[state.currentId];
+    },
+    isCurrentEnvironmentValid() {
+      return isValidEnvironment(this.currentEnvironment);
+    },
+    hasEnvironment(state) {
+      return Object.keys(state.environments).length !== 0;
+    },
+  },
+  actions: {
+    setCurrentEnvironment(id: string | undefined) {
+      if (typeof id === 'string') {
+        sessionStorage.setItem(SS_CURRENT_ENV, id);
+      } else {
+        sessionStorage.removeItem(SS_CURRENT_ENV);
+      }
+
+      this.currentId = id;
+    },
+    createEnvironment(payload: CreateEnvironmentPayload) {
+      if (Object.keys(this.environments).includes(payload.id)) {
+        throw new Error(
+          `An environment with name ${payload.id} already exists. Please specify a different one.`,
+        );
+      }
+
+      try {
+        this.environments = {
+          ...this.environments,
+          [payload.id]: payload.environment,
+        };
+      } catch (error) {
+        throw new Error(`[${payload.id}] - ${(error as Error).message}`);
+      }
+
+      localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(this.environments));
+
+      return payload.id;
+    },
+    deleteEnvironment(id) {
+      if (!Object.keys(this.environments).includes(id)) {
+        return;
+      }
+
+      Vue.delete(this.environments, id);
+
+      if (this.currentId === id) {
+        this.setCurrentEnvironment(undefined);
+        sessionStorage.removeItem(SS_CURRENT_ENV);
+      }
+
+      localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(this.environments));
+    },
+    updateTokenCurrentEnvironment(payload) {
+      if (!this.currentId || this.currentEnvironment == null) {
+        throw new Error('No current environment selected');
+      }
+
+      this.environments = {
+        ...this.environments,
+        [this.currentId]: {
+          ...this.currentEnvironment,
+          token: payload,
+        },
+      };
+
+      localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(this.environments));
+    },
+    updateEnvironment(payload) {
+      let mustReconnect = false;
+
+      if (
+        payload.id === this.currentId &&
+        (payload.environment.host !== this.currentEnvironment?.host ||
+          payload.environment.port !== this.currentEnvironment?.port ||
+          payload.environment.ssl !== this.currentEnvironment?.ssl ||
+          payload.backendMajorVersion !== this.currentEnvironment?.backendMajorVersion)
+      ) {
+        mustReconnect = true;
+      }
+
+      if (!Object.keys(this.environments).includes(payload.id)) {
+        throw new Error(`The given id ${payload.id} does not correspond to any existing
+          environment.`);
+      }
+
+      this.environments = {
+        ...this.environments,
+        [payload.id]: payload.environment,
+      };
+
+      localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(this.environments));
+
+      if (mustReconnect) {
+        this.switchEnvironment(payload.id);
+      }
+
+      return payload.id;
+    },
+    async connectToCurrentEnvironment() {
+      if (!this.hasEnvironment) {
+        return;
+      }
+
+      if (this.currentEnvironment == null) {
+        throw new Error('No current environment selected');
+      }
+
+      if (this.wrapper == null) {
+        throw new Error('No Kuzzle wrapper set for the current environment');
+      }
+
+      this.errorFromKuzzle = undefined;
+      this.wrapper.disconnect();
+      this.connecting = true;
+
+      try {
+        await this.wrapper.connectToEnvironment(this.currentEnvironment);
+      } catch (error) {
+        this.onConnectionError(error as Error);
+        return false;
+      }
+
+      return true;
+    },
+    async switchEnvironment(id: string) {
+      if (!id) {
+        throw new Error('No id provided');
+      }
+
+      const environment = this.environments[id];
+      if (!environment) {
+        throw new Error(`Id ${id} does not match any environment`);
+      }
+
+      await this.setCurrentEnvironment(id);
+      localStorage.setItem(LS_LAST_ENV, id);
+
+      return await this.connectToCurrentEnvironment();
+    },
+    onConnectionError(error: Error) {
+      this.connecting = false;
+      this.online = true;
+      this.errorFromKuzzle = error.message;
+    },
+    loadEnvironments() {
+      const loadedEnv = JSON.parse(localStorage.getItem(LS_ENVIRONMENTS) || '{}');
+
+      Object.keys(loadedEnv).forEach((envId) => {
+        const env = loadedEnv[envId];
+
+        if (env.hideAdminWarning === undefined) {
+          env.hideAdminWarning = NO_ADMIN_WARNING_HOSTS.includes(env.host);
+        }
+
+        try {
+          this.environments = {
+            ...this.environments,
+            [envId]: env,
+          };
+        } catch (error) {
+          throw new Error(`[${env.id}] - ${(error as Error).message}`);
+        }
+      });
+
+      let currentId = sessionStorage.getItem(SS_CURRENT_ENV);
+      if (currentId) {
+        this.currentId = currentId;
+      } else {
+        currentId = localStorage.getItem(LS_LAST_ENV);
+        this.setCurrentEnvironment(currentId || undefined);
+      }
+    },
+  },
+});
diff --git a/src/stores/routing.ts b/src/stores/routing.ts
new file mode 100644
index 000000000..5f1e7895c
--- /dev/null
+++ b/src/stores/routing.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia';
+
+import type { RoutingState } from './types/routing';
+
+export const useRoutingStore = defineStore('routing', {
+  state: (): RoutingState => ({
+    routeBeforeRedirect: undefined,
+  }),
+});
diff --git a/src/stores/storage-index.ts b/src/stores/storage-index.ts
new file mode 100644
index 000000000..53cc45f46
--- /dev/null
+++ b/src/stores/storage-index.ts
@@ -0,0 +1,290 @@
+import _ from 'lodash';
+import { defineStore } from 'pinia';
+
+import { getIndexPosition } from '@/services/indexHelpers';
+import { useKuzzleStore } from './kuzzle';
+import {
+  Collection,
+  type CreateCollectionPayload,
+  Index,
+  type IndexCollectionPayload,
+  type IndexCollectionsPayload,
+  type IndexLoadingCollectionsPayload,
+  type IndexState,
+  type UpdateCollectionPayload,
+} from './types/storage-index';
+
+export const useStorageIndexStore = defineStore('storageIndex', {
+  state: (): IndexState => ({
+    indexes: [],
+    loadingIndexes: false,
+  }),
+  getters: {
+    getOneIndex(state) {
+      return (indexName: string) => {
+        return state.indexes.find((el) => el.name === indexName);
+      };
+    },
+    loadingCollections(state) {
+      return (indexName: string) => {
+        const index = state.indexes.find((el) => el.name === indexName);
+        return index != null ? index.loading : false;
+      };
+    },
+    collections(state) {
+      return (indexName: string) => {
+        const index = state.indexes.find((el) => el.name === indexName);
+        return index != null ? index.collections : [];
+      };
+    },
+    getOneCollection() {
+      return (index: Index, collectionName: string) => {
+        return index.getOneCollection(collectionName);
+      };
+    },
+  },
+  actions: {
+    async createIndex(indexName: string) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      await kuzzle.index.create(indexName);
+      const index = new Index(indexName);
+
+      this.addIndex(index);
+    },
+    async deleteIndex(index: Index) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      await kuzzle.index.delete(index.name);
+
+      this.removeIndex(index);
+    },
+    async bulkDeleteIndexes(indexes: Index[]) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+      const indexesNames = indexes.map((el) => el.name);
+
+      await kuzzle.index.mDelete(indexesNames);
+      this.removeIndexes(indexes);
+    },
+    async fetchIndexList() {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      const indexes: Index[] = [];
+      this.loadingIndexes = true;
+
+      const result = await kuzzle.index.list();
+
+      for (const indexName of result) {
+        indexes.push(new Index(indexName));
+      }
+
+      // remove deleted indexes
+      _.differenceBy(this.indexes, indexes, 'name').forEach((el) => {
+        this.removeIndex(el);
+      });
+
+      // add new indexes
+      _.differenceBy(indexes, this.indexes, 'name').forEach((el) => {
+        this.addIndex(el);
+      });
+
+      this.loadingIndexes = false;
+    },
+    async fetchCollectionList(index: Index) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      this.setLoadingCollections({ index, loading: true });
+
+      const result = await kuzzle.collection.list(index.name);
+
+      const collections = result.collections
+        .filter((el) => {
+          if (
+            el.type === 'realtime' &&
+            result.collections.find(
+              (findEl) => findEl.name === el.name && findEl.type === 'stored',
+            ) != null
+          ) {
+            return false;
+          }
+          return true;
+        })
+        .map((el) => {
+          return new Collection(el.name, el.type);
+        });
+
+      if (index.collections == null) {
+        index.collections = collections;
+      } else {
+        // remove deleted collections
+        _.differenceBy(index.collections, collections, 'name').forEach((el) => {
+          this.removeCollection(el);
+        });
+
+        // add new collections
+        _.differenceBy(collections, index.collections, 'name').forEach((el) => {
+          this.addCollection(el);
+        });
+      }
+
+      this.setLoadingCollections({ index, loading: false });
+    },
+    async createCollection({ index, name, mapping }: CreateCollectionPayload) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (name.length === 0) {
+        throw new Error('Invalid collection name');
+      }
+
+      if (index.doesCollectionExist(name)) {
+        throw new Error(`Collection "${name}" already exists`);
+      }
+
+      const collection = new Collection(name, 'stored');
+
+      collection.mapping = mapping;
+
+      await kuzzle.collection.create(index.name, name, mapping);
+
+      this.addCollection({ index, collection });
+    },
+    async updateCollection({ index, name, mapping }: UpdateCollectionPayload) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (!index.doesCollectionExist(name)) {
+        throw new Error(`Collection "${name}" doesn't exist`);
+      }
+
+      const updatedCollection = new Collection(name, 'stored');
+      updatedCollection.mapping = mapping;
+      await kuzzle.collection.update(index.name, name, { mappings: mapping });
+
+      if (index.collections !== undefined) {
+        const collectionPosition = index.collections.findIndex(
+          (el) => el.name === updatedCollection.name,
+        );
+        index.collections[collectionPosition] = updatedCollection;
+      }
+    },
+    async deleteCollection({ index, collection }: IndexCollectionPayload) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      if (!index.doesCollectionExist(collection.name)) {
+        throw new Error(`Collection "${collection.name}" doesn't exist`);
+      }
+
+      await kuzzle.collection.delete(index.name, collection.name);
+
+      this.removeCollection({ index, collection });
+    },
+    async bulkDeleteCollections({ index, collections }: IndexCollectionsPayload) {
+      const kuzzleStore = useKuzzleStore();
+      const kuzzle = kuzzleStore.$kuzzle;
+
+      if (kuzzle === null) {
+        throw new Error('Kuzzle is not initialized');
+      }
+
+      this.setLoadingCollections({ index, loading: true });
+
+      for (const collection of collections) {
+        await kuzzle.collection.delete(index.name, collection.name);
+
+        this.removeCollection({ index, collection });
+      }
+
+      this.setLoadingCollections({ index, loading: false });
+    },
+    async fetchCollectionMapping({ index, collection }: IndexCollectionPayload) {
+      if (!index.doesCollectionExist(collection.name)) {
+        throw new Error(`Collection "${collection.name}" doesn't exist`);
+      }
+
+      const kuzzleStore = useKuzzleStore();
+      const kuzzleMapping = await kuzzleStore.wrapper?.getMappingDocument(
+        collection.name,
+        index.name,
+      );
+
+      if (kuzzleMapping == null) {
+        throw new Error(`Unable to retrieve mapping for collection "${collection.name}"`);
+      }
+
+      const updatedCollection = new Collection(collection.name, 'stored');
+
+      updatedCollection.mapping = kuzzleMapping.properties;
+      updatedCollection.dynamic = kuzzleMapping.dynamic;
+
+      if (index.collections !== undefined) {
+        const collectionPosition = index.collections.findIndex(
+          (el) => el.name === updatedCollection.name,
+        );
+        index.collections[collectionPosition] = updatedCollection;
+      }
+    },
+    reset() {
+      this.$reset();
+    },
+    setLoadingCollections({ index, loading }: IndexLoadingCollectionsPayload) {
+      this.indexes[getIndexPosition(this.indexes as Index[], index.name)].loading = loading;
+    },
+    addCollection({ index, collection }: IndexCollectionPayload) {
+      this.indexes[getIndexPosition(this.indexes as Index[], index.name)].addCollection(collection);
+    },
+    addIndex(index: Index) {
+      this.indexes.push(index);
+    },
+    removeIndex(index: Index) {
+      this.indexes.splice(getIndexPosition(this.indexes as Index[], index.name), 1);
+    },
+    removeIndexes(indexes: Index[]) {
+      const keptIndexes = this.indexes.filter((el) => !indexes.includes(el as Index));
+      this.indexes = keptIndexes;
+    },
+    removeCollection({ index, collection }: IndexCollectionPayload) {
+      this.indexes[getIndexPosition(this.indexes as Index[], index.name)].removeCollection(
+        collection,
+      );
+    },
+  },
+});
diff --git a/src/stores/toaster.ts b/src/stores/toaster.ts
new file mode 100644
index 000000000..a2cb94a83
--- /dev/null
+++ b/src/stores/toaster.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia';
+
+import type { ToasterState } from './types';
+
+export const useToasterStore = defineStore('toaster', {
+  state: (): ToasterState => ({
+    toast: {},
+  }),
+});
diff --git a/src/store/modules/Auth/types.ts b/src/stores/types/auth.ts
similarity index 100%
rename from src/store/modules/Auth/types.ts
rename to src/stores/types/auth.ts
diff --git a/src/stores/types/index.ts b/src/stores/types/index.ts
new file mode 100644
index 000000000..c70bc23df
--- /dev/null
+++ b/src/stores/types/index.ts
@@ -0,0 +1,5 @@
+export * from './auth';
+export * from './kuzzle';
+export * from './routing';
+export * from './storage-index';
+export * from './toaster';
diff --git a/src/store/modules/Kuzzle/types.ts b/src/stores/types/kuzzle.ts
similarity index 100%
rename from src/store/modules/Kuzzle/types.ts
rename to src/stores/types/kuzzle.ts
diff --git a/src/store/modules/Routing/types.ts b/src/stores/types/routing.ts
similarity index 100%
rename from src/store/modules/Routing/types.ts
rename to src/stores/types/routing.ts
diff --git a/src/store/modules/StorageIndex/types.ts b/src/stores/types/storage-index.ts
similarity index 86%
rename from src/store/modules/StorageIndex/types.ts
rename to src/stores/types/storage-index.ts
index 8459b2be6..4001b815e 100644
--- a/src/store/modules/StorageIndex/types.ts
+++ b/src/stores/types/storage-index.ts
@@ -1,14 +1,10 @@
 export class Index {
-  private readonly _name: string;
+  readonly name: string;
   loading = false;
   collections?: Collection[];
 
   constructor(name: string) {
-    this._name = name;
-  }
-
-  get name(): string {
-    return this._name;
+    this.name = name;
   }
 
   get collectionsCount(): number | undefined {
@@ -53,26 +49,18 @@ export class Index {
 }
 
 export class Collection {
-  private readonly _name: string;
-  private readonly _type: CollectionType;
+  readonly name: string;
+  readonly type: CollectionType;
   mapping?: object;
   dynamic?: string;
 
   constructor(name: string, type: CollectionType) {
-    this._type = this.findType(name, type);
-    this._name = name;
-  }
-
-  get name(): string {
-    return this._name;
-  }
-
-  get type(): CollectionType {
-    return this._type;
+    this.type = this.findType(name, type);
+    this.name = name;
   }
 
   public isRealtime(): boolean {
-    return this._type === 'realtime';
+    return this.type === 'realtime';
   }
 
   private findType(name: string, type: CollectionType): CollectionType {
diff --git a/src/stores/types/toaster.ts b/src/stores/types/toaster.ts
new file mode 100644
index 000000000..d58418315
--- /dev/null
+++ b/src/stores/types/toaster.ts
@@ -0,0 +1,10 @@
+export interface ToasterState {
+  toast: Toast;
+}
+
+export interface Toast {
+  text?: string;
+  duration?: number;
+  cssClass?: string;
+  cb?: () => void;
+}
diff --git a/test/e2e/cypress/integration/single-backend/environments.spec.js b/test/e2e/cypress/integration/single-backend/environments.spec.js
index 7741360a2..8c373556b 100644
--- a/test/e2e/cypress/integration/single-backend/environments.spec.js
+++ b/test/e2e/cypress/integration/single-backend/environments.spec.js
@@ -241,8 +241,8 @@ describe('Environments', function() {
       force: true
     })
 
-    cy.contains('Connecting to Kuzzle')
-    cy.get('[data-cy="App-offline"]')
+    cy.contains('Something went wrong while connecting to Kuzzle')
+    cy.get('[data-cy="App-connectionError"]')
     cy.wait(2000)
 
     cy.get('[data-cy="EnvironmentSwitch"]').click()