diff --git a/assets/js/app/editor/index.js b/assets/js/app/editor/index.js
index 62330e7be9..10702276e2 100644
--- a/assets/js/app/editor/index.js
+++ b/assets/js/app/editor/index.js
@@ -1,8 +1,4 @@
 import Vue from 'vue';
-/**
- * VueX Store
- */
-import store from './store';
 /**
  * Components
  */
@@ -52,7 +48,6 @@ const editorSelector = '#' + id;
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
         el: editorSelector,
         name: 'BoltEditor',
     });
diff --git a/assets/js/app/editor/store/index.js b/assets/js/app/editor/store/index.js
deleted file mode 100644
index f6bf86fb29..0000000000
--- a/assets/js/app/editor/store/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import general from './modules/general/';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    modules: {
-        general,
-    },
-});
diff --git a/assets/js/app/editor/store/modules/general/_actions.js b/assets/js/app/editor/store/modules/general/_actions.js
deleted file mode 100644
index ac57ae0a67..0000000000
--- a/assets/js/app/editor/store/modules/general/_actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const actions = {
-    slimSidebar({ commit }, arg) {
-        commit('slimSidebar', arg);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/editor/store/modules/general/_getters.js b/assets/js/app/editor/store/modules/general/_getters.js
deleted file mode 100644
index 6200410724..0000000000
--- a/assets/js/app/editor/store/modules/general/_getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getters = {
-    slimSidebar: state => state.slimSidebar,
-};
-
-export default getters;
diff --git a/assets/js/app/editor/store/modules/general/_mutations.js b/assets/js/app/editor/store/modules/general/_mutations.js
deleted file mode 100644
index faa8f04445..0000000000
--- a/assets/js/app/editor/store/modules/general/_mutations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const mutations = {
-    slimSidebar(state, arg) {
-        state.slimSidebar = arg;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/editor/store/modules/general/_state.js b/assets/js/app/editor/store/modules/general/_state.js
deleted file mode 100644
index fee92b329c..0000000000
--- a/assets/js/app/editor/store/modules/general/_state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const state = {
-    slimSidebar: false,
-};
-
-export default state;
diff --git a/assets/js/app/editor/store/modules/general/index.js b/assets/js/app/editor/store/modules/general/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/editor/store/modules/general/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/listing/Components/Filter.vue b/assets/js/app/listing/Components/Filter.vue
index fc3182d317..ce97172e7e 100644
--- a/assets/js/app/listing/Components/Filter.vue
+++ b/assets/js/app/listing/Components/Filter.vue
@@ -60,7 +60,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import type from '../mixins/type';
+import { useGeneralStore, useSelectingStore } from '../store';
 
 export default {
     name: 'ListingFilter',
@@ -69,34 +71,27 @@ export default {
         labels: Object,
     },
     computed: {
-        size() {
-            return this.$store.getters['general/getRowSize'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
-        selectAll() {
-            return this.$store.getters['selecting/selectAll'];
-        },
+        ...mapState(useGeneralStore, { size: 'rowSize', sorting: 'sorting' }),
+        ...mapState(useSelectingStore, ['selectAll']),
     },
     watch: {
         sorting() {
-            if (this.sorting) this.$store.dispatch('selecting/selectAll', false);
+            if (this.sorting) useSelectingStore(this.$pinia).selectAll = false;
         },
     },
     created() {
         const size = localStorage.getItem('listing-row-size');
-        if (size !== null) this.$store.dispatch('general/setRowSize', size);
+        if (size !== null) useGeneralStore(this.$pinia).rowSize = size;
     },
     methods: {
         enableSorting(arg) {
-            this.$store.dispatch('general/setSorting', arg);
+            useGeneralStore(this.$pinia).sorting = arg;
         },
         enableSelectAll(arg) {
-            this.$store.dispatch('selecting/selectAll', arg);
+            useSelectingStore(this.$pinia).selectAll = arg;
         },
         changeSize(size) {
-            this.$store.dispatch('general/setRowSize', size);
+            useGeneralStore(this.$pinia).rowSize = size;
             localStorage.setItem('listing-row-size', size);
         },
     },
diff --git a/assets/js/app/listing/Components/Records.vue b/assets/js/app/listing/Components/Records.vue
index 2aee9d9d9a..cdc1264b6d 100644
--- a/assets/js/app/listing/Components/Records.vue
+++ b/assets/js/app/listing/Components/Records.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import { useGeneralStore, useListingStore } from '../store';
+
 export default {
     name: 'ListingRecords',
     props: {
@@ -11,8 +13,8 @@ export default {
         labels: Object,
     },
     created() {
-        this.$store.dispatch('general/setType', this.type);
-        this.$store.dispatch('listing/setRecords', this.data);
+        useGeneralStore(this.$pinia).type = this.type;
+        useListingStore(this.$pinia).records = this.data;
     },
 };
 </script>
diff --git a/assets/js/app/listing/Components/SelectBox.vue b/assets/js/app/listing/Components/SelectBox.vue
index be90b8ef20..0fb0e098bd 100644
--- a/assets/js/app/listing/Components/SelectBox.vue
+++ b/assets/js/app/listing/Components/SelectBox.vue
@@ -47,7 +47,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import Multiselect from 'vue-multiselect';
+import { useListingStore, useSelectingStore } from '../store';
 
 export default {
     name: 'ListingSelectedBox',
@@ -98,15 +100,13 @@ export default {
 
             return '';
         },
-        selectedCount() {
-            return this.$store.getters['selecting/selectedCount'];
-        },
-        selected() {
-            return this.$store.getters['selecting/selected'];
-        },
-        order() {
-            return this.$store.getters['listing/getOrder'];
-        },
+        ...mapState(useSelectingStore, ['selectedCount', 'selected']),
+        // Dead code: nothing reads or submits `order`. It belongs to the
+        // unfinished drag-and-drop sorting of records, like the commented-out
+        // toggle in Filter.vue and the unused _Sorting.vue handle.
+        ...mapState(useListingStore, {
+            order: store => store.records.map(record => record.id),
+        }),
     },
 };
 </script>
diff --git a/assets/js/app/listing/Components/Table/Row/_Checkbox.vue b/assets/js/app/listing/Components/Table/Row/_Checkbox.vue
index 01651848f9..6b3e1f14ab 100644
--- a/assets/js/app/listing/Components/Table/Row/_Checkbox.vue
+++ b/assets/js/app/listing/Components/Table/Row/_Checkbox.vue
@@ -8,6 +8,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore, useSelectingStore } from '../../../store';
+
 export default {
     name: 'Checkbox',
     props: {
@@ -19,12 +22,8 @@ export default {
         };
     },
     computed: {
-        selectAll() {
-            return this.$store.getters['selecting/selectAll'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useSelectingStore, ['selectAll']),
+        ...mapState(useGeneralStore, ['sorting']),
     },
     watch: {
         selectAll() {
@@ -32,8 +31,8 @@ export default {
         },
         selected() {
             this.selected
-                ? this.$store.dispatch('selecting/select', this.id)
-                : this.$store.dispatch('selecting/deSelect', this.id);
+                ? useSelectingStore(this.$pinia).select(this.id)
+                : useSelectingStore(this.$pinia).deSelect(this.id);
         },
         sorting() {
             if (this.sorting) this.selected = false;
diff --git a/assets/js/app/listing/Components/Table/Row/_Sorting.vue b/assets/js/app/listing/Components/Table/Row/_Sorting.vue
index bfbe45a1b4..01180711cf 100644
--- a/assets/js/app/listing/Components/Table/Row/_Sorting.vue
+++ b/assets/js/app/listing/Components/Table/Row/_Sorting.vue
@@ -5,12 +5,13 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../../../store';
+
 export default {
     name: 'Sorting',
     computed: {
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useGeneralStore, ['sorting']),
     },
 };
 </script>
diff --git a/assets/js/app/listing/Components/Table/Row/index.vue b/assets/js/app/listing/Components/Table/Row/index.vue
index 11264a0177..f5ab6adb1b 100644
--- a/assets/js/app/listing/Components/Table/Row/index.vue
+++ b/assets/js/app/listing/Components/Table/Row/index.vue
@@ -45,7 +45,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import type from '../../../mixins/type';
+import { useGeneralStore } from '../../../store';
 import { raw, trim } from '../../../../../filters/string';
 import Checkbox from './_Checkbox';
 import Meta from './_Meta';
@@ -74,12 +76,7 @@ export default {
             // if slug has different locales, return the 0st one
             return this.record.fieldValues.slug[Object.keys(this.record.fieldValues.slug)[0]];
         },
-        size() {
-            return this.$store.getters['general/getRowSize'];
-        },
-        sorting() {
-            return this.$store.getters['general/getSorting'];
-        },
+        ...mapState(useGeneralStore, { size: 'rowSize', sorting: 'sorting' }),
     },
     methods: {
         raw,
diff --git a/assets/js/app/listing/Components/Table/index.vue b/assets/js/app/listing/Components/Table/index.vue
index 7ad66f836b..91aa20d13e 100644
--- a/assets/js/app/listing/Components/Table/index.vue
+++ b/assets/js/app/listing/Components/Table/index.vue
@@ -9,8 +9,10 @@
 </template>
 
 <script>
+import { mapWritableState } from 'pinia';
 import draggable from 'vuedraggable';
 import Row from './Row';
+import { useListingStore } from '../../store';
 
 export default {
     name: 'ListingTable',
@@ -22,14 +24,7 @@ export default {
         labels: Object,
     },
     computed: {
-        records: {
-            get() {
-                return this.$store.getters['listing/getRecords'];
-            },
-            set(val) {
-                this.$store.dispatch('listing/setRecords', val);
-            },
-        },
+        ...mapWritableState(useListingStore, ['records']),
     },
 };
 </script>
diff --git a/assets/js/app/listing/index.js b/assets/js/app/listing/index.js
index 9bc140bff2..3b67d85dea 100644
--- a/assets/js/app/listing/index.js
+++ b/assets/js/app/listing/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 /**
- * VueX Store
+ * Pinia
  */
-import store from './store';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 /**
  * Components
  */
@@ -11,6 +11,8 @@ import Filter from './Components/Filter';
 import Table from './Components/Table';
 import SelectBox from './Components/SelectBox';
 
+Vue.use(PiniaVuePlugin);
+
 /**
  * Register Components
  */
@@ -18,7 +20,7 @@ const id = 'listing';
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
+        pinia: createPinia(),
         el: '#' + id,
         name: 'BoltListing',
         components: {
diff --git a/assets/js/app/listing/mixins/type.js b/assets/js/app/listing/mixins/type.js
index 2bb5e96e23..5d06abca4c 100644
--- a/assets/js/app/listing/mixins/type.js
+++ b/assets/js/app/listing/mixins/type.js
@@ -1,7 +1,8 @@
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../store';
+
 export default {
     computed: {
-        type() {
-            return this.$store.getters['general/getType'];
-        },
+        ...mapState(useGeneralStore, ['type']),
     },
 };
diff --git a/assets/js/app/listing/store/index.js b/assets/js/app/listing/store/index.js
deleted file mode 100644
index fefb9d7312..0000000000
--- a/assets/js/app/listing/store/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-/**
- * modules
- */
-import general from './modules/general/';
-import listing from './modules/listing/';
-import selecting from './modules/selecting/';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    modules: {
-        general,
-        listing,
-        selecting,
-    },
-});
diff --git a/assets/js/app/listing/store/index.ts b/assets/js/app/listing/store/index.ts
new file mode 100644
index 0000000000..4c24b144c4
--- /dev/null
+++ b/assets/js/app/listing/store/index.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import type { ListingRecord } from '../types';
+
+interface GeneralState {
+    type: string | null;
+    rowSize: string;
+    sorting: boolean;
+}
+
+export const useGeneralStore = defineStore('listing-general', {
+    state: (): GeneralState => ({
+        type: null,
+        rowSize: 'normal',
+        sorting: false,
+    }),
+});
+
+interface ListingState {
+    records: ListingRecord[];
+}
+
+export const useListingStore = defineStore('listing', {
+    state: (): ListingState => ({
+        records: [],
+    }),
+});
+
+interface SelectingState {
+    selectAll: boolean;
+    selected: number[];
+}
+
+export const useSelectingStore = defineStore('selecting', {
+    state: (): SelectingState => ({
+        selectAll: false,
+        selected: [],
+    }),
+    getters: {
+        selectedCount: state => state.selected.length,
+    },
+    actions: {
+        select(id: number) {
+            if (!this.selected.includes(id)) {
+                this.selected.push(id);
+            }
+        },
+        deSelect(id: number) {
+            const index = this.selected.indexOf(id);
+            if (index > -1) this.selected.splice(index, 1);
+        },
+    },
+});
diff --git a/assets/js/app/listing/store/modules/general/_actions.js b/assets/js/app/listing/store/modules/general/_actions.js
deleted file mode 100644
index b2e9bfaea7..0000000000
--- a/assets/js/app/listing/store/modules/general/_actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const actions = {
-    setType({ commit }, data) {
-        commit('setType', data);
-    },
-    setRowSize({ commit }, data) {
-        commit('setRowSize', data);
-    },
-    setSorting({ commit }, arg) {
-        commit('setSorting', arg);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/listing/store/modules/general/_getters.js b/assets/js/app/listing/store/modules/general/_getters.js
deleted file mode 100644
index 0c3a835f78..0000000000
--- a/assets/js/app/listing/store/modules/general/_getters.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const getters = {
-    getType: state => state.type,
-    getRowSize: state => state.rowSize,
-    getSorting: state => state.sorting,
-};
-
-export default getters;
diff --git a/assets/js/app/listing/store/modules/general/_mutations.js b/assets/js/app/listing/store/modules/general/_mutations.js
deleted file mode 100644
index 0c6650d8b7..0000000000
--- a/assets/js/app/listing/store/modules/general/_mutations.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const mutations = {
-    setType(state, data) {
-        state.type = data;
-    },
-    setRowSize(state, data) {
-        state.rowSize = data;
-    },
-    setSorting(state, arg) {
-        state.sorting = arg;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/listing/store/modules/general/_state.js b/assets/js/app/listing/store/modules/general/_state.js
deleted file mode 100644
index 0a5536271b..0000000000
--- a/assets/js/app/listing/store/modules/general/_state.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const state = {
-    type: null,
-    rowSize: 'normal',
-    sorting: false,
-};
-
-export default state;
diff --git a/assets/js/app/listing/store/modules/general/index.js b/assets/js/app/listing/store/modules/general/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/listing/store/modules/general/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/listing/store/modules/listing/_actions.js b/assets/js/app/listing/store/modules/listing/_actions.js
deleted file mode 100644
index ade7fa96c3..0000000000
--- a/assets/js/app/listing/store/modules/listing/_actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const actions = {
-    setRecords({ commit }, data) {
-        commit('setRecords', data);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/listing/store/modules/listing/_getters.js b/assets/js/app/listing/store/modules/listing/_getters.js
deleted file mode 100644
index 0f8b04ba8f..0000000000
--- a/assets/js/app/listing/store/modules/listing/_getters.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const getters = {
-    getRecords: state => state.records,
-    getOrder(state) {
-        return state.records.map(record => {
-            return record.id;
-        });
-    },
-};
-
-export default getters;
diff --git a/assets/js/app/listing/store/modules/listing/_mutations.js b/assets/js/app/listing/store/modules/listing/_mutations.js
deleted file mode 100644
index 6f43fad4f9..0000000000
--- a/assets/js/app/listing/store/modules/listing/_mutations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const mutations = {
-    setRecords(state, data) {
-        state.records = data;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/listing/store/modules/listing/_state.js b/assets/js/app/listing/store/modules/listing/_state.js
deleted file mode 100644
index 493859e792..0000000000
--- a/assets/js/app/listing/store/modules/listing/_state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const state = {
-    records: [],
-};
-
-export default state;
diff --git a/assets/js/app/listing/store/modules/listing/index.js b/assets/js/app/listing/store/modules/listing/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/listing/store/modules/listing/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/listing/store/modules/selecting/_actions.js b/assets/js/app/listing/store/modules/selecting/_actions.js
deleted file mode 100644
index a9ca605829..0000000000
--- a/assets/js/app/listing/store/modules/selecting/_actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const actions = {
-    selectAll({ commit }, arg) {
-        commit('selectAll', arg);
-    },
-    select({ commit }, id) {
-        commit('select', id);
-    },
-    deSelect({ commit }, id) {
-        commit('deSelect', id);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/listing/store/modules/selecting/_getters.js b/assets/js/app/listing/store/modules/selecting/_getters.js
deleted file mode 100644
index 6389257de8..0000000000
--- a/assets/js/app/listing/store/modules/selecting/_getters.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const getters = {
-    selectAll: state => state.selectAll,
-    selectedCount: state => state.selectedCount,
-    selected: state => state.selected,
-};
-
-export default getters;
diff --git a/assets/js/app/listing/store/modules/selecting/_mutations.js b/assets/js/app/listing/store/modules/selecting/_mutations.js
deleted file mode 100644
index 6a55895240..0000000000
--- a/assets/js/app/listing/store/modules/selecting/_mutations.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const mutations = {
-    selectAll(state, arg) {
-        state.selectAll = arg;
-    },
-    select(state, id) {
-        state.selectedCount++;
-        state.selected.push(id);
-    },
-    deSelect(state, id) {
-        state.selectedCount--;
-        let index = state.selected.indexOf(id);
-        if (index > -1) state.selected.splice(index, 1);
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/listing/store/modules/selecting/_state.js b/assets/js/app/listing/store/modules/selecting/_state.js
deleted file mode 100644
index 8a0405f032..0000000000
--- a/assets/js/app/listing/store/modules/selecting/_state.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const state = {
-    selectAll: false,
-    selectedCount: 0,
-    selected: [],
-};
-
-export default state;
diff --git a/assets/js/app/listing/store/modules/selecting/index.js b/assets/js/app/listing/store/modules/selecting/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/listing/store/modules/selecting/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/listing/store/modules/type/_actions.js b/assets/js/app/listing/store/modules/type/_actions.js
deleted file mode 100644
index 315235d44b..0000000000
--- a/assets/js/app/listing/store/modules/type/_actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const actions = {
-    setType({ commit }, data) {
-        commit('setType', data);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/listing/store/modules/type/_getters.js b/assets/js/app/listing/store/modules/type/_getters.js
deleted file mode 100644
index ad23700e62..0000000000
--- a/assets/js/app/listing/store/modules/type/_getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getters = {
-    getType: state => state.type,
-};
-
-export default getters;
diff --git a/assets/js/app/listing/store/modules/type/_mutations.js b/assets/js/app/listing/store/modules/type/_mutations.js
deleted file mode 100644
index 7c2746f532..0000000000
--- a/assets/js/app/listing/store/modules/type/_mutations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const mutations = {
-    setType(state, data) {
-        state.type = data;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/listing/store/modules/type/_state.js b/assets/js/app/listing/store/modules/type/_state.js
deleted file mode 100644
index edec4327aa..0000000000
--- a/assets/js/app/listing/store/modules/type/_state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const state = {
-    type: null,
-};
-
-export default state;
diff --git a/assets/js/app/listing/store/modules/type/index.js b/assets/js/app/listing/store/modules/type/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/listing/store/modules/type/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/listing/types.ts b/assets/js/app/listing/types.ts
new file mode 100644
index 0000000000..99677acc00
--- /dev/null
+++ b/assets/js/app/listing/types.ts
@@ -0,0 +1,33 @@
+export type LocalizedString = string | Record<string, string>;
+
+export type ListingImage = {
+    thumbnail: string;
+    alt?: string | null;
+};
+
+export type ListingRecord = {
+    id?: number;
+    title?: string;
+    status?: string;
+    authorName?: string;
+    createdAt?: string | null;
+    publishedAt?: string | null;
+    modifiedAt?: string | null;
+    fieldValues?: {
+        slug?: LocalizedString | null;
+    };
+    extras?: {
+        editLink?: string;
+        title?: string;
+        feature?: string | null;
+        excerpt?: string;
+        image?: ListingImage | null;
+        icon?: string;
+        link?: string;
+        statusLink?: string;
+        duplicateLink?: string;
+        deleteLink?: string;
+        singular_name?: string;
+        contentTypeOverviewLink?: string;
+    };
+};
diff --git a/assets/js/app/sidebar/Components/Sidebar.vue b/assets/js/app/sidebar/Components/Sidebar.vue
index 4e2a5c1b96..f0c34e8138 100644
--- a/assets/js/app/sidebar/Components/Sidebar.vue
+++ b/assets/js/app/sidebar/Components/Sidebar.vue
@@ -11,6 +11,7 @@
 <script>
 import Menu from './Menu';
 import SidebarToggler from './_SidebarToggler';
+import { useGeneralStore } from '../store';
 
 export default {
     name: 'Sidebar',
@@ -28,7 +29,7 @@ export default {
         const slim = JSON.parse(localStorage.getItem('slim-sidebar'));
 
         if (slim) {
-            this.$store.dispatch('general/slimSidebar', slim);
+            useGeneralStore(this.$pinia).slimSidebar = slim;
         }
     },
 };
diff --git a/assets/js/app/sidebar/Components/_SidebarToggler.vue b/assets/js/app/sidebar/Components/_SidebarToggler.vue
index 82776efa05..5d8f2c7033 100644
--- a/assets/js/app/sidebar/Components/_SidebarToggler.vue
+++ b/assets/js/app/sidebar/Components/_SidebarToggler.vue
@@ -6,6 +6,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../store';
+
 export default {
     name: 'SidebarFooter',
     props: {
@@ -14,9 +17,7 @@ export default {
         labels: Object,
     },
     computed: {
-        slim() {
-            return this.$store.getters['general/slimSidebar'] ? this.$store.getters['general/slimSidebar'] : false;
-        },
+        ...mapState(useGeneralStore, { slim: 'slimSidebar' }),
     },
     watch: {
         slim() {
@@ -27,7 +28,7 @@ export default {
     },
     methods: {
         slimSidebar(arg) {
-            this.$store.dispatch('general/slimSidebar', arg);
+            useGeneralStore(this.$pinia).slimSidebar = arg;
         },
     },
 };
diff --git a/assets/js/app/sidebar/index.js b/assets/js/app/sidebar/index.js
index 757a8485e4..88073c8d99 100644
--- a/assets/js/app/sidebar/index.js
+++ b/assets/js/app/sidebar/index.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
-import store from './store';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 import Sidebar from './Components/Sidebar.vue';
 
+Vue.use(PiniaVuePlugin);
+
 const id = 'bolt--sidebar';
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
+        pinia: createPinia(),
         el: '#' + id,
         name: 'BoltSidebar',
         components: {
diff --git a/assets/js/app/sidebar/store/index.js b/assets/js/app/sidebar/store/index.js
deleted file mode 100644
index f6bf86fb29..0000000000
--- a/assets/js/app/sidebar/store/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import general from './modules/general/';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    modules: {
-        general,
-    },
-});
diff --git a/assets/js/app/sidebar/store/index.ts b/assets/js/app/sidebar/store/index.ts
new file mode 100644
index 0000000000..a83579dacf
--- /dev/null
+++ b/assets/js/app/sidebar/store/index.ts
@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+
+interface GeneralState {
+    slimSidebar: boolean;
+}
+
+export const useGeneralStore = defineStore('sidebar-general', {
+    state: (): GeneralState => ({
+        slimSidebar: false,
+    }),
+});
diff --git a/assets/js/app/sidebar/store/modules/general/_actions.js b/assets/js/app/sidebar/store/modules/general/_actions.js
deleted file mode 100644
index ac57ae0a67..0000000000
--- a/assets/js/app/sidebar/store/modules/general/_actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const actions = {
-    slimSidebar({ commit }, arg) {
-        commit('slimSidebar', arg);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/sidebar/store/modules/general/_getters.js b/assets/js/app/sidebar/store/modules/general/_getters.js
deleted file mode 100644
index 6200410724..0000000000
--- a/assets/js/app/sidebar/store/modules/general/_getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getters = {
-    slimSidebar: state => state.slimSidebar,
-};
-
-export default getters;
diff --git a/assets/js/app/sidebar/store/modules/general/_mutations.js b/assets/js/app/sidebar/store/modules/general/_mutations.js
deleted file mode 100644
index faa8f04445..0000000000
--- a/assets/js/app/sidebar/store/modules/general/_mutations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const mutations = {
-    slimSidebar(state, arg) {
-        state.slimSidebar = arg;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/sidebar/store/modules/general/_state.js b/assets/js/app/sidebar/store/modules/general/_state.js
deleted file mode 100644
index fee92b329c..0000000000
--- a/assets/js/app/sidebar/store/modules/general/_state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const state = {
-    slimSidebar: false,
-};
-
-export default state;
diff --git a/assets/js/app/sidebar/store/modules/general/index.js b/assets/js/app/sidebar/store/modules/general/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/sidebar/store/modules/general/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/assets/js/app/toolbar/Components/Toolbar.vue b/assets/js/app/toolbar/Components/Toolbar.vue
index fc03b3d083..efc9dd6295 100644
--- a/assets/js/app/toolbar/Components/Toolbar.vue
+++ b/assets/js/app/toolbar/Components/Toolbar.vue
@@ -89,6 +89,8 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
+import { useGeneralStore } from '../store';
 const tinycolor = require('tinycolor2');
 
 export default {
@@ -116,13 +118,11 @@ export default {
                 );
             });
         },
-        toolbarColor() {
-            return this.$store.getters['general/toolbarColor'];
-        },
+        ...mapState(useGeneralStore, ['toolbarColor']),
     },
     created() {
         const color = getComputedStyle(document.body).getPropertyValue('--admin-toolbar');
-        this.$store.dispatch('general/toolbarColor', color);
+        useGeneralStore(this.$pinia).toolbarColor = color;
     },
 };
 </script>
diff --git a/assets/js/app/toolbar/index.js b/assets/js/app/toolbar/index.js
index ae690d9d95..fb90909443 100644
--- a/assets/js/app/toolbar/index.js
+++ b/assets/js/app/toolbar/index.js
@@ -1,13 +1,15 @@
 import Vue from 'vue';
 /**
- * VueX Store
+ * Pinia
  */
-import store from './store';
+import { createPinia, PiniaVuePlugin } from 'pinia';
 /**
  * Components
  */
 import Toolbar from './Components/Toolbar.vue';
 
+Vue.use(PiniaVuePlugin);
+
 /**
  * Register Components
  */
@@ -15,7 +17,7 @@ const id = 'toolbar';
 
 if (document.getElementById(id)) {
     new Vue({
-        store,
+        pinia: createPinia(),
         el: '#' + id,
         name: 'BoltToolbar',
         components: {
diff --git a/assets/js/app/toolbar/store/index.js b/assets/js/app/toolbar/store/index.js
deleted file mode 100644
index f6bf86fb29..0000000000
--- a/assets/js/app/toolbar/store/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import general from './modules/general/';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-    modules: {
-        general,
-    },
-});
diff --git a/assets/js/app/toolbar/store/index.ts b/assets/js/app/toolbar/store/index.ts
new file mode 100644
index 0000000000..b0799bb102
--- /dev/null
+++ b/assets/js/app/toolbar/store/index.ts
@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+
+interface GeneralState {
+    toolbarColor: string;
+}
+
+export const useGeneralStore = defineStore('toolbar-general', {
+    state: (): GeneralState => ({
+        toolbarColor: '',
+    }),
+});
diff --git a/assets/js/app/toolbar/store/modules/general/_actions.js b/assets/js/app/toolbar/store/modules/general/_actions.js
deleted file mode 100644
index 1135f81f78..0000000000
--- a/assets/js/app/toolbar/store/modules/general/_actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const actions = {
-    toolbarColor({ commit }, data) {
-        commit('toolbarColor', data);
-    },
-};
-
-export default actions;
diff --git a/assets/js/app/toolbar/store/modules/general/_getters.js b/assets/js/app/toolbar/store/modules/general/_getters.js
deleted file mode 100644
index 4d001ba273..0000000000
--- a/assets/js/app/toolbar/store/modules/general/_getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getters = {
-    toolbarColor: state => state.toolbarColor,
-};
-
-export default getters;
diff --git a/assets/js/app/toolbar/store/modules/general/_mutations.js b/assets/js/app/toolbar/store/modules/general/_mutations.js
deleted file mode 100644
index 26efe7ac28..0000000000
--- a/assets/js/app/toolbar/store/modules/general/_mutations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const mutations = {
-    toolbarColor(state, data) {
-        state.toolbarColor = data;
-    },
-};
-
-export default mutations;
diff --git a/assets/js/app/toolbar/store/modules/general/_state.js b/assets/js/app/toolbar/store/modules/general/_state.js
deleted file mode 100644
index 20a7e0794f..0000000000
--- a/assets/js/app/toolbar/store/modules/general/_state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const state = {
-    toolbarColor: null,
-};
-
-export default state;
diff --git a/assets/js/app/toolbar/store/modules/general/index.js b/assets/js/app/toolbar/store/modules/general/index.js
deleted file mode 100644
index 8f2132fec7..0000000000
--- a/assets/js/app/toolbar/store/modules/general/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import state from './_state';
-import actions from './_actions';
-import mutations from './_mutations';
-import getters from './_getters';
-
-export default {
-    namespaced: true,
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/package-lock.json b/package-lock.json
index 5a6cb22d23..822f7fe842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
                 "luxon": "^1.28.1",
                 "no-scroll": "^2.1.1",
                 "node-vibrant": "^4.0.4",
+                "pinia": "^2.3.1",
                 "popper.js": "^1.16.1",
                 "register-service-worker": "^1.7.2",
                 "selectize": "^0.12.6",
@@ -35,7 +36,6 @@
                 "vue-multiselect": "^2.1.8",
                 "vue-trumbowyg": "^3.6.2",
                 "vuedraggable": "^2.24.3",
-                "vuex": "^3.6.2",
                 "zxcvbn": "^4.4.2"
             },
             "devDependencies": {
@@ -5786,6 +5786,12 @@
             "dev": true,
             "license": "ISC"
         },
+        "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/test-utils": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.3.6.tgz",
@@ -15017,6 +15023,54 @@
                 "node": ">=6"
             }
         },
+        "node_modules/pinia": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+            "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+            "license": "MIT",
+            "dependencies": {
+                "@vue/devtools-api": "^6.6.3",
+                "vue-demi": "^0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.4.4",
+                "vue": "^2.7.0 || ^3.5.11"
+            },
+            "peerDependenciesMeta": {
+                "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/pinkie": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -20207,7 +20261,7 @@
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
             "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
-            "dev": true,
+            "devOptional": true,
             "license": "Apache-2.0",
             "bin": {
                 "tsc": "bin/tsc",
@@ -20949,15 +21003,6 @@
                 "sortablejs": "1.10.2"
             }
         },
-        "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/w3c-xmlserializer": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index fb0653e72e..50fc60c881 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
         "luxon": "^1.28.1",
         "no-scroll": "^2.1.1",
         "node-vibrant": "^4.0.4",
+        "pinia": "^2.3.1",
         "popper.js": "^1.16.1",
         "register-service-worker": "^1.7.2",
         "selectize": "^0.12.6",
@@ -60,7 +61,6 @@
         "vue-multiselect": "^2.1.8",
         "vue-trumbowyg": "^3.6.2",
         "vuedraggable": "^2.24.3",
-        "vuex": "^3.6.2",
         "zxcvbn": "^4.4.2"
     },
     "devDependencies": {
diff --git a/templates/pages/about.html.twig b/templates/pages/about.html.twig
index 1f62346b67..595a7f031d 100644
--- a/templates/pages/about.html.twig
+++ b/templates/pages/about.html.twig
@@ -72,7 +72,7 @@
         <li><a href="https://twig.sensiolabs.org/" target="_blank">Twig</a> - flexible, fast, and secure template engine.</li>
         <li><a href="https://getbootstrap.com/" target="_blank">Bootstrap 4</a> and
             <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>.</li>
-        <li><a href="https://vuejs.org/" target="_blank">Vue</a> and VueX.</li>
+        <li><a href="https://vuejs.org/" target="_blank">Vue</a> and <a href="https://pinia.vuejs.org/" target="_blank">Pinia</a>.</li>
         <li><a href="https://codemirror.net/" target="_blank">CodeMirror</a>.</li>
         <li><a href="https://webpack.js.org/" target="_blank">Webpack</a> and
             <a href="https://symfony.com/doc/current/frontend/encore/installation.html" target="_blank">Symfony Encore</a>.</li>
diff --git a/tests/unit/README.md b/tests/unit/README.md
index f0d4e7970a..a06f40ee1e 100644
--- a/tests/unit/README.md
+++ b/tests/unit/README.md
@@ -1,6 +1,6 @@
 # Frontend unit tests
 
-Vitest + `@vue/test-utils` over the Vue 2.7 admin components, the Vuex stores,
+Vitest + `@vue/test-utils` over the Vue 2.7 admin components, the Pinia stores,
 the filters and the app-level scripts. `npm run test:unit` to run,
 `npm run test:unit:watch` while working, `npm run test:unit:coverage` for the
 gate CI enforces.
@@ -31,8 +31,8 @@ regression baseline rather than a round of manual clicking.
    mount against Twig-rendered markup. The specs under `app/` are the exception:
    those scripts expect a whole page, so each lays out the markup it needs.
 4. **Seed store state through `helpers/store.ts`**, then assert through the
-   rendered DOM or the spied `dispatch`. The factories build a real store from
-   the app's own modules, so real getters and mutations run.
+   rendered DOM or the recorded `writes()` and `calls()`. The factories build a
+   real Pinia from the app's own stores, so real getters and actions run.
 5. **Vue warnings fail the test.** Two known defects are allowed for in
    `helpers/warnings.ts`; a spec that deliberately provokes another declares it
    with `expectVueWarning()`, which also asserts the warning happened.
@@ -50,7 +50,7 @@ regression baseline rather than a round of manual clicking.
 
     setup.ts        global setup: jQuery globals, jsdom gaps, per-test teardown
     helpers/
-      store.ts      Vuex store factories over the real modules
+      store.ts      Pinia factories over the real stores
       stubs.ts      third-party component stubs, keyed by template tag
       dom.ts        the Twig-rendered surroundings components query
       warnings.ts   Vue warning policy
@@ -69,9 +69,9 @@ layer, so the upgrade edits them. Most of it is mechanical:
 | change | scope |
 |---|---|
 | `propsData:` → `props:` | every mount |
-| `stubs:` / `localVue` / `store:` → `global: { stubs, plugins }` | every mount that has them |
+| `stubs:` / `localVue` / `pinia:` → `global: { stubs, plugins }` | every mount that has them |
 | `wrapper.destroy()` → `unmount()`, `findAll(...).at(i)` → `[i]` | mechanical |
-| Vuex → Pinia | `helpers/store.ts` and the specs that seed state |
+| pinia 2 → 3, `PiniaVuePlugin` → `app.use(pinia)` | `helpers/store.ts` and the boot files |
 | `$root.$emit`/`$on` → the mitt bus | `helpers/bus.ts`, plus Text and Slug |
 | vue-multiselect 2→3, vuedraggable 2→4, trumbowyg 3→4, easymde | `helpers/stubs.ts` |
 | `flushPromises` | delete `helpers/async.ts`, import from test-utils |
@@ -81,6 +81,5 @@ is why rule 1 matters. Keeping assertions at the DOM means the specs survive
 components becoming `<script setup>`, where internals stop being exposed on the
 instance.
 
-`tests/unit/shims-vue.d.ts` and `shims-vuex.d.ts` both go away: the first once
-SFCs are `<script setup lang="ts">` and the checker becomes `vue-tsc`, the
-second with Vuex.
+`tests/unit/shims-vue.d.ts` goes away once SFCs are `<script setup lang="ts">`
+and the checker becomes `vue-tsc`.
diff --git a/tests/unit/components/listing/Filter.spec.ts b/tests/unit/components/listing/Filter.spec.ts
index 6fe362f738..df64388fcd 100644
--- a/tests/unit/components/listing/Filter.spec.ts
+++ b/tests/unit/components/listing/Filter.spec.ts
@@ -12,9 +12,13 @@ const labels = {
 
 const mountFilter = (seed: ListingSeed = {}) => {
     const testStore = createListingStore(seed);
+    const selectAlls = testStore.writes('selecting', 'selectAll');
+    const rowSizes = testStore.writes('general', 'rowSize');
     return {
         ...testStore,
-        wrapper: mount(Filter, { localVue: testStore.localVue, store: testStore.store, propsData: { labels } }),
+        selectAlls,
+        rowSizes,
+        wrapper: mount(Filter, { localVue: testStore.localVue, pinia: testStore.pinia, propsData: { labels } }),
     };
 };
 
@@ -39,14 +43,14 @@ describe('Listing Filter', () => {
     });
 
     it('turns select-all on and off again', async () => {
-        const { wrapper, store, dispatched } = mountFilter({ general: { type: 'pages' } });
+        const { wrapper, stores, selectAlls } = mountFilter({ general: { type: 'pages' } });
 
         await wrapper.find('#selectAll').trigger('click');
-        expect(store.getters['selecting/selectAll']).toBe(true);
+        expect(stores.selecting.selectAll).toBe(true);
 
         await wrapper.find('#selectAll').trigger('click');
-        expect(store.getters['selecting/selectAll']).toBe(false);
-        expect(dispatched('selecting/selectAll')).toEqual([true, false]);
+        expect(stores.selecting.selectAll).toBe(false);
+        expect(selectAlls).toEqual([true, false]);
     });
 
     it('marks the button matching the current row size', () => {
@@ -58,50 +62,51 @@ describe('Listing Filter', () => {
     });
 
     it('switches the row size and remembers it', async () => {
-        const { wrapper, store, dispatched } = mountFilter({ general: { type: 'pages' } });
+        const { wrapper, stores, rowSizes } = mountFilter({ general: { type: 'pages' } });
 
         await wrapper.findAll('.control--button').at(1).trigger('click');
 
-        expect(store.getters['general/getRowSize']).toBe('small');
+        expect(stores.general.rowSize).toBe('small');
         expect(localStorage.getItem('listing-row-size')).toBe('small');
-        expect(dispatched('general/setRowSize')).toEqual(['small']);
+        expect(rowSizes).toEqual(['small']);
     });
 
     it('restores a remembered row size on creation', () => {
         localStorage.setItem('listing-row-size', 'small');
 
-        const { store } = mountFilter({ general: { type: 'pages' } });
+        const { stores, rowSizes } = mountFilter({ general: { type: 'pages' } });
 
-        expect(store.getters['general/getRowSize']).toBe('small');
+        expect(stores.general.rowSize).toBe('small');
+        expect(rowSizes).toEqual(['small']);
     });
 
     it('keeps the default row size when nothing is remembered', () => {
-        const { store, dispatched } = mountFilter({ general: { type: 'pages' } });
+        const { stores, rowSizes } = mountFilter({ general: { type: 'pages' } });
 
-        expect(store.getters['general/getRowSize']).toBe('normal');
-        expect(dispatched('general/setRowSize')).toEqual([]);
+        expect(stores.general.rowSize).toBe('normal');
+        expect(rowSizes).toEqual([]);
     });
 
     it('can turn sorting on, though no control is rendered for it', async () => {
         // `enableSorting` is dead code: the only button that called it is
         // commented out in the template. Pinned through the instance so the
         // Vue 3 migration can decide whether the feature comes back or goes.
-        const { wrapper, store } = mountFilter({ general: { type: 'pages' } });
+        const { wrapper, stores } = mountFilter({ general: { type: 'pages' } });
 
         await (wrapper.vm as unknown as { enableSorting: (on: boolean) => void }).enableSorting(true);
 
-        expect(store.getters['general/getSorting']).toBe(true);
+        expect(stores.general.sorting).toBe(true);
         expect(wrapper.find('.control--button.is-active').exists()).toBe(false);
     });
 
     it('clears select-all when sorting starts', async () => {
-        const { store, dispatched } = mountFilter({ general: { type: 'pages' } });
+        const { stores, selectAlls } = mountFilter({ general: { type: 'pages' } });
 
-        await store.dispatch('selecting/selectAll', true);
-        await store.dispatch('general/setSorting', true);
+        stores.selecting.selectAll = true;
+        stores.general.sorting = true;
         await nextTick();
 
-        expect(store.getters['selecting/selectAll']).toBe(false);
-        expect(dispatched('selecting/selectAll')).toEqual([true, false]);
+        expect(stores.selecting.selectAll).toBe(false);
+        expect(selectAlls).toEqual([true, false]);
     });
 });
diff --git a/tests/unit/components/listing/Records.spec.ts b/tests/unit/components/listing/Records.spec.ts
index c20d470d94..705522261f 100644
--- a/tests/unit/components/listing/Records.spec.ts
+++ b/tests/unit/components/listing/Records.spec.ts
@@ -11,23 +11,27 @@ describe('Listing Records', () => {
 
     const mountRecords = (props: Record<string, unknown> = {}) => {
         const testStore = createListingStore();
+        const types = testStore.writes('general', 'type');
+        const written = testStore.writes('listing', 'records');
         return {
             ...testStore,
+            types,
+            written,
             wrapper: mount(Records, {
                 localVue: testStore.localVue,
-                store: testStore.store,
+                pinia: testStore.pinia,
                 propsData: { type: 'articles', data: records, labels: { title: 'Title' }, ...props },
             }),
         };
     };
 
     it('seeds the store from its props on creation', () => {
-        const { store, dispatched } = mountRecords();
+        const { stores, types, written } = mountRecords();
 
-        expect(dispatched('general/setType')).toEqual(['articles']);
-        expect(dispatched('listing/setRecords')).toEqual([records]);
-        expect(store.getters['general/getType']).toBe('articles');
-        expect(store.getters['listing/getRecords']).toEqual(records);
+        expect(types).toEqual(['articles']);
+        expect(written).toEqual([records]);
+        expect(stores.general.type).toBe('articles');
+        expect(stores.listing.records).toEqual(records);
     });
 
     it('renders its container', () => {
diff --git a/tests/unit/components/listing/Row.spec.ts b/tests/unit/components/listing/Row.spec.ts
index d840776d18..11beb653b8 100644
--- a/tests/unit/components/listing/Row.spec.ts
+++ b/tests/unit/components/listing/Row.spec.ts
@@ -31,7 +31,7 @@ const mountRow = (seed: ListingSeed = {}, overrides: Record<string, unknown> = {
     const testStore = createListingStore({ general: { type: 'pages' }, ...seed });
     return mount(Row, {
         localVue: testStore.localVue,
-        store: testStore.store,
+        pinia: testStore.pinia,
         propsData: { record: { ...record, ...overrides }, labels },
     });
 };
@@ -100,13 +100,13 @@ describe('Listing Row', () => {
         const testStore = createListingStore({ general: { type: 'pages', rowSize: 'small' } });
         const wrapper = mount(Row, {
             localVue: testStore.localVue,
-            store: testStore.store,
+            pinia: testStore.pinia,
             propsData: { record, labels },
         });
 
         expect(wrapper.find('.listing__row').classes()).toContain('is-small');
 
-        await testStore.store.dispatch('general/setRowSize', 'normal');
+        testStore.stores.general.rowSize = 'normal';
         await nextTick();
 
         expect(wrapper.find('.listing__row').classes()).toContain('is-normal');
@@ -148,12 +148,12 @@ describe('Listing Row', () => {
         const testStore = createListingStore({ general: { type: 'pages' } });
         const wrapper = mount(Row, {
             localVue: testStore.localVue,
-            store: testStore.store,
+            pinia: testStore.pinia,
             propsData: { record, labels },
         });
         expect((wrapper.vm as unknown as { sorting: boolean }).sorting).toBe(false);
 
-        await testStore.store.dispatch('general/setSorting', true);
+        testStore.stores.general.sorting = true;
         await nextTick();
 
         expect((wrapper.vm as unknown as { sorting: boolean }).sorting).toBe(true);
diff --git a/tests/unit/components/listing/RowCheckbox.spec.ts b/tests/unit/components/listing/RowCheckbox.spec.ts
index e803cefb61..5702bd3783 100644
--- a/tests/unit/components/listing/RowCheckbox.spec.ts
+++ b/tests/unit/components/listing/RowCheckbox.spec.ts
@@ -8,7 +8,9 @@ const mountCheckbox = (seed: ListingSeed = {}) => {
     const testStore = createListingStore(seed);
     return {
         ...testStore,
-        wrapper: mount(Checkbox, { localVue: testStore.localVue, store: testStore.store, propsData: { id: 7 } }),
+        selects: testStore.calls('selecting', 'select'),
+        deSelects: testStore.calls('selecting', 'deSelect'),
+        wrapper: mount(Checkbox, { localVue: testStore.localVue, pinia: testStore.pinia, propsData: { id: 7 } }),
     };
 };
 
@@ -21,64 +23,64 @@ describe('Listing row Checkbox', () => {
     });
 
     it('is hidden while sorting is on', async () => {
-        const { wrapper, store } = mountCheckbox();
+        const { wrapper, stores } = mountCheckbox();
         expect(wrapper.find('.listing--checkbox').isVisible()).toBe(true);
 
-        await store.dispatch('general/setSorting', true);
+        stores.general.sorting = true;
         await nextTick();
 
         expect(wrapper.find('.listing--checkbox').isVisible()).toBe(false);
     });
 
     it('selects the record in the store when ticked', async () => {
-        const { wrapper, store, dispatched } = mountCheckbox();
+        const { wrapper, stores, selects } = mountCheckbox();
         await wrapper.find('input').setChecked(true);
 
-        expect(dispatched('selecting/select')).toEqual([7]);
-        expect(store.getters['selecting/selected']).toEqual([7]);
+        expect(selects).toEqual([[7]]);
+        expect(stores.selecting.selected).toEqual([7]);
     });
 
     it('deselects the record when unticked', async () => {
-        const { wrapper, store, dispatched } = mountCheckbox();
+        const { wrapper, stores, deSelects } = mountCheckbox();
         await wrapper.find('input').setChecked(true);
         await wrapper.find('input').setChecked(false);
 
-        expect(dispatched('selecting/deSelect')).toEqual([7]);
-        expect(store.getters['selecting/selected']).toEqual([]);
+        expect(deSelects).toEqual([[7]]);
+        expect(stores.selecting.selected).toEqual([]);
     });
 
     it('follows the select-all flag', async () => {
-        const { wrapper, store, dispatched } = mountCheckbox();
+        const { wrapper, stores, selects, deSelects } = mountCheckbox();
 
-        await store.dispatch('selecting/selectAll', true);
+        stores.selecting.selectAll = true;
         await nextTick();
         expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true);
-        expect(dispatched('selecting/select')).toEqual([7]);
+        expect(selects).toEqual([[7]]);
 
-        await store.dispatch('selecting/selectAll', false);
+        stores.selecting.selectAll = false;
         await nextTick();
         expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false);
-        expect(dispatched('selecting/deSelect')).toEqual([7]);
+        expect(deSelects).toEqual([[7]]);
     });
 
     it('keeps its selection when sorting is turned off again', async () => {
-        const { wrapper, store } = mountCheckbox({ general: { sorting: true } });
+        const { wrapper, stores } = mountCheckbox({ general: { sorting: true } });
         await wrapper.find('input').setChecked(true);
 
-        await store.dispatch('general/setSorting', false);
+        stores.general.sorting = false;
         await nextTick();
 
         expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true);
     });
 
     it('clears its selection when sorting starts', async () => {
-        const { wrapper, store, dispatched } = mountCheckbox();
+        const { wrapper, stores, deSelects } = mountCheckbox();
         await wrapper.find('input').setChecked(true);
 
-        await store.dispatch('general/setSorting', true);
+        stores.general.sorting = true;
         await nextTick();
 
         expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false);
-        expect(dispatched('selecting/deSelect')).toEqual([7]);
+        expect(deSelects).toEqual([[7]]);
     });
 });
diff --git a/tests/unit/components/listing/RowSorting.spec.ts b/tests/unit/components/listing/RowSorting.spec.ts
index 521c167f89..9fc04c0cb7 100644
--- a/tests/unit/components/listing/RowSorting.spec.ts
+++ b/tests/unit/components/listing/RowSorting.spec.ts
@@ -5,7 +5,7 @@ import { createListingStore } from '../../helpers/store';
 
 const mountSorting = (sorting: boolean) => {
     const testStore = createListingStore({ general: { sorting } });
-    return mount(Sorting, { localVue: testStore.localVue, store: testStore.store });
+    return mount(Sorting, { localVue: testStore.localVue, pinia: testStore.pinia });
 };
 
 describe('Listing row Sorting handle', () => {
diff --git a/tests/unit/components/listing/SelectBox.spec.ts b/tests/unit/components/listing/SelectBox.spec.ts
index 0caafc536c..0da51adf34 100644
--- a/tests/unit/components/listing/SelectBox.spec.ts
+++ b/tests/unit/components/listing/SelectBox.spec.ts
@@ -26,7 +26,7 @@ const mountSelectBox = (seed: ListingSeed, props: Record<string, unknown> = {})
     const testStore = createListingStore(seed);
     return mount(SelectBox, {
         localVue: testStore.localVue,
-        store: testStore.store,
+        pinia: testStore.pinia,
         propsData: { ...propsData, ...props },
         stubs: { multiselect: multiselectStub },
     });
@@ -41,13 +41,13 @@ const chooseAction = async (wrapper: ReturnType<typeof mount>, key: string) => {
 
 describe('Listing SelectBox', () => {
     it('stays hidden while nothing is selected', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 0 } });
+        const wrapper = mountSelectBox({ selecting: { selected: [] } });
 
         expect(wrapper.find('.card').exists()).toBe(false);
     });
 
     it('uses the singular noun for a single selected record', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } });
 
         // The count and the noun are separated visually by a css margin, not
         // by whitespace, so the text nodes run together.
@@ -57,14 +57,14 @@ describe('Listing SelectBox', () => {
     });
 
     it('uses the plural noun for several selected records', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 3, selected: [1, 2, 3] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1, 2, 3] } });
 
         expect(wrapper.find('.card-header .is-primary').text()).toBe('3');
         expect(wrapper.find('.card-header').text()).toContain('records selected');
     });
 
     it('offers the three status changes and delete', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } });
 
         const options = wrapper.findComponent(multiselectStub).props('options') as { key: string; value: string }[];
         expect(options.map(option => option.key)).toEqual([
@@ -77,7 +77,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('renders an icon and a label for each option', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } });
 
         const first = wrapper.findAll('.stub-option').at(0);
         expect(first.find('span').classes()).toContain('is-published');
@@ -85,7 +85,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('disables the submit button until an action is chosen', async () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } });
 
         expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBeDefined();
 
@@ -95,7 +95,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('posts to the bulk endpoint for the chosen action', async () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 2, selected: [1, 2] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1, 2] } });
 
         expect(wrapper.find('form').attributes('action')).toBe('');
 
@@ -105,7 +105,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('builds a relative post url when there is no backend prefix', async () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } }, { backendPrefix: '' });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } }, { backendPrefix: '' });
 
         await chooseAction(wrapper, 'status/held');
 
@@ -113,7 +113,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('submits the selected ids and the csrf token', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 2, selected: [4, 9] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [4, 9] } });
 
         expect(wrapper.find('input[name="records"]').attributes('value')).toBe('4,9');
         expect(wrapper.find('input[name="_csrf_token"]').attributes('value')).toBe('token-123');
@@ -123,12 +123,12 @@ describe('Listing SelectBox', () => {
         // The `order` computed is dead code — no template or form field reads
         // it. Pinned through the instance so the Vue 3 migration can see it.
         const testStore = createListingStore({
-            selecting: { selectedCount: 1, selected: [1] },
+            selecting: { selected: [1] },
             listing: { records: [{ id: 3 }, { id: 1 }] },
         });
         const wrapper = mount(SelectBox, {
             localVue: testStore.localVue,
-            store: testStore.store,
+            pinia: testStore.pinia,
             propsData,
             stubs: { multiselect: multiselectStub },
         });
@@ -138,7 +138,7 @@ describe('Listing SelectBox', () => {
     });
 
     it('labels the submit button', () => {
-        const wrapper = mountSelectBox({ selecting: { selectedCount: 1, selected: [1] } });
+        const wrapper = mountSelectBox({ selecting: { selected: [1] } });
 
         expect(wrapper.find('button[type="submit"]').text()).toBe('Update all');
     });
diff --git a/tests/unit/components/listing/Table.spec.ts b/tests/unit/components/listing/Table.spec.ts
index bcd36828ec..9a0b0ac2fc 100644
--- a/tests/unit/components/listing/Table.spec.ts
+++ b/tests/unit/components/listing/Table.spec.ts
@@ -28,11 +28,13 @@ const renderedIds = (wrapper: ReturnType<typeof mount>) =>
 
 const mountTable = (seedRecords: unknown[]) => {
     const testStore = createListingStore({ listing: { records: seedRecords } });
+    const written = testStore.writes('listing', 'records');
     return {
         ...testStore,
+        written,
         wrapper: mount(Table, {
             localVue: testStore.localVue,
-            store: testStore.store,
+            pinia: testStore.pinia,
             propsData: { labels },
             stubs: { draggable: draggableStub, 'table-row': rowStub },
         }),
@@ -60,7 +62,7 @@ describe('Listing Table', () => {
     });
 
     it('writes a reordering back to the store', async () => {
-        const { wrapper, store, dispatched } = mountTable(records);
+        const { wrapper, stores, written } = mountTable(records);
         const reordered = [records[1], records[0]];
 
         (wrapper.findComponent(draggableStub).vm as unknown as { reorder: (list: unknown[]) => void }).reorder(
@@ -68,14 +70,14 @@ describe('Listing Table', () => {
         );
         await nextTick();
 
-        expect(dispatched('listing/setRecords')).toEqual([reordered]);
-        expect(store.getters['listing/getOrder']).toEqual([2, 1]);
+        expect(written).toEqual([reordered]);
+        expect(stores.listing.records.map(record => record.id)).toEqual([2, 1]);
     });
 
     it('re-renders in the new order after a reordering', async () => {
-        const { wrapper, store } = mountTable(records);
+        const { wrapper, stores } = mountTable(records);
 
-        await store.dispatch('listing/setRecords', [records[1], records[0]]);
+        stores.listing.records = [records[1], records[0]];
         await nextTick();
 
         expect(renderedIds(wrapper)).toEqual([2, 1]);
diff --git a/tests/unit/components/sidebar/Sidebar.spec.ts b/tests/unit/components/sidebar/Sidebar.spec.ts
index 2bd4f71b66..1a77c9719a 100644
--- a/tests/unit/components/sidebar/Sidebar.spec.ts
+++ b/tests/unit/components/sidebar/Sidebar.spec.ts
@@ -13,9 +13,11 @@ const propsData = {
 
 const mountSidebar = () => {
     const testStore = createSidebarStore();
+    const written = testStore.writes('general', 'slimSidebar');
     return {
         ...testStore,
-        wrapper: mount(Sidebar, { localVue: testStore.localVue, store: testStore.store, propsData }),
+        written,
+        wrapper: mount(Sidebar, { localVue: testStore.localVue, pinia: testStore.pinia, propsData }),
     };
 };
 
@@ -34,25 +36,25 @@ describe('Sidebar', () => {
     it('restores a remembered slim sidebar on creation', () => {
         localStorage.setItem('slim-sidebar', 'true');
 
-        const { store, dispatched } = mountSidebar();
+        const { stores, written } = mountSidebar();
 
-        expect(dispatched('general/slimSidebar')).toEqual([true]);
-        expect(store.getters['general/slimSidebar']).toBe(true);
+        expect(written).toEqual([true]);
+        expect(stores.general.slimSidebar).toBe(true);
     });
 
     it('leaves the sidebar wide when the stored value is false', () => {
         localStorage.setItem('slim-sidebar', 'false');
 
-        const { store, dispatched } = mountSidebar();
+        const { stores, written } = mountSidebar();
 
-        expect(dispatched('general/slimSidebar')).toEqual([]);
-        expect(store.getters['general/slimSidebar']).toBe(false);
+        expect(written).toEqual([]);
+        expect(stores.general.slimSidebar).toBe(false);
     });
 
     it('leaves the sidebar wide when nothing is stored', () => {
-        const { dispatched } = mountSidebar();
+        const { written } = mountSidebar();
 
-        expect(dispatched('general/slimSidebar')).toEqual([]);
+        expect(written).toEqual([]);
     });
 
     it('fails to restore the sidebar when the stored value is not valid JSON', async () => {
@@ -61,16 +63,16 @@ describe('Sidebar', () => {
         // SyntaxError, so the sidebar still renders but silently loses the
         // remembered state instead of falling back to the default.
         localStorage.setItem('slim-sidebar', 'not json');
-        const { store, localVue } = createSidebarStore();
+        const { pinia, localVue, stores } = createSidebarStore();
         let wrapper!: ReturnType<typeof mount>;
 
         const errors = await captureVueErrors(() => {
-            wrapper = mount(Sidebar, { localVue, store, propsData });
+            wrapper = mount(Sidebar, { localVue, pinia, propsData });
         });
 
         expect(errors).toHaveLength(1);
         expect(errors[0]).toBeInstanceOf(SyntaxError);
         expect(wrapper.find('nav.admin__sidebar--nav').exists()).toBe(true);
-        expect(store.getters['general/slimSidebar']).toBe(false);
+        expect(stores.general.slimSidebar).toBe(false);
     });
 });
diff --git a/tests/unit/components/sidebar/SidebarToggler.spec.ts b/tests/unit/components/sidebar/SidebarToggler.spec.ts
index 15eb9265c1..49669e3b29 100644
--- a/tests/unit/components/sidebar/SidebarToggler.spec.ts
+++ b/tests/unit/components/sidebar/SidebarToggler.spec.ts
@@ -11,7 +11,8 @@ const mountToggler = (slimSidebar = false) => {
     const testStore = createSidebarStore({ general: { slimSidebar } });
     return {
         ...testStore,
-        wrapper: mount(SidebarToggler, { localVue: testStore.localVue, store: testStore.store, propsData }),
+        written: testStore.writes('general', 'slimSidebar'),
+        wrapper: mount(SidebarToggler, { localVue: testStore.localVue, pinia: testStore.pinia, propsData }),
     };
 };
 
@@ -26,26 +27,26 @@ describe('SidebarToggler', () => {
     it('asks the store to go slim when clicked', async () => {
         withAdminShell();
 
-        const { wrapper, dispatched } = mountToggler();
+        const { wrapper, written } = mountToggler();
         await wrapper.find('button').trigger('click');
 
-        expect(dispatched('general/slimSidebar')).toEqual([true]);
+        expect(written).toEqual([true]);
     });
 
     it('asks the store to go wide again when already slim', async () => {
         withAdminShell();
 
-        const { wrapper, dispatched } = mountToggler(true);
+        const { wrapper, written } = mountToggler(true);
         await wrapper.find('button').trigger('click');
 
-        expect(dispatched('general/slimSidebar')).toEqual([false]);
+        expect(written).toEqual([false]);
     });
 
     it('marks the admin shell slim and remembers the choice', async () => {
         withAdminShell();
 
-        const { store } = mountToggler();
-        await store.dispatch('general/slimSidebar', true);
+        const { stores } = mountToggler();
+        stores.general.slimSidebar = true;
         await nextTick();
 
         expect(document.querySelector('.admin')!.classList.contains('is-slim')).toBe(true);
@@ -55,8 +56,8 @@ describe('SidebarToggler', () => {
     it('unmarks the admin shell when going wide again', async () => {
         withAdminShell();
 
-        const { store } = mountToggler(true);
-        await store.dispatch('general/slimSidebar', false);
+        const { stores } = mountToggler(true);
+        stores.general.slimSidebar = false;
         await nextTick();
 
         expect(document.querySelector('.admin')!.classList.contains('is-slim')).toBe(false);
diff --git a/tests/unit/components/toolbar/Toolbar.spec.ts b/tests/unit/components/toolbar/Toolbar.spec.ts
index 958e159ad5..7f8104948d 100644
--- a/tests/unit/components/toolbar/Toolbar.spec.ts
+++ b/tests/unit/components/toolbar/Toolbar.spec.ts
@@ -42,11 +42,13 @@ const mountToolbar = (props: Record<string, unknown> = {}, toolbarColor?: string
         document.body.style.setProperty('--admin-toolbar', toolbarColor);
     }
     const testStore = createToolbarStore();
+    const written = testStore.writes('general', 'toolbarColor');
     return {
         ...testStore,
+        written,
         wrapper: mount(Toolbar, {
             localVue: testStore.localVue,
-            store: testStore.store,
+            pinia: testStore.pinia,
             propsData: { ...propsData, ...props },
         }),
     };
@@ -113,10 +115,10 @@ describe('Toolbar', () => {
     });
 
     it('reads the toolbar colour off the page on creation', () => {
-        const { store, dispatched } = mountToolbar({}, '#ffffff');
+        const { stores, written } = mountToolbar({}, '#ffffff');
 
-        expect(dispatched('general/toolbarColor')).toEqual(['#ffffff']);
-        expect(store.getters['general/toolbarColor']).toBe('#ffffff');
+        expect(written).toEqual(['#ffffff']);
+        expect(stores.general.toolbarColor).toBe('#ffffff');
     });
 
     it('uses dark text on a light toolbar', () => {
diff --git a/tests/unit/helpers/store.ts b/tests/unit/helpers/store.ts
index 53eeb36bfc..acc3974638 100644
--- a/tests/unit/helpers/store.ts
+++ b/tests/unit/helpers/store.ts
@@ -1,75 +1,99 @@
-import Vue from 'vue';
-import Vuex, { Store, type Module } from 'vuex';
+import Vue, { watch } from 'vue';
+import { createPinia, PiniaVuePlugin, setActivePinia, type Pinia } from 'pinia';
 import { createLocalVue } from '@vue/test-utils';
-import { vi } from 'vitest';
 
-import listingGeneral from '@/listing/store/modules/general/index.js';
-import listingListing from '@/listing/store/modules/listing/index.js';
-import listingSelecting from '@/listing/store/modules/selecting/index.js';
-import editorGeneral from '@/editor/store/modules/general/index.js';
-import sidebarGeneral from '@/sidebar/store/modules/general/index.js';
-import toolbarGeneral from '@/toolbar/store/modules/general/index.js';
+import { useGeneralStore as useListingGeneralStore, useListingStore, useSelectingStore } from '@/listing/store';
+import { useGeneralStore as useSidebarGeneralStore } from '@/sidebar/store';
+import { useGeneralStore as useToolbarGeneralStore } from '@/toolbar/store';
 
 /**
  * Store factories.
  *
- * These build a *real* store out of the application's own modules, so the real
- * getters, mutations and actions run — only the initial state is seeded.
+ * These build a *real* Pinia instance out of the application's own stores, so
+ * the real getters and actions run — only the initial state is seeded.
  *
- * Two things make this necessary rather than importing the store directly:
+ * Each factory makes a fresh Pinia and makes it the active one, so no state is
+ * shared across specs. Pass `localVue` and `pinia` to mount() so the component
+ * resolves the same stores the spec seeded and observes.
  *
- *  - Each `store/index.js` exports `new Vuex.Store(...)`, a module-level
- *    singleton, so importing it would share state across every spec in a run.
- *  - The modules export their state as a plain shared object (`const state =
- *    {...}; export default state`) rather than a factory, so even a fresh
- *    `new Vuex.Store()` would alias the same state object. Hence the clone.
+ * The components write most of their state straight onto the store rather than
+ * going through an action, so there are two recorders: `writes()` for state
+ * assignments and `calls()` for actions.
  */
 
-// The store modules are plain untyped JS, so this describes only the shape the
-// helpers below need to read: the state to clone, and the rest passed straight
-// through to Vuex.
-type StoreModule = Module<Record<string, unknown>, unknown> & {
-    state: Record<string, unknown>;
+type AnyStore = {
+    $id: string;
+    $patch(state: Record<string, unknown>): void;
+    $onAction(callback: (context: { name: string; args: unknown[] }) => void): () => void;
 };
 
-export interface TestStore {
-    /** Pass to mount() as `store`. */
-    store: Store<unknown>;
+export interface TestStore<Stores extends Record<string, AnyStore>> {
+    /** Pass to mount() as `pinia`. */
+    pinia: Pinia;
     /** Pass to mount() as `localVue`. */
     localVue: typeof Vue;
-    /** Arguments of every `dispatch('<name>', payload)` call, in order. */
-    dispatched(action: string): unknown[];
+    /** The stores themselves, for reading state back. */
+    stores: Stores;
+    /**
+     * Every value written to `stores[store][key]`, in order. Only changes are
+     * seen — writing the value a key already holds records nothing. Recording
+     * starts at the first call, so call it before mount() to catch a write
+     * made in `created`.
+     */
+    writes(store: keyof Stores, key: string): unknown[];
+    /** Arguments of every call to the action `stores[store][action]`, in order. */
+    calls(store: keyof Stores, action: string): unknown[][];
 }
 
-function seedModule(module: StoreModule, seed: Record<string, unknown> = {}): StoreModule {
-    return {
-        ...module,
-        // A factory, so each store gets its own state object. The seed is
-        // cloned too: callers routinely pass a fixture defined once at the top
-        // of a spec, and mutations like `selecting/select` push straight into
-        // state, which would write back into that shared fixture.
-        state: () => ({ ...structuredClone(module.state), ...structuredClone(seed) }),
-    } as unknown as StoreModule;
-}
-
-function build(modules: Record<string, StoreModule>, seeds: Record<string, Record<string, unknown>>): TestStore {
+function build<Stores extends Record<string, AnyStore>>(
+    create: () => Stores,
+    seeds: Partial<Record<keyof Stores, Record<string, unknown>>>,
+): TestStore<Stores> {
     const localVue = createLocalVue();
-    localVue.use(Vuex);
+    localVue.use(PiniaVuePlugin);
 
-    const seeded: Record<string, StoreModule> = {};
-    for (const [name, module] of Object.entries(modules)) {
-        seeded[name] = seedModule(module, seeds[name]);
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const stores = create();
+    for (const [name, seed] of Object.entries(seeds)) {
+        // Cloned: callers routinely pass a fixture defined once at the top of
+        // a spec, and actions like `select` push straight into state, which
+        // would write back into that shared fixture.
+        stores[name as keyof Stores].$patch(structuredClone(seed as Record<string, unknown>));
     }
 
-    const store = new Vuex.Store({ modules: seeded });
-    const dispatch = vi.spyOn(store, 'dispatch');
+    const written: Record<string, unknown[]> = {};
+    const called: Record<string, unknown[][]> = {};
 
     return {
-        store,
+        pinia,
         localVue,
-        dispatched(action: string): unknown[] {
-            const calls = dispatch.mock.calls as unknown as [string, unknown][];
-            return calls.filter(call => call[0] === action).map(call => call[1]);
+        stores,
+        writes(store, key) {
+            const id = `${String(store)}.${key}`;
+            if (!written[id]) {
+                written[id] = [];
+                const target = stores[store] as unknown as Record<string, unknown>;
+                watch(
+                    () => target[key],
+                    value => written[id].push(value),
+                    { flush: 'sync' },
+                );
+            }
+            return written[id];
+        },
+        calls(store, action) {
+            const id = `${String(store)}.${action}`;
+            if (!called[id]) {
+                called[id] = [];
+                stores[store].$onAction(({ name, args }) => {
+                    if (name === action) {
+                        called[id].push(args);
+                    }
+                });
+            }
+            return called[id];
         },
     };
 }
@@ -77,32 +101,24 @@ function build(modules: Record<string, StoreModule>, seeds: Record<string, Recor
 export interface ListingSeed {
     general?: { type?: string | null; rowSize?: string; sorting?: boolean };
     listing?: { records?: unknown[] };
-    selecting?: { selectAll?: boolean; selectedCount?: number; selected?: unknown[] };
+    selecting?: { selectAll?: boolean; selected?: number[] };
 }
 
-export function createListingStore(seed: ListingSeed = {}): TestStore {
+export function createListingStore(seed: ListingSeed = {}) {
     return build(
-        {
-            general: listingGeneral as StoreModule,
-            listing: listingListing as StoreModule,
-            selecting: listingSelecting as StoreModule,
-        },
+        () => ({
+            general: useListingGeneralStore(),
+            listing: useListingStore(),
+            selecting: useSelectingStore(),
+        }),
         seed as Record<string, Record<string, unknown>>,
     );
 }
 
-/**
- * The editor's own store. Note no editor component reads it — the slim-sidebar
- * flag it holds is driven from the sidebar's store instead.
- */
-export function createEditorStore(seed: { general?: { slimSidebar?: boolean } } = {}): TestStore {
-    return build({ general: editorGeneral as StoreModule }, seed as Record<string, Record<string, unknown>>);
-}
-
-export function createSidebarStore(seed: { general?: { slimSidebar?: boolean } } = {}): TestStore {
-    return build({ general: sidebarGeneral as StoreModule }, seed as Record<string, Record<string, unknown>>);
+export function createSidebarStore(seed: { general?: { slimSidebar?: boolean } } = {}) {
+    return build(() => ({ general: useSidebarGeneralStore() }), seed);
 }
 
-export function createToolbarStore(seed: { general?: { toolbarColor?: string | null } } = {}): TestStore {
-    return build({ general: toolbarGeneral as StoreModule }, seed as Record<string, Record<string, unknown>>);
+export function createToolbarStore(seed: { general?: { toolbarColor?: string } } = {}) {
+    return build(() => ({ general: useToolbarGeneralStore() }), seed);
 }
diff --git a/tests/unit/mixins/type.spec.ts b/tests/unit/mixins/type.spec.ts
index cca9877e13..134cd892b0 100644
--- a/tests/unit/mixins/type.spec.ts
+++ b/tests/unit/mixins/type.spec.ts
@@ -13,26 +13,26 @@ const host = {
 
 describe('listing type mixin', () => {
     it('exposes the content type from the store', () => {
-        const { store, localVue } = createListingStore({ general: { type: 'pages' } });
+        const { pinia, localVue } = createListingStore({ general: { type: 'pages' } });
 
-        const wrapper = mount(host, { localVue, store });
+        const wrapper = mount(host, { localVue, pinia });
 
         expect(wrapper.find('.type').text()).toBe('pages');
     });
 
     it('renders nothing before a type is set', () => {
-        const { store, localVue } = createListingStore();
+        const { pinia, localVue } = createListingStore();
 
-        const wrapper = mount(host, { localVue, store });
+        const wrapper = mount(host, { localVue, pinia });
 
         expect(wrapper.find('.type').text()).toBe('');
     });
 
     it('follows a change of type', async () => {
-        const { store, localVue } = createListingStore({ general: { type: 'pages' } });
-        const wrapper = mount(host, { localVue, store });
+        const { pinia, localVue, stores } = createListingStore({ general: { type: 'pages' } });
+        const wrapper = mount(host, { localVue, pinia });
 
-        await store.dispatch('general/setType', 'dashboard');
+        stores.general.type = 'dashboard';
         await nextTick();
 
         expect(wrapper.find('.type').text()).toBe('dashboard');
diff --git a/tests/unit/shims-vuex.d.ts b/tests/unit/shims-vuex.d.ts
deleted file mode 100644
index 8960371268..0000000000
--- a/tests/unit/shims-vuex.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type Vue from 'vue';
-import type { Store } from 'vuex';
-
-/**
- * Vuex 3 declares the `store` mount option by augmenting Vue's ComponentOptions
- * in `vuex/types/vue.d.ts`, but nothing pulls that file into the program — its
- * own `index.d.ts` does not reference it. Without the augmentation tsc rejects
- * `mount(Component, { store })`, so it is restated here.
- *
- * Goes away with Vuex: Pinia is installed as a plugin, not a mount option.
- */
-declare module 'vue/types/options' {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface ComponentOptions<V extends Vue> {
-        store?: Store<unknown>;
-    }
-}
diff --git a/tests/unit/store/listing.spec.ts b/tests/unit/store/listing.spec.ts
index af1b93c286..50a70ff8c9 100644
--- a/tests/unit/store/listing.spec.ts
+++ b/tests/unit/store/listing.spec.ts
@@ -1,119 +1,92 @@
 import { describe, expect, it } from 'vitest';
 import { createListingStore } from '../helpers/store';
 
-describe('listing store — general module', () => {
+describe('listing store — general', () => {
     it('starts with no type, normal rows and sorting off', () => {
-        const { store } = createListingStore();
+        const { stores } = createListingStore();
 
-        expect(store.getters['general/getType']).toBeNull();
-        expect(store.getters['general/getRowSize']).toBe('normal');
-        expect(store.getters['general/getSorting']).toBe(false);
+        expect(stores.general.type).toBeNull();
+        expect(stores.general.rowSize).toBe('normal');
+        expect(stores.general.sorting).toBe(false);
     });
 
-    it('records the content type', async () => {
-        const { store } = createListingStore();
+    it('can be seeded', () => {
+        const { stores } = createListingStore({ general: { type: 'pages', rowSize: 'compact', sorting: true } });
 
-        await store.dispatch('general/setType', 'pages');
-
-        expect(store.getters['general/getType']).toBe('pages');
-    });
-
-    it('records the row size and the sorting flag', async () => {
-        const { store } = createListingStore();
-
-        await store.dispatch('general/setRowSize', 'compact');
-        await store.dispatch('general/setSorting', true);
-
-        expect(store.getters['general/getRowSize']).toBe('compact');
-        expect(store.getters['general/getSorting']).toBe(true);
+        expect(stores.general.type).toBe('pages');
+        expect(stores.general.rowSize).toBe('compact');
+        expect(stores.general.sorting).toBe(true);
     });
 });
 
-describe('listing store — listing module', () => {
+describe('listing store — listing', () => {
     it('starts with no records', () => {
-        const { store } = createListingStore();
-
-        expect(store.getters['listing/getRecords']).toEqual([]);
-        expect(store.getters['listing/getOrder']).toEqual([]);
-    });
-
-    it('exposes the record order as a list of ids', async () => {
-        const { store } = createListingStore();
-
-        await store.dispatch('listing/setRecords', [{ id: 7 }, { id: 3 }, { id: 5 }]);
-
-        expect(store.getters['listing/getOrder']).toEqual([7, 3, 5]);
-    });
-
-    it('reflects a reordering in the order getter', async () => {
-        const { store } = createListingStore({ listing: { records: [{ id: 1 }, { id: 2 }] } });
-
-        await store.dispatch('listing/setRecords', [{ id: 2 }, { id: 1 }]);
+        const { stores } = createListingStore();
 
-        expect(store.getters['listing/getOrder']).toEqual([2, 1]);
+        expect(stores.listing.records).toEqual([]);
     });
 });
 
-describe('listing store — selecting module', () => {
+describe('listing store — selecting', () => {
     it('starts with nothing selected', () => {
-        const { store } = createListingStore();
+        const { stores } = createListingStore();
 
-        expect(store.getters['selecting/selectAll']).toBe(false);
-        expect(store.getters['selecting/selected']).toEqual([]);
-        expect(store.getters['selecting/selectedCount']).toBe(0);
+        expect(stores.selecting.selectAll).toBe(false);
+        expect(stores.selecting.selected).toEqual([]);
+        expect(stores.selecting.selectedCount).toBe(0);
     });
 
-    it('tracks selected ids and their count', async () => {
-        const { store } = createListingStore();
+    it('tracks selected ids and their count', () => {
+        const { stores } = createListingStore();
 
-        await store.dispatch('selecting/select', 1);
-        await store.dispatch('selecting/select', 2);
+        stores.selecting.select(1);
+        stores.selecting.select(2);
 
-        expect(store.getters['selecting/selected']).toEqual([1, 2]);
-        expect(store.getters['selecting/selectedCount']).toBe(2);
+        expect(stores.selecting.selected).toEqual([1, 2]);
+        expect(stores.selecting.selectedCount).toBe(2);
     });
 
-    it('removes a deselected id', async () => {
-        const { store } = createListingStore();
+    it('does not select the same id twice', () => {
+        const { stores } = createListingStore();
 
-        await store.dispatch('selecting/select', 1);
-        await store.dispatch('selecting/select', 2);
-        await store.dispatch('selecting/deSelect', 1);
+        stores.selecting.select(1);
+        stores.selecting.select(1);
 
-        expect(store.getters['selecting/selected']).toEqual([2]);
-        expect(store.getters['selecting/selectedCount']).toBe(1);
+        expect(stores.selecting.selected).toEqual([1]);
+        expect(stores.selecting.selectedCount).toBe(1);
     });
 
-    it('lets the count drift below the list when an unselected id is deselected', async () => {
-        // Pinning current behaviour: deSelect decrements unconditionally but only
-        // splices when the id is actually present, so the count and the list can
-        // disagree. Components never take that path today, which is why it has
-        // gone unnoticed.
-        const { store } = createListingStore();
+    it('removes a deselected id', () => {
+        const { stores } = createListingStore();
 
-        await store.dispatch('selecting/select', 1);
-        await store.dispatch('selecting/deSelect', 99);
+        stores.selecting.select(1);
+        stores.selecting.select(2);
+        stores.selecting.deSelect(1);
 
-        expect(store.getters['selecting/selected']).toEqual([1]);
-        expect(store.getters['selecting/selectedCount']).toBe(0);
+        expect(stores.selecting.selected).toEqual([2]);
+        expect(stores.selecting.selectedCount).toBe(1);
     });
 
-    it('records the select-all flag', async () => {
-        const { store } = createListingStore();
+    it('keeps the count in step with the list when an unselected id is deselected', () => {
+        // The Vuex module decremented the count unconditionally, so it could
+        // drift below the list. The count is now derived from the list.
+        const { stores } = createListingStore();
 
-        await store.dispatch('selecting/selectAll', true);
+        stores.selecting.select(1);
+        stores.selecting.deSelect(99);
 
-        expect(store.getters['selecting/selectAll']).toBe(true);
+        expect(stores.selecting.selected).toEqual([1]);
+        expect(stores.selecting.selectedCount).toBe(1);
     });
 });
 
 describe('store factory isolation', () => {
-    it('gives each store its own state', async () => {
+    it('gives each store its own state', () => {
         const first = createListingStore();
         const second = createListingStore();
 
-        await first.store.dispatch('listing/setRecords', [{ id: 1 }]);
+        first.stores.listing.records = [{ id: 1 }];
 
-        expect(second.store.getters['listing/getRecords']).toEqual([]);
+        expect(second.stores.listing.records).toEqual([]);
     });
 });
diff --git a/tests/unit/store/multi-root.spec.ts b/tests/unit/store/multi-root.spec.ts
new file mode 100644
index 0000000000..3b94822d7c
--- /dev/null
+++ b/tests/unit/store/multi-root.spec.ts
@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { describe, expect, it } from 'vitest';
+import Filter from '@/listing/Components/Filter.vue';
+import Checkbox from '@/listing/Components/Table/Row/_Checkbox.vue';
+import SidebarToggler from '@/sidebar/Components/_SidebarToggler.vue';
+import { createListingStore, createSidebarStore } from '../helpers/store';
+import { withAdminShell } from '../helpers/dom';
+
+/**
+ * The toolbar, sidebar and listing are separate Vue roots on one page, each
+ * with its own Pinia. Every factory in helpers/store.ts makes its Pinia the
+ * active one, so mounting a second root here leaves the *other* Pinia active —
+ * as the last root to boot does in the admin.
+ *
+ * Vue 2 only, in what it guards: outside setup() and the lifecycle hooks — in
+ * a watcher, an event handler — Vue 2.7 has no current instance, so a bare
+ * `useXStore()` falls back to the active Pinia and would write into the wrong
+ * root. That is why the components pass `this.$pinia`. Once they are
+ * `<script setup>` on Vue 3, `useXStore()` runs in setup and always injects
+ * its own app's Pinia, the argument goes, and these tests stay as they are.
+ */
+describe('stores across Vue roots', () => {
+    it('keeps a listing write in its own root', async () => {
+        const first = createListingStore({ general: { type: 'pages' } });
+        const filter = mount(Filter, {
+            localVue: first.localVue,
+            pinia: first.pinia,
+            propsData: { labels: { select_all: 'Select all' } },
+        });
+        mount(Checkbox, { localVue: first.localVue, pinia: first.pinia, propsData: { id: 7 } });
+
+        const second = createListingStore({ general: { type: 'pages' } });
+        mount(Filter, {
+            localVue: second.localVue,
+            pinia: second.pinia,
+            propsData: { labels: { select_all: 'Select all' } },
+        });
+
+        // A click handler on Filter, then the watcher chain on Checkbox.
+        await filter.find('#selectAll').trigger('click');
+        await nextTick();
+
+        expect(first.stores.selecting.selectAll).toBe(true);
+        expect(first.stores.selecting.selected).toEqual([7]);
+        expect(second.stores.selecting.selectAll).toBe(false);
+        expect(second.stores.selecting.selected).toEqual([]);
+    });
+
+    it('keeps a sidebar write in its own root', async () => {
+        withAdminShell();
+
+        const sidebar = createSidebarStore();
+        const toggler = mount(SidebarToggler, {
+            localVue: sidebar.localVue,
+            pinia: sidebar.pinia,
+            propsData: { version: '6.1.7', aboutLink: '/bolt/about', labels: { toggler: 'Toggle sidebar' } },
+        });
+
+        // The listing boots after the sidebar, so its Pinia is the active one.
+        createListingStore();
+
+        await toggler.find('button').trigger('click');
+        await nextTick();
+
+        expect(sidebar.stores.general.slimSidebar).toBe(true);
+        expect(document.querySelector('.admin')!.classList.contains('is-slim')).toBe(true);
+    });
+});
diff --git a/tests/unit/store/sidebar-toolbar.spec.ts b/tests/unit/store/sidebar-toolbar.spec.ts
index 907187dea3..754b5ef0eb 100644
--- a/tests/unit/store/sidebar-toolbar.spec.ts
+++ b/tests/unit/store/sidebar-toolbar.spec.ts
@@ -1,48 +1,24 @@
 import { describe, expect, it } from 'vitest';
-import { createEditorStore, createSidebarStore, createToolbarStore } from '../helpers/store';
+import { createSidebarStore, createToolbarStore } from '../helpers/store';
 
 describe('sidebar store', () => {
     it('starts with a full-width sidebar', () => {
-        expect(createSidebarStore().store.getters['general/slimSidebar']).toBe(false);
-    });
-
-    it('records the slim flag', async () => {
-        const { store } = createSidebarStore();
-
-        await store.dispatch('general/slimSidebar', true);
-
-        expect(store.getters['general/slimSidebar']).toBe(true);
+        expect(createSidebarStore().stores.general.slimSidebar).toBe(false);
     });
 
     it('can be seeded as slim', () => {
-        expect(createSidebarStore({ general: { slimSidebar: true } }).store.getters['general/slimSidebar']).toBe(true);
+        expect(createSidebarStore({ general: { slimSidebar: true } }).stores.general.slimSidebar).toBe(true);
     });
 });
 
 describe('toolbar store', () => {
     it('starts with no colour', () => {
-        expect(createToolbarStore().store.getters['general/toolbarColor']).toBeNull();
-    });
-
-    it('records the toolbar colour', async () => {
-        const { store } = createToolbarStore();
-
-        await store.dispatch('general/toolbarColor', '#112233');
-
-        expect(store.getters['general/toolbarColor']).toBe('#112233');
+        expect(createToolbarStore().stores.general.toolbarColor).toBe('');
     });
-});
-
-describe('editor store', () => {
-    it('starts with a full-width sidebar', () => {
-        expect(createEditorStore().store.getters['general/slimSidebar']).toBe(false);
-    });
-
-    it('records the slim flag', async () => {
-        const { store } = createEditorStore();
-
-        await store.dispatch('general/slimSidebar', true);
 
-        expect(store.getters['general/slimSidebar']).toBe(true);
+    it('can be seeded with a colour', () => {
+        expect(createToolbarStore({ general: { toolbarColor: '#112233' } }).stores.general.toolbarColor).toBe(
+            '#112233',
+        );
     });
 });
diff --git a/tsconfig.json b/tsconfig.json
index 3b55892f3d..be58b9ebef 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,10 +26,7 @@
         "sourceMap": true,
 
         "paths": {
-            "@/*": ["./assets/js/app/*"],
-            // Vuex 3 predates package "exports", so under bundler resolution
-            // tsc cannot find its typings. Point at them directly.
-            "vuex": ["./node_modules/vuex/types/index.d.ts"]
+            "@/*": ["./assets/js/app/*"]
         },
         "types": ["vitest/globals"]
     },
diff --git a/vitest.config.ts b/vitest.config.ts
index 0e57c3207e..b0cfbddee6 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +1,11 @@
 import { defineConfig } from 'vitest/config';
 import vue2 from '@vitejs/plugin-vue2';
 import path from 'node:path';
+import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 
 const root = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
 
 export default defineConfig({
     plugins: [vue2()],
@@ -17,6 +19,15 @@ export default defineConfig({
             { find: '@', replacement: path.resolve(root, 'assets/js/app') },
             // Collection.vue calls Vue.compile(), which only the full build ships.
             { find: /^vue$/, replacement: 'vue/dist/vue.esm.js' },
+            // Vue 2 only, as in webpack.config.js: pin vue-demi to its 2.7
+            // build rather than relying on its postinstall having switched it.
+            // Goes away with Pinia 3, which no longer uses vue-demi.
+            {
+                find: /^vue-demi$/,
+                replacement: require.resolve('vue-demi/lib/v2.7/index.mjs', {
+                    paths: [path.dirname(require.resolve('pinia/package.json'))],
+                }),
+            },
             // Markdown.vue's `@import '~easymde/dist/easymde.min.css'` — the webpack
             // `~` prefix means "resolve from node_modules", which Vite does natively.
             { find: /^~/, replacement: '' },
@@ -34,7 +45,11 @@ export default defineConfig({
         include: ['tests/unit/**/*.spec.ts'],
         exclude: ['**/node_modules/**', '**/tests/cypress/**'],
         // @vue/test-utils v1 is CJS and reaches for vue-template-compiler.
-        server: { deps: { inline: ['@vue/test-utils'] } },
+        // Pinia and vue-demi import `vue` themselves: inlined, so that the
+        // aliases above apply and they share the components' copy of Vue.
+        // Externalised, they would get a second copy whose reactivity the
+        // components never see. Pinia 3 drops vue-demi, and with it that entry.
+        server: { deps: { inline: ['@vue/test-utils', 'pinia', 'vue-demi'] } },
         coverage: {
             provider: 'v8',
             reporter: ['text', 'html'],
@@ -52,13 +67,6 @@ export default defineConfig({
                 'assets/js/app/sidebar/index.js',
                 'assets/js/app/toolbar/index.js',
                 'assets/js/app/login/index.js',
-                // The store singletons, for the same reason: each is a single
-                // `new Vuex.Store(...)` wired at boot. The modules they compose
-                // are covered in tests/unit/store.
-                'assets/js/app/*/store/index.js',
-                // Registered nowhere — listing/store/index.js builds itself from
-                // the general, listing and selecting modules only. Dead code.
-                'assets/js/app/listing/store/modules/type/**',
             ],
             // The gate is 90% across the board.
             //
diff --git a/webpack.config.js b/webpack.config.js
index a98a680d5e..d26b5054b5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const WebpackBar = require('webpackbar');
 const Encore = require('@symfony/webpack-encore');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -58,4 +59,15 @@ Encore.addPlugin(
     .enableVueLoader(() => {}, { runtimeCompilerBuild: true })
     .enableTypeScriptLoader();
 
+// Vue 2 only: Pinia 2 reaches Vue through vue-demi, whose default build is the
+// Vue 3 one until its postinstall switches it. An install that skips scripts
+// (--ignore-scripts, pnpm 10) would keep the Vue 3 build and fail to compile
+// against Vue 2.7, so point at the 2.7 build directly. Remove this together
+// with the move to Vue 3 and Pinia 3, which no longer uses vue-demi.
+Encore.addAliases({
+    'vue-demi$': require.resolve('vue-demi/lib/v2.7/index.mjs', {
+        paths: [path.dirname(require.resolve('pinia/package.json'))],
+    }),
+});
+
 module.exports = Encore.getWebpackConfig();