From 8b586728b635a50b62918957721ea8a9a63565df Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 22 Aug 2024 21:31:59 +0200
Subject: [PATCH] [web] Change to Pinia store

---
 web-src/package-lock.json                     | 1092 +++++------------
 web-src/package.json                          |    4 +-
 web-src/src/App.vue                           |   82 +-
 web-src/src/components/ListAlbums.vue         |   16 +-
 web-src/src/components/ListAlbumsSpotify.vue  |   19 +-
 web-src/src/components/ListItemQueueItem.vue  |   21 +-
 web-src/src/components/ListTracksSpotify.vue  |    2 +-
 web-src/src/components/LyricsPane.vue         |   26 +-
 .../src/components/ModalDialogQueueItem.vue   |    9 +-
 .../components/ModalDialogRemotePairing.vue   |    7 +-
 web-src/src/components/ModalDialogTrack.vue   |    7 +-
 web-src/src/components/ModalDialogUpdate.vue  |   20 +-
 web-src/src/components/NavbarBottom.vue       |   43 +-
 web-src/src/components/NavbarItemLink.vue     |   14 +-
 web-src/src/components/NavbarTop.vue          |  107 +-
 web-src/src/components/NotificationList.vue   |   12 +-
 .../src/components/PlayerButtonConsume.vue    |    9 +-
 web-src/src/components/PlayerButtonLyrics.vue |   12 +-
 web-src/src/components/PlayerButtonNext.vue   |    3 +-
 .../src/components/PlayerButtonPlayPause.vue  |   24 +-
 .../src/components/PlayerButtonPrevious.vue   |   10 +-
 web-src/src/components/PlayerButtonRepeat.vue |   11 +-
 .../src/components/PlayerButtonSeekBack.vue   |   25 +-
 .../components/PlayerButtonSeekForward.vue    |   25 +-
 .../src/components/PlayerButtonShuffle.vue    |    9 +-
 web-src/src/components/SettingsCheckbox.vue   |   11 +-
 web-src/src/components/SettingsIntfield.vue   |   11 +-
 web-src/src/components/SettingsTextfield.vue  |   11 +-
 web-src/src/components/TabsMusic.vue          |    8 +-
 web-src/src/components/TabsSearch.vue         |   10 +-
 web-src/src/main.js                           |    4 +-
 web-src/src/pages/PageAbout.vue               |   28 +-
 web-src/src/pages/PageAlbumSpotify.vue        |   12 +-
 web-src/src/pages/PageAlbums.vue              |   21 +-
 web-src/src/pages/PageArtist.vue              |   17 +-
 web-src/src/pages/PageArtistSpotify.vue       |   12 +-
 web-src/src/pages/PageArtistTracks.vue        |   17 +-
 web-src/src/pages/PageArtists.vue             |   21 +-
 web-src/src/pages/PageComposerTracks.vue      |   10 +-
 web-src/src/pages/PageFiles.vue               |   11 +-
 web-src/src/pages/PageGenreTracks.vue         |   10 +-
 web-src/src/pages/PageMusicRecentlyAdded.vue  |   10 +-
 web-src/src/pages/PageNowPlaying.vue          |   64 +-
 web-src/src/pages/PagePlaylistFolder.vue      |    9 +-
 .../src/pages/PagePlaylistTracksSpotify.vue   |   14 +-
 web-src/src/pages/PagePodcasts.vue            |   13 +-
 web-src/src/pages/PageQueue.vue               |   34 +-
 web-src/src/pages/PageSearchLibrary.vue       |   20 +-
 web-src/src/pages/PageSearchSpotify.vue       |   20 +-
 web-src/src/pages/PageSettingsArtwork.vue     |    7 +-
 .../src/pages/PageSettingsOnlineServices.vue  |    9 +-
 .../src/pages/PageSettingsRemotesOutputs.vue  |   10 +-
 .../src/pages/PageSettingsWebinterface.vue    |   13 +-
 web-src/src/router/index.js                   |   12 +-
 web-src/src/store/index.js                    |  238 ----
 web-src/src/store/mutation_types.js           |   26 -
 web-src/src/stores/configuration.js           |    9 +
 web-src/src/stores/library.js                 |   15 +
 web-src/src/stores/lyrics.js                  |    8 +
 web-src/src/stores/notifications.js           |   40 +
 web-src/src/stores/outputs.js                 |    7 +
 web-src/src/stores/player.js                  |   14 +
 web-src/src/stores/queue.js                   |   16 +
 web-src/src/stores/remotes.js                 |    7 +
 web-src/src/stores/search.js                  |   27 +
 web-src/src/stores/services.js                |    8 +
 web-src/src/stores/settings.js                |   60 +
 web-src/src/stores/ui.js                      |   18 +
 web-src/src/webapi/index.js                   |   37 +-
 69 files changed, 1171 insertions(+), 1417 deletions(-)
 delete mode 100644 web-src/src/store/index.js
 delete mode 100644 web-src/src/store/mutation_types.js
 create mode 100644 web-src/src/stores/configuration.js
 create mode 100644 web-src/src/stores/library.js
 create mode 100644 web-src/src/stores/lyrics.js
 create mode 100644 web-src/src/stores/notifications.js
 create mode 100644 web-src/src/stores/outputs.js
 create mode 100644 web-src/src/stores/player.js
 create mode 100644 web-src/src/stores/queue.js
 create mode 100644 web-src/src/stores/remotes.js
 create mode 100644 web-src/src/stores/search.js
 create mode 100644 web-src/src/stores/services.js
 create mode 100644 web-src/src/stores/settings.js
 create mode 100644 web-src/src/stores/ui.js

diff --git a/web-src/package-lock.json b/web-src/package-lock.json
index 6ef8248c..e84254e6 100644
--- a/web-src/package-lock.json
+++ b/web-src/package-lock.json
@@ -16,6 +16,7 @@
         "bulma-switch": "^2.0.4",
         "luxon": "^3.4.4",
         "mdi-vue": "^3.0.13",
+        "pinia": "^2.1.7",
         "reconnectingwebsocket": "^1.0.0",
         "spotify-web-api-js": "^1.5.2",
         "vue": "^3.4.23",
@@ -23,8 +24,7 @@
         "vue-router": "^4.3.2",
         "vue3-click-away": "^1.2.4",
         "vue3-lazyload": "^0.3.8",
-        "vuedraggable": "^4.1.0",
-        "vuex": "^4.1.0"
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^4.0.0",
@@ -47,11 +47,32 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
-      "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz",
+      "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.25.4"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -59,72 +80,18 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
+    "node_modules/@babel/types": {
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz",
+      "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
       "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
@@ -144,312 +111,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -480,9 +141,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -490,15 +151,15 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.16.0.tgz",
-      "integrity": "sha512-/jmuSd74i4Czf1XXn7wGRWZCuyaUZ330NH1Bek0Pplatt4Sy1S5haN21SCLLdbeKslQ+S0wEJ+++v5YibSi+Lg==",
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz",
+      "integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@eslint/object-schema": "^2.1.4",
         "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "minimatch": "^3.1.2"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -529,9 +190,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.5.0.tgz",
-      "integrity": "sha512-A7+AOT2ICkodvtsWnxZP4Xxk3NbZ3VMHd8oihydLRGrJgqqdEz1qSeEgXYyT/Cu8h1TWWsQRejIx48mtjZ5y1w==",
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz",
+      "integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -606,13 +267,13 @@
       }
     },
     "node_modules/@intlify/core-base": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
-      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.0.tgz",
+      "integrity": "sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==",
       "license": "MIT",
       "dependencies": {
-        "@intlify/message-compiler": "9.13.1",
-        "@intlify/shared": "9.13.1"
+        "@intlify/message-compiler": "9.14.0",
+        "@intlify/shared": "9.14.0"
       },
       "engines": {
         "node": ">= 16"
@@ -622,12 +283,12 @@
       }
     },
     "node_modules/@intlify/message-compiler": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
-      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.0.tgz",
+      "integrity": "sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==",
       "license": "MIT",
       "dependencies": {
-        "@intlify/shared": "9.13.1",
+        "@intlify/shared": "9.14.0",
         "source-map-js": "^1.0.2"
       },
       "engines": {
@@ -638,9 +299,9 @@
       }
     },
     "node_modules/@intlify/shared": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
-      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.0.tgz",
+      "integrity": "sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==",
       "license": "MIT",
       "engines": {
         "node": ">= 16"
@@ -690,9 +351,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "license": "MIT"
     },
     "node_modules/@mdi/js": {
@@ -762,38 +423,10 @@
         }
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
-      "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
-      "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
-      "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
+      "integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
       "cpu": [
         "arm64"
       ],
@@ -804,188 +437,6 @@
         "darwin"
       ]
     },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
-      "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
-      "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
-      "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
-      "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
-      "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
-      "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
-      "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
-      "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
-      "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
-      "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
-      "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
-      "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
-      "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@ts-pro/vue-eternal-loading": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@ts-pro/vue-eternal-loading/-/vue-eternal-loading-1.3.1.tgz",
@@ -1003,9 +454,9 @@
       "license": "MIT"
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
-      "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
+      "integrity": "sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1017,53 +468,53 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
-      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.30",
+        "@vue/shared": "3.4.38",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
-      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
-      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
+      "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.30",
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/compiler-core": "3.4.38",
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.40",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
-      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
+      "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1073,59 +524,59 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
-      "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
+      "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.4.30"
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
-      "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
+      "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/reactivity": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
-      "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
+      "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/runtime-core": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/reactivity": "3.4.38",
+        "@vue/runtime-core": "3.4.38",
+        "@vue/shared": "3.4.38",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
-      "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
+      "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38"
       },
       "peerDependencies": {
-        "vue": "3.4.30"
+        "vue": "3.4.38"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
-      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
       "license": "MIT"
     },
     "node_modules/acorn": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
-      "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -1216,9 +667,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -1401,9 +852,9 @@
       "license": "MIT"
     },
     "node_modules/core-js": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
-      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -1446,9 +897,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1566,17 +1017,17 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.5.0.tgz",
-      "integrity": "sha512-+NAOZFrW/jFTS3dASCGBxX1pkFD0/fsO+hfAkJ4TyYKwgsXZbqzrw+seCYFCcPCYXvnD67tAnglU7GQTz6kcVw==",
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.0.tgz",
+      "integrity": "sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/config-array": "^0.16.0",
+        "@eslint-community/regexpp": "^4.11.0",
+        "@eslint/config-array": "^0.17.1",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.5.0",
+        "@eslint/js": "9.9.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.3.0",
         "@nodelib/fs.walk": "^1.2.8",
@@ -1585,9 +1036,9 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.0.1",
+        "eslint-scope": "^8.0.2",
         "eslint-visitor-keys": "^4.0.0",
-        "espree": "^10.0.1",
+        "espree": "^10.1.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -1615,6 +1066,14 @@
       },
       "funding": {
         "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -1631,9 +1090,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
-      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
+      "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1643,7 +1102,7 @@
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.15",
         "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "vue-eslint-parser": "^9.4.3",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -1670,9 +1129,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.1.tgz",
-      "integrity": "sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz",
+      "integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -1732,9 +1191,9 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -1994,9 +1453,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2004,9 +1463,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
-      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
       "dev": true,
       "license": "MIT"
     },
@@ -2252,21 +1711,21 @@
       "license": "MIT"
     },
     "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/mdi-vue": {
@@ -2517,22 +1976,74 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.2.tgz",
+      "integrity": "sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
-      "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.3.tgz",
+      "integrity": "sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.7",
-        "mlly": "^1.7.0",
+        "mlly": "^1.7.1",
         "pathe": "^1.1.2"
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -2550,7 +2061,7 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -2558,9 +2069,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2582,9 +2093,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -2675,9 +2186,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.18.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz",
-      "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
+      "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2691,22 +2202,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.0",
-        "@rollup/rollup-android-arm64": "4.18.0",
-        "@rollup/rollup-darwin-arm64": "4.18.0",
-        "@rollup/rollup-darwin-x64": "4.18.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.0",
-        "@rollup/rollup-linux-arm64-musl": "4.18.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-gnu": "4.18.0",
-        "@rollup/rollup-linux-x64-musl": "4.18.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.0",
-        "@rollup/rollup-win32-x64-msvc": "4.18.0",
+        "@rollup/rollup-android-arm-eabi": "4.21.0",
+        "@rollup/rollup-android-arm64": "4.21.0",
+        "@rollup/rollup-darwin-arm64": "4.21.0",
+        "@rollup/rollup-darwin-x64": "4.21.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.0",
+        "@rollup/rollup-linux-arm64-musl": "4.21.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.0",
+        "@rollup/rollup-linux-x64-gnu": "4.21.0",
+        "@rollup/rollup-linux-x64-musl": "4.21.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.0",
+        "@rollup/rollup-win32-x64-msvc": "4.21.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -2735,9 +2246,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.77.6",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
-      "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
+      "version": "1.77.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2753,9 +2264,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -2866,6 +2377,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2906,23 +2426,23 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
-      "integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/unplugin": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
-      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.12.2.tgz",
+      "integrity": "sha512-bEqQxeC7rxtxPZ3M5V4Djcc4lQqKPgGe3mAWZvxcSmX5jhGxll19NliaRzQSQPrk4xJZSGniK3puLWpRuZN7VQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.11.3",
+        "acorn": "^8.12.1",
         "chokidar": "^3.6.0",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.1"
+        "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2946,15 +2466,15 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
-      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz",
+      "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.38",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.41",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -2973,6 +2493,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -2990,6 +2511,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -3002,16 +2526,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
-      "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
+      "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-sfc": "3.4.30",
-        "@vue/runtime-dom": "3.4.30",
-        "@vue/server-renderer": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-sfc": "3.4.38",
+        "@vue/runtime-dom": "3.4.38",
+        "@vue/server-renderer": "3.4.38",
+        "@vue/shared": "3.4.38"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -3096,13 +2620,13 @@
       }
     },
     "node_modules/vue-i18n": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
-      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.0.tgz",
+      "integrity": "sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==",
       "license": "MIT",
       "dependencies": {
-        "@intlify/core-base": "9.13.1",
-        "@intlify/shared": "9.13.1",
+        "@intlify/core-base": "9.14.0",
+        "@intlify/shared": "9.14.0",
         "@vue/devtools-api": "^6.5.0"
       },
       "engines": {
@@ -3116,12 +2640,12 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
-      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
+      "integrity": "sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.1"
+        "@vue/devtools-api": "^6.6.3"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -3192,18 +2716,6 @@
         "vue": "^3.0.1"
       }
     },
-    "node_modules/vuex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
-      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -3258,9 +2770,9 @@
       }
     },
     "node_modules/yaml": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
-      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
       "dev": true,
       "license": "ISC",
       "bin": {
diff --git a/web-src/package.json b/web-src/package.json
index d3528d14..bb6fc277 100644
--- a/web-src/package.json
+++ b/web-src/package.json
@@ -20,6 +20,7 @@
     "bulma-switch": "^2.0.4",
     "luxon": "^3.4.4",
     "mdi-vue": "^3.0.13",
+    "pinia": "^2.1.7",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.5.2",
     "vue": "^3.4.23",
@@ -27,8 +28,7 @@
     "vue-router": "^4.3.2",
     "vue3-click-away": "^1.2.4",
     "vue3-lazyload": "^0.3.8",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
diff --git a/web-src/src/App.vue b/web-src/src/App.vue
index 25d2ea03..ba8751e3 100644
--- a/web-src/src/App.vue
+++ b/web-src/src/App.vue
@@ -25,13 +25,23 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ModalDialogRemotePairing from '@/components/ModalDialogRemotePairing.vue'
 import ModalDialogUpdate from '@/components/ModalDialogUpdate.vue'
 import NavbarBottom from '@/components/NavbarBottom.vue'
 import NavbarTop from '@/components/NavbarTop.vue'
 import NotificationList from '@/components/NotificationList.vue'
 import ReconnectingWebSocket from 'reconnectingwebsocket'
+import { useConfigurationStore } from '@/stores/configuration'
+import { useLibraryStore } from '@/stores/library'
+import { useLyricsStore } from '@/stores/lyrics'
+import { useNotificationsStore } from '@/stores/notifications'
+import { useOutputsStore } from './stores/outputs'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
+import { useRemotesStore } from './stores/remotes'
+import { useServicesStore } from '@/stores/services'
+import { useSettingsStore } from '@/stores/settings'
+import { useUIStore } from './stores/ui'
 import webapi from '@/webapi'
 
 export default {
@@ -44,6 +54,22 @@ export default {
     NotificationList
   },
 
+  setup() {
+    return {
+      configurationStore: useConfigurationStore(),
+      libraryStore: useLibraryStore(),
+      lyricsStore: useLyricsStore(),
+      notificationsStore: useNotificationsStore(),
+      outputsStore: useOutputsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore(),
+      remotesStore: useRemotesStore(),
+      servicesStore: useServicesStore(),
+      settingsStore: useSettingsStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       pairing_active: false,
@@ -55,26 +81,26 @@ export default {
   computed: {
     show_burger_menu: {
       get() {
-        return this.$store.state.show_burger_menu
+        return this.uiStore.show_burger_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_BURGER_MENU, value)
+        this.uiStore.show_burger_menu = value
       }
     },
     show_player_menu: {
       get() {
-        return this.$store.state.show_player_menu
+        return this.uiStore.show_player_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, value)
+        this.uiStore.show_player_menu = value
       }
     },
     show_update_dialog: {
       get() {
-        return this.$store.state.show_update_dialog
+        return this.uiStore.show_update_dialog
       },
       set(value) {
-        this.$store.commit(types.SHOW_UPDATE_DIALOG, value)
+        this.uiStore.show_update_dialog = value
       }
     }
   },
@@ -115,15 +141,14 @@ export default {
       webapi
         .config()
         .then(({ data }) => {
-          this.$store.commit(types.UPDATE_CONFIG, data)
-          this.$store.commit(types.HIDE_SINGLES, data.hide_singles)
+          this.configurationStore.$state = data
+          this.uiStore.hide_singles = data.hide_singles
           document.title = data.library_name
-
           this.open_ws()
           this.$Progress.finish()
         })
         .catch(() => {
-          this.$store.dispatch('add_notification', {
+          this.notificationsStore.add({
             text: this.$t('server.connection-failed'),
             topic: 'connection',
             type: 'danger'
@@ -131,8 +156,8 @@ export default {
         })
     },
     open_ws() {
-      if (this.$store.state.config.websocket_port <= 0) {
-        this.$store.dispatch('add_notification', {
+      if (this.configurationStore.websocket_port <= 0) {
+        this.notificationsStore.add({
           text: this.$t('server.missing-port'),
           type: 'danger'
         })
@@ -144,7 +169,7 @@ export default {
         protocol = 'wss://'
       }
 
-      let wsUrl = `${protocol}${window.location.hostname}:${this.$store.state.config.websocket_port}`
+      let wsUrl = `${protocol}${window.location.hostname}:${this.configurationStore.websocket_port}`
 
       if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) {
         /*
@@ -152,7 +177,7 @@ export default {
          * url from the host of the environment variable VITE_OWNTONE_URL
          */
         const url = new URL(import.meta.env.VITE_OWNTONE_URL)
-        wsUrl = `${protocol}${url.hostname}:${this.$store.state.config.websocket_port}`
+        wsUrl = `${protocol}${url.hostname}:${this.configurationStore.websocket_port}`
       }
 
       const socket = new ReconnectingWebSocket(wsUrl, 'notify', {
@@ -267,59 +292,58 @@ export default {
     },
     update_lastfm() {
       webapi.lastfm().then(({ data }) => {
-        this.$store.commit(types.UPDATE_LASTFM, data)
+        this.servicesStore.lastfm = data
       })
     },
     update_library_stats() {
       webapi.library_stats().then(({ data }) => {
-        this.$store.commit(types.UPDATE_LIBRARY_STATS, data)
+        this.libraryStore.$state = data
       })
       webapi.library_count('scan_kind is rss').then(({ data }) => {
-        this.$store.commit(types.UPDATE_LIBRARY_RSS_COUNT, data)
+        this.libraryStore.rss = data
       })
     },
     update_lyrics() {
-      const track = this.$store.getters.now_playing
-      if (track && track.track_id) {
+      const track = this.queueStore.current
+      if (track?.track_id) {
         webapi.library_track(track.track_id).then(({ data }) => {
-          this.$store.commit(types.UPDATE_LYRICS, data.lyrics)
+          this.lyricsStore.lyrics = data.lyrics
         })
       } else {
-        this.$store.commit(types.UPDATE_LYRICS)
+        this.lyricsStore.$reset()
       }
     },
     update_outputs() {
       webapi.outputs().then(({ data }) => {
-        this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
+        this.outputsStore.outputs = data.outputs
       })
     },
     update_pairing() {
       webapi.pairing().then(({ data }) => {
-        this.$store.commit(types.UPDATE_PAIRING, data)
+        this.remotesStore.$state = data
         this.pairing_active = data.active
       })
     },
     update_player_status() {
       webapi.player_status().then(({ data }) => {
-        this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
+        this.playerStore.$state = data
         this.update_lyrics()
       })
     },
     update_queue() {
       webapi.queue().then(({ data }) => {
-        this.$store.commit(types.UPDATE_QUEUE, data)
+        this.queueStore.$state = data
         this.update_lyrics()
       })
     },
     update_settings() {
       webapi.settings().then(({ data }) => {
-        this.$store.commit(types.UPDATE_SETTINGS, data)
+        this.settingsStore.$state = data
       })
     },
     update_spotify() {
       webapi.spotify().then(({ data }) => {
-        this.$store.commit(types.UPDATE_SPOTIFY, data)
-
+        this.servicesStore.spotify = data
         if (this.token_timer_id > 0) {
           window.clearTimeout(this.token_timer_id)
           this.token_timer_id = 0
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 2333bfa7..6e4814e5 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -8,7 +8,10 @@
       />
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div v-if="show_artwork" class="media-left">
+      <div
+        v-if="settingsStore.show_cover_artwork_in_album_lists"
+        class="media-left"
+      >
         <cover-artwork
           :url="item.item.artwork_url"
           :artist="item.item.artist"
@@ -69,6 +72,7 @@
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -80,6 +84,10 @@ export default {
   },
   emits: ['play-count-changed', 'podcast-deleted'],
 
+  setup() {
+    return { settingsStore: useSettingsStore() }
+  },
+
   data() {
     return {
       rss_playlist_to_remove: {},
@@ -92,12 +100,6 @@ export default {
   computed: {
     media_kind_resolved() {
       return this.media_kind || this.selected_item.media_kind
-    },
-    show_artwork() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
     }
   },
 
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 08c22044..435f1223 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -1,7 +1,10 @@
 <template>
   <template v-for="item in items" :key="item.id">
     <div class="media is-align-items-center" @click="open(item)">
-      <div v-if="show_artwork" class="media-left is-clickable">
+      <div
+        v-if="settingsStore.show_cover_artwork_in_album_lists"
+        class="media-left is-clickable"
+      >
         <cover-artwork
           :url="artwork_url(item)"
           :artist="item.artist"
@@ -41,23 +44,19 @@
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
+import { useSettingsStore } from '@/stores/settings'
 
 export default {
   name: 'ListAlbumsSpotify',
   components: { CoverArtwork, ModalDialogAlbumSpotify },
   props: { items: { required: true, type: Object } },
 
-  data() {
-    return { selected_item: {}, show_details_modal: false }
+  setup() {
+    return { settingsStore: useSettingsStore() }
   },
 
-  computed: {
-    show_artwork() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_cover_artwork_in_album_lists'
-      ).value
-    }
+  data() {
+    return { selected_item: {}, show_details_modal: false }
   },
 
   methods: {
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 49c86827..cd57b4f8 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -14,7 +14,7 @@
       <h1
         class="title is-6"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next
         }"
         v-text="item.title"
@@ -22,18 +22,18 @@
       <h2
         class="subtitle is-7 has-text-weight-bold"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== state.item_id
+          'has-text-grey': is_next && item.id !== player.item_id
         }"
         v-text="item.artist"
       />
       <h2
         class="subtitle is-7"
         :class="{
-          'has-text-primary': item.id === state.item_id,
+          'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
-          'has-text-grey': is_next && item.id !== state.item_id
+          'has-text-grey': is_next && item.id !== player.item_id
         }"
         v-text="item.album"
       />
@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -57,12 +58,18 @@ export default {
     show_only_next_items: Boolean
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     is_next() {
       return this.current_position < 0 || this.position >= this.current_position
     },
-    state() {
-      return this.$store.state.player
+    player() {
+      return this.playerStore
     }
   },
 
diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue
index 3e89704e..4aff9071 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -26,7 +26,7 @@
         <h2 v-if="!item.is_playable" class="subtitle is-7">
           (<span v-text="$t('list.spotify.not-playable-track')" />
           <span
-            v-if="item.restrictions && item.restrictions.reason"
+            v-if="item.restrictions?.reason"
             v-text="
               $t('list.spotify.restriction-reason', {
                 reason: item.restrictions.reason
diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue
index 72cb50f6..d82f791b 100644
--- a/web-src/src/components/LyricsPane.vue
+++ b/web-src/src/components/LyricsPane.vue
@@ -31,8 +31,16 @@
 </template>
 
 <script>
+import { useLyricsStore } from '@/stores/lyrics'
+import { usePlayerStore } from '@/stores/player'
+
 export default {
   name: 'LyricsPane',
+
+  setup() {
+    return { lyricsStore: useLyricsStore(), playerStore: usePlayerStore() }
+  },
+
   data() {
     /*
      * Non reactive. Used as a cache to speed up the finding of lyrics
@@ -46,14 +54,15 @@ export default {
       autoScrolling: true
     }
   },
+
   computed: {
     is_playing() {
-      return this.player.state === 'play'
+      return this.playerStore.state === 'play'
     },
     lyrics() {
-      const raw = this.$store.state.lyrics.content
+      const raw = this.lyricsStore.content
       const parsed = []
-      if (raw) {
+      if (raw.length > 0) {
         // Parse the lyrics
         const regex =
           /\[(?<minutes>\d+):(?<seconds>\d+)(?:\.(?<hundredths>\d+))?\] ?(?<text>.*)/u
@@ -82,14 +91,11 @@ export default {
       }
       return parsed
     },
-    player() {
-      return this.$store.state.player
-    },
     verse_index() {
       if (this.lyrics.length && this.lyrics[0].time) {
-        const currentTime = this.player.item_progress_ms / 1000,
+        const currentTime = this.playerStore.item_progress_ms / 1000,
           la = this.lyrics,
-          trackChanged = this.player.item_id !== this.lastItemId,
+          trackChanged = this.playerStore.item_id !== this.lastItemId,
           trackSeeked =
             this.lastIndex >= 0 &&
             this.lastIndex < la.length &&
@@ -149,10 +155,10 @@ export default {
   methods: {
     reset_scrolling() {
       // Scroll to the start of the lyrics in all cases
-      if (this.player.item_id !== this.lastItemId && this.$refs.lyrics) {
+      if (this.playerStore.item_id !== this.lastItemId && this.$refs.lyrics) {
         this.$refs.lyrics.scrollTo(0, 0)
       }
-      this.lastItemId = this.player.item_id
+      this.lastItemId = this.playerStore.item_id
       this.lastIndex = -1
     },
     scroll_to_verse() {
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 469cce10..73426416 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -136,6 +136,7 @@
 
 <script>
 import SpotifyWebApi from 'spotify-web-api-js'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -143,6 +144,10 @@ export default {
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       spotify_track: {}
@@ -151,9 +156,9 @@ export default {
 
   watch: {
     item() {
-      if (this.item && this.item.data_kind === 'spotify') {
+      if (this.item?.data_kind === 'spotify') {
         const spotifyApi = new SpotifyWebApi()
-        spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+        spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
         spotifyApi
           .getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
           .then((response) => {
diff --git a/web-src/src/components/ModalDialogRemotePairing.vue b/web-src/src/components/ModalDialogRemotePairing.vue
index d03e3395..7615a6de 100644
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -53,6 +53,7 @@
 </template>
 
 <script>
+import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
@@ -60,6 +61,10 @@ export default {
   props: { show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return { remoteStore: useRemotesStore() }
+  },
+
   data() {
     return {
       pairing_req: { pin: '' }
@@ -68,7 +73,7 @@ export default {
 
   computed: {
     pairing() {
-      return this.$store.state.pairing
+      return this.remoteStore.pairing
     }
   },
 
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 116ad8d8..b8f7c026 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -172,6 +172,7 @@
 
 <script>
 import SpotifyWebApi from 'spotify-web-api-js'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -179,6 +180,10 @@ export default {
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       spotify_track: {}
@@ -193,7 +198,7 @@ export default {
         this.item.media_kind !== 'podcast'
       ) {
         const spotifyApi = new SpotifyWebApi()
-        spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+        spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
         spotifyApi
           .getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
           .then((response) => {
diff --git a/web-src/src/components/ModalDialogUpdate.vue b/web-src/src/components/ModalDialogUpdate.vue
index b45e473f..1d6ea7d2 100644
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ModalDialog from '@/components/ModalDialog.vue'
+import { useLibraryStore } from '@/stores/library'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
@@ -58,6 +59,13 @@ export default {
   props: { show: Boolean },
   emits: ['close'],
 
+  setup() {
+    return {
+      libraryStore: useLibraryStore(),
+      servicesStore: useServicesStore()
+    }
+  },
+
   data() {
     return {
       rescan_metadata: false
@@ -66,23 +74,23 @@ export default {
 
   computed: {
     library() {
-      return this.$store.state.library
+      return this.libraryStore.$state
     },
 
     rss() {
-      return this.$store.state.rss_count
+      return this.libraryStore.rss
     },
 
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
 
     update_dialog_scan_kind: {
       get() {
-        return this.$store.state.update_dialog_scan_kind
+        return this.library.update_dialog_scan_kind
       },
       set(value) {
-        this.$store.commit(types.UPDATE_DIALOG_SCAN_KIND, value)
+        this.library.update_dialog_scan_kind = value
       }
     }
   },
diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 00b00261..8eea3a69 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -113,12 +113,12 @@
         class="is-expanded is-clipped is-size-7"
       >
         <div class="fd-is-text-clipped">
-          <strong v-text="now_playing.title" />
+          <strong v-text="current.title" />
           <br />
-          <span v-text="now_playing.artist" />
+          <span v-text="current.artist" />
           <span
-            v-if="now_playing.album"
-            v-text="$t('navigation.now-playing', { album: now_playing.album })"
+            v-if="current.album"
+            v-text="$t('navigation.now-playing', { album: current.album })"
           />
         </div>
       </navbar-item-link>
@@ -255,7 +255,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ControlSlider from '@/components/ControlSlider.vue'
 import NavbarItemLink from '@/components/NavbarItemLink.vue'
 import NavbarItemOutput from '@/components/NavbarItemOutput.vue'
@@ -270,6 +269,11 @@ import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
 import PlayerButtonShuffle from '@/components/PlayerButtonShuffle.vue'
 import audio from '@/lib/Audio'
 import { mdiCancel } from '@mdi/js'
+import { useNotificationsStore } from '@/stores/notifications'
+import { useOutputsStore } from '@/stores/outputs'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 export default {
@@ -289,6 +293,16 @@ export default {
     PlayerButtonShuffle
   },
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore(),
+      outputsStore: useOutputsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       cursor: mdiCancel,
@@ -302,33 +316,30 @@ export default {
   },
 
   computed: {
-    config() {
-      return this.$store.state.config
-    },
     is_now_playing_page() {
       return this.$route.name === 'now-playing'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
     },
     outputs() {
-      return this.$store.state.outputs
+      return this.outputsStore.outputs
     },
     player() {
-      return this.$store.state.player
+      return this.playerStore
     },
     show_player_menu: {
       get() {
-        return this.$store.state.show_player_menu
+        return this.uiStore.show_player_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, value)
+        this.uiStore.show_player_menu = value
       }
     }
   },
 
   watch: {
-    '$store.state.player.volume'() {
+    'playerStore.volume'() {
       if (this.player.volume > 0) {
         this.old_volume = this.player.volume
       }
@@ -383,7 +394,7 @@ export default {
       })
       a.addEventListener('error', () => {
         this.closeAudio()
-        this.$store.dispatch('add_notification', {
+        this.notificationsStore.add({
           text: this.$t('navigation.stream-error'),
           type: 'danger'
         })
diff --git a/web-src/src/components/NavbarItemLink.vue b/web-src/src/components/NavbarItemLink.vue
index 620efb23..ef3293e0 100644
--- a/web-src/src/components/NavbarItemLink.vue
+++ b/web-src/src/components/NavbarItemLink.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
+import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'NavbarItemLink',
@@ -13,6 +13,10 @@ export default {
     to: { required: true, type: Object }
   },
 
+  setup() {
+    return { uiStore: useUIStore() }
+  },
+
   computed: {
     href() {
       return this.$router.resolve(this.to).href
@@ -21,11 +25,11 @@ export default {
 
   methods: {
     open() {
-      if (this.$store.state.show_burger_menu) {
-        this.$store.commit(types.SHOW_BURGER_MENU, false)
+      if (this.uiStore.show_burger_menu) {
+        this.uiStore.show_burger_menu = false
       }
-      if (this.$store.state.show_player_menu) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, false)
+      if (this.uiStore.show_player_menu) {
+        this.uiStore.show_player_menu = false
       }
       this.$router.push(this.to)
     }
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index bc3392a2..379b2493 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -6,25 +6,46 @@
     aria-label="main navigation"
   >
     <div class="navbar-brand">
-      <navbar-item-link v-if="show_playlists" :to="{ name: 'playlists' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_playlists"
+        :to="{ name: 'playlists' }"
+      >
         <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_music" :to="{ name: 'music' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_music"
+        :to="{ name: 'music' }"
+      >
         <mdicon class="icon" name="music" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_podcasts" :to="{ name: 'podcasts' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_podcasts"
+        :to="{ name: 'podcasts' }"
+      >
         <mdicon class="icon" name="microphone" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_audiobooks" :to="{ name: 'audiobooks' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_audiobooks"
+        :to="{ name: 'audiobooks' }"
+      >
         <mdicon class="icon" name="book-open-variant" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_radio" :to="{ name: 'radio' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_radio"
+        :to="{ name: 'radio' }"
+      >
         <mdicon class="icon" name="radio" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_files" :to="{ name: 'files' }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_files"
+        :to="{ name: 'files' }"
+      >
         <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
-      <navbar-item-link v-if="show_search" :to="{ name: search_name }">
+      <navbar-item-link
+        v-if="settingsStore.show_menu_item_search"
+        :to="{ name: searchStore.search_source }"
+      >
         <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
@@ -89,7 +110,7 @@
               <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ name: search_name }">
+            <navbar-item-link :to="{ name: searchStore.search_source }">
               <mdicon class="icon" name="magnify" size="16" />
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
@@ -118,13 +139,25 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import NavbarItemLink from '@/components/NavbarItemLink.vue'
+import { useSearchStore } from '@/stores/search'
+import { useServicesStore } from '@/stores/services'
+import { useSettingsStore } from '@/stores/settings'
+import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'NavbarTop',
   components: { NavbarItemLink },
 
+  setup() {
+    return {
+      searchStore: useSearchStore(),
+      servicesStore: useServicesStore(),
+      settingsStore: useSettingsStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       show_settings_menu: false
@@ -132,71 +165,27 @@ export default {
   },
 
   computed: {
-    search_name: {
-      get() {
-        return this.$store.state.search_source
-      }
-    },
-    show_audiobooks() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_audiobooks'
-      ).value
-    },
     show_burger_menu: {
       get() {
-        return this.$store.state.show_burger_menu
+        return this.uiStore.show_burger_menu
       },
       set(value) {
-        this.$store.commit(types.SHOW_BURGER_MENU, value)
+        this.uiStore.show_burger_menu = value
       }
     },
-    show_files() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_files')
-        .value
-    },
-    show_music() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_music')
-        .value
-    },
-    show_player_menu() {
-      return this.$store.state.show_player_menu
-    },
-    show_playlists() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_playlists'
-      ).value
-    },
-    show_podcasts() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_podcasts'
-      ).value
-    },
-    show_radio() {
-      return this.$store.getters.setting('webinterface', 'show_menu_item_radio')
-        .value
-    },
-    show_search() {
-      return this.$store.getters.setting(
-        'webinterface',
-        'show_menu_item_search'
-      ).value
-    },
     show_update_dialog: {
       get() {
-        return this.$store.state.show_update_dialog
+        return this.uiStore.show_update_dialog
       },
       set(value) {
-        this.$store.commit(types.SHOW_UPDATE_DIALOG, value)
+        this.uiStore.show_update_dialog = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
     zindex() {
-      if (this.show_player_menu) {
+      if (this.uiStore.show_player_menu) {
         return 'z-index: 21'
       }
       return ''
diff --git a/web-src/src/components/NotificationList.vue b/web-src/src/components/NotificationList.vue
index 3f239565..2ba546a0 100644
--- a/web-src/src/components/NotificationList.vue
+++ b/web-src/src/components/NotificationList.vue
@@ -17,18 +17,26 @@
 </template>
 
 <script>
+import { useNotificationsStore } from '@/stores/notifications'
+
 export default {
   name: 'NotificationList',
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore()
+    }
+  },
+
   computed: {
     notifications() {
-      return this.$store.state.notifications.list
+      return this.notificationsStore.list
     }
   },
 
   methods: {
     remove(notification) {
-      this.$store.dispatch('delete_notification', notification)
+      this.notificationsStore.remove(notification)
     }
   }
 }
diff --git a/web-src/src/components/PlayerButtonConsume.vue b/web-src/src/components/PlayerButtonConsume.vue
index 4c652a50..5a0f2673 100644
--- a/web-src/src/components/PlayerButtonConsume.vue
+++ b/web-src/src/components/PlayerButtonConsume.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -18,9 +19,15 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     is_consume() {
-      return this.$store.state.player.consume
+      return this.playerStore.consume
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonLyrics.vue b/web-src/src/components/PlayerButtonLyrics.vue
index 673e9f0e..5444abf8 100644
--- a/web-src/src/components/PlayerButtonLyrics.vue
+++ b/web-src/src/components/PlayerButtonLyrics.vue
@@ -10,24 +10,32 @@
 </template>
 
 <script>
+import { useLyricsStore } from '@/stores/lyrics'
+
 export default {
   name: 'PlayerButtonLyrics',
   props: {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      lyricsStore: useLyricsStore()
+    }
+  },
+
   computed: {
     icon_name() {
       return this.is_active ? 'script-text-play' : 'script-text-outline'
     },
     is_active() {
-      return this.$store.state.lyrics.pane
+      return this.lyricsStore.pane
     }
   },
 
   methods: {
     toggle_lyrics() {
-      this.$store.state.lyrics.pane = !this.$store.state.lyrics.pane
+      this.lyricsStore.pane = !this.lyricsStore.pane
     }
   }
 }
diff --git a/web-src/src/components/PlayerButtonNext.vue b/web-src/src/components/PlayerButtonNext.vue
index ac8cd59a..4f507895 100644
--- a/web-src/src/components/PlayerButtonNext.vue
+++ b/web-src/src/components/PlayerButtonNext.vue
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -19,7 +20,7 @@ export default {
 
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return useQueueStore()?.count <= 0
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/PlayerButtonPlayPause.vue
index 5cae4860..f1f8744f 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/web-src/src/components/PlayerButtonPlayPause.vue
@@ -9,6 +9,9 @@
 </template>
 
 <script>
+import { useNotificationsStore } from '@/stores/notifications'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,9 +21,17 @@ export default {
     show_disabled_message: Boolean
   },
 
+  setup() {
+    return {
+      notificationsStore: useNotificationsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return this.queueStore?.count <= 0
     },
     icon_name() {
       if (!this.is_playing) {
@@ -31,13 +42,11 @@ export default {
       return 'stop'
     },
     is_pause_allowed() {
-      return (
-        this.$store.getters.now_playing &&
-        this.$store.getters.now_playing.data_kind !== 'pipe'
-      )
+      const { current } = this.queueStore
+      return current && current.data_kind !== 'pipe'
     },
     is_playing() {
-      return this.$store.state.player.state === 'play'
+      return this.playerStore.state === 'play'
     }
   },
 
@@ -45,7 +54,7 @@ export default {
     toggle_play_pause() {
       if (this.disabled) {
         if (this.show_disabled_message) {
-          this.$store.dispatch('add_notification', {
+          this.notificationsStore.add({
             text: this.$t('server.empty-queue'),
             timeout: 2000,
             topic: 'connection',
@@ -54,7 +63,6 @@ export default {
         }
         return
       }
-
       if (this.is_playing && this.is_pause_allowed) {
         webapi.player_pause()
       } else if (this.is_playing && !this.is_pause_allowed) {
diff --git a/web-src/src/components/PlayerButtonPrevious.vue b/web-src/src/components/PlayerButtonPrevious.vue
index d2d865d3..ce3eac9d 100644
--- a/web-src/src/components/PlayerButtonPrevious.vue
+++ b/web-src/src/components/PlayerButtonPrevious.vue
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -17,9 +18,15 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
-      return !this.$store.state.queue || this.$store.state.queue.count <= 0
+      return this.queueStore.count <= 0
     }
   },
 
@@ -28,7 +35,6 @@ export default {
       if (this.disabled) {
         return
       }
-
       webapi.player_previous()
     }
   }
diff --git a/web-src/src/components/PlayerButtonRepeat.vue b/web-src/src/components/PlayerButtonRepeat.vue
index 79a61866..3e68e294 100644
--- a/web-src/src/components/PlayerButtonRepeat.vue
+++ b/web-src/src/components/PlayerButtonRepeat.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -18,6 +19,12 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     icon_name() {
       if (this.is_repeat_all) {
@@ -28,13 +35,13 @@ export default {
       return 'repeat-off'
     },
     is_repeat_all() {
-      return this.$store.state.player.repeat === 'all'
+      return this.playerStore.repeat === 'all'
     },
     is_repeat_off() {
       return !this.is_repeat_all && !this.is_repeat_single
     },
     is_repeat_single() {
-      return this.$store.state.player.repeat === 'single'
+      return this.playerStore.repeat === 'single'
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonSeekBack.vue b/web-src/src/components/PlayerButtonSeekBack.vue
index f9534f67..d8fed00a 100644
--- a/web-src/src/components/PlayerButtonSeekBack.vue
+++ b/web-src/src/components/PlayerButtonSeekBack.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,23 +20,32 @@ export default {
     seek_ms: { required: true, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
       return (
-        !this.$store.state.queue ||
-        this.$store.state.queue.count <= 0 ||
+        this.queueStore?.count <= 0 ||
         this.is_stopped ||
-        this.now_playing.data_kind === 'pipe'
+        this.current.data_kind === 'pipe'
       )
     },
     is_stopped() {
-      return this.$store.state.player.state === 'stop'
+      return this.player.state === 'stop'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
+    },
+    player() {
+      return this.playerStore
     },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.now_playing.media_kind)
+      return ['podcast', 'audiobook'].includes(this.current.media_kind)
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonSeekForward.vue b/web-src/src/components/PlayerButtonSeekForward.vue
index b349a111..d64f93c0 100644
--- a/web-src/src/components/PlayerButtonSeekForward.vue
+++ b/web-src/src/components/PlayerButtonSeekForward.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
 import webapi from '@/webapi'
 
 export default {
@@ -18,23 +20,32 @@ export default {
     seek_ms: { required: true, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore()
+    }
+  },
+
   computed: {
     disabled() {
       return (
-        !this.$store.state.queue ||
-        this.$store.state.queue.count <= 0 ||
+        this.queueStore?.count <= 0 ||
         this.is_stopped ||
-        this.now_playing.data_kind === 'pipe'
+        this.current.data_kind === 'pipe'
       )
     },
     is_stopped() {
-      return this.$store.state.player.state === 'stop'
+      return this.player.state === 'stop'
     },
-    now_playing() {
-      return this.$store.getters.now_playing
+    current() {
+      return this.queueStore.current
+    },
+    player() {
+      return this.playerStore
     },
     visible() {
-      return ['podcast', 'audiobook'].includes(this.now_playing.media_kind)
+      return ['podcast', 'audiobook'].includes(this.current.media_kind)
     }
   },
 
diff --git a/web-src/src/components/PlayerButtonShuffle.vue b/web-src/src/components/PlayerButtonShuffle.vue
index af9ed223..7ee15d06 100644
--- a/web-src/src/components/PlayerButtonShuffle.vue
+++ b/web-src/src/components/PlayerButtonShuffle.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { usePlayerStore } from '@/stores/player'
 import webapi from '@/webapi'
 
 export default {
@@ -19,6 +20,12 @@ export default {
     icon_size: { default: 16, type: Number }
   },
 
+  setup() {
+    return {
+      playerStore: usePlayerStore()
+    }
+  },
+
   computed: {
     icon_name() {
       if (this.is_shuffle) {
@@ -27,7 +34,7 @@ export default {
       return 'shuffle-disabled'
     },
     is_shuffle() {
-      return this.$store.state.player.shuffle
+      return this.playerStore.shuffle
     }
   },
 
diff --git a/web-src/src/components/SettingsCheckbox.vue b/web-src/src/components/SettingsCheckbox.vue
index 1fc4e18c..6211e7b6 100644
--- a/web-src/src/components/SettingsCheckbox.vue
+++ b/web-src/src/components/SettingsCheckbox.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -31,6 +32,12 @@ export default {
     name: { required: true, type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -55,7 +62,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      const setting = this.$store.getters.setting(this.category, this.name)
+      const setting = this.settingsStore.setting(this.category, this.name)
       if (!setting) {
         return {
           category: this.category,
@@ -84,7 +91,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index 29b2aea9..1b2de8d9 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -28,6 +28,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -39,6 +40,12 @@ export default {
     placeholder: { default: '', type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -63,7 +70,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      return this.$store.getters.setting(this.category, this.name)
+      return this.settingsStore.setting(this.category, this.name)
     }
   },
 
@@ -95,7 +102,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
index 9d496d20..f3a5f85b 100644
--- a/web-src/src/components/SettingsTextfield.vue
+++ b/web-src/src/components/SettingsTextfield.vue
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
@@ -38,6 +39,12 @@ export default {
     placeholder: { default: '', type: String }
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       statusUpdate: '',
@@ -62,7 +69,7 @@ export default {
       return this.statusUpdate === 'success'
     },
     setting() {
-      return this.$store.getters.setting(this.category, this.name)
+      return this.settingsStore.setting(this.category, this.name)
     }
   },
 
@@ -96,7 +103,7 @@ export default {
       webapi
         .settings_update(this.category, setting)
         .then(() => {
-          this.$store.dispatch('update_setting', setting)
+          this.settingsStore.update(setting)
           this.statusUpdate = 'success'
         })
         .catch(() => {
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index 6e91a9cb..f1a1d466 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -113,12 +113,18 @@
 </template>
 
 <script>
+import { useServicesStore } from '@/stores/services'
+
 export default {
   name: 'TabsMusic',
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   computed: {
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index dc6ea0dc..e36ae1a3 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -34,13 +34,21 @@
 </template>
 
 <script>
+import { useServicesStore } from '@/stores/services'
+
 export default {
   name: 'TabsSearch',
   emits: ['search-library', 'search-spotify'],
 
+  setup() {
+    return {
+      servicesStore: useServicesStore()
+    }
+  },
+
   computed: {
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/main.js b/web-src/src/main.js
index 72517f52..a1bae9a0 100644
--- a/web-src/src/main.js
+++ b/web-src/src/main.js
@@ -4,15 +4,15 @@ import VueClickAway from 'vue3-click-away'
 import VueLazyLoad from 'vue3-lazyload'
 import VueProgressBar from '@aacassandra/vue3-progressbar'
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import { filters } from './filter'
 import i18n from './i18n'
 import { icons } from './icons'
 import mdiVue from 'mdi-vue/v3'
 import { router } from './router'
-import store from './store'
 
 const app = createApp(App)
-  .use(store)
+  .use(createPinia())
   .use(router)
   .use(VueProgressBar)
   .use(VueClickAway)
diff --git a/web-src/src/pages/PageAbout.vue b/web-src/src/pages/PageAbout.vue
index 3f25719f9..5e1fc027 100644
--- a/web-src/src/pages/PageAbout.vue
+++ b/web-src/src/pages/PageAbout.vue
@@ -4,7 +4,7 @@
       <div class="container">
         <div class="columns is-centered">
           <div class="column is-four-fifths has-text-centered-mobile">
-            <h1 class="title is-4" v-text="config.library_name" />
+            <h1 class="title is-4" v-text="configuration.library_name" />
           </div>
         </div>
       </div>
@@ -130,13 +130,15 @@
             <div class="content has-text-centered-mobile">
               <p
                 class="is-size-7"
-                v-text="$t('page.about.version', { version: config.version })"
+                v-text="
+                  $t('page.about.version', { version: configuration.version })
+                "
               />
               <p
                 class="is-size-7"
                 v-text="
                   $t('page.about.compiled-with', {
-                    options: config.buildoptions.join(', ')
+                    options: configuration.buildoptions.join(', ')
                   })
                 "
               />
@@ -176,23 +178,33 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
+import { useConfigurationStore } from '@/stores/configuration'
+import { useLibraryStore } from '@/stores/library'
+import { useUIStore } from '@/stores/ui'
 
 export default {
   name: 'PageAbout',
 
+  setup() {
+    return {
+      configurationStore: useConfigurationStore(),
+      libraryStore: useLibraryStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   computed: {
-    config() {
-      return this.$store.state.config
+    configuration() {
+      return this.configurationStore.$state
     },
     library() {
-      return this.$store.state.library
+      return this.libraryStore.$state
     }
   },
 
   methods: {
     showUpdateDialog() {
-      this.$store.commit(types.SHOW_UPDATE_DIALOG, true)
+      this.uiStore.show_update_dialog = true
     }
   }
 }
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 4f9b9e9e..411b5121 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -56,15 +56,15 @@ import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
 import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
-import store from '@/store'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
     const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    spotifyApi.setAccessToken(useServicesStore().spotify.webapi_token)
     return spotifyApi.getAlbum(to.params.id, {
-      market: store.state.spotify.webapi_country
+      market: useServicesStore().spotify.webapi_country
     })
   },
 
@@ -88,6 +88,12 @@ export default {
     })
   },
 
+  setup() {
+    return {
+      servicesStore: useServicesStore()
+    }
+  },
+
   data() {
     return {
       album: { artists: [{}], tracks: {} },
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index d0a4a7f9..d7378630 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -63,13 +63,14 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
+import { useServicesStore } from '@/stores/services'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -98,6 +99,10 @@ export default {
     })
   },
 
+  setup() {
+    return { uiStore: useUIStore(), servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       albums_list: new GroupedList(),
@@ -162,30 +167,30 @@ export default {
     },
     hide_singles: {
       get() {
-        return this.$store.state.hide_singles
+        return this.uiStore.hide_singles
       },
       set(value) {
-        this.$store.commit(types.HIDE_SINGLES, value)
+        this.uiStore.hide_singles = value
       }
     },
     hide_spotify: {
       get() {
-        return this.$store.state.hide_spotify
+        return this.uiStore.hide_spotify
       },
       set(value) {
-        this.$store.commit(types.HIDE_SPOTIFY, value)
+        this.uiStore.hide_spotify = value
       }
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.albums_sort
+        return this.uiStore.albums_sort
       },
       set(value) {
-        this.$store.commit(types.ALBUMS_SORT, value)
+        this.uiStore.albums_sort = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 4a810eb8..e370abe8 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -71,12 +71,13 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
+import { useServicesStore } from '@/stores/services'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -108,6 +109,10 @@ export default {
     })
   },
 
+  setup() {
+    return { servicesStore: useServicesStore(), uiStore: useUIStore() }
+  },
+
   data() {
     return {
       albums_list: new GroupedList(),
@@ -140,22 +145,22 @@ export default {
     },
     hide_spotify: {
       get() {
-        return this.$store.state.hide_spotify
+        return this.uiStore.hide_spotify
       },
       set(value) {
-        this.$store.commit(types.HIDE_SPOTIFY, value)
+        this.uiStore.hide_spotify = value
       }
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.artist_albums_sort
+        return this.uiStore.artist_albums_sort
       },
       set(value) {
-        this.$store.commit(types.ARTIST_ALBUMS_SORT, value)
+        this.uiStore.artist_albums_sort = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
     track_count() {
       // The count of tracks is incorrect when albums have Spotify tracks.
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 76a19546..94920efb 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -52,7 +52,7 @@ import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
 import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
-import store from '@/store'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
@@ -60,13 +60,13 @@ const PAGE_SIZE = 50
 const dataObject = {
   load(to) {
     const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    spotifyApi.setAccessToken(useServicesStore().spotify.webapi_token)
     return Promise.all([
       spotifyApi.getArtist(to.params.id),
       spotifyApi.getArtistAlbums(to.params.id, {
         include_groups: 'album,single',
         limit: PAGE_SIZE,
-        market: store.state.spotify.webapi_country,
+        market: useServicesStore().spotify.webapi_country,
         offset: 0
       })
     ])
@@ -96,6 +96,10 @@ export default {
     })
   },
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       albums: [],
@@ -114,7 +118,7 @@ export default {
     },
     load_next({ loaded }) {
       const spotifyApi = new SpotifyWebApi()
-      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+      spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
       spotifyApi
         .getArtistAlbums(this.artist.id, {
           include_groups: 'album,single',
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index c08490dd..48fb5fb4 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -72,13 +72,14 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
+import { useServicesStore } from '@/stores/services'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -111,6 +112,10 @@ export default {
     })
   },
 
+  setup() {
+    return { servicesStore: useServicesStore(), uiStore: useUIStore() }
+  },
+
   data() {
     return {
       artist: {},
@@ -144,22 +149,22 @@ export default {
     },
     hide_spotify: {
       get() {
-        return this.$store.state.hide_spotify
+        return this.uiStore.hide_spotify
       },
       set(value) {
-        this.$store.commit(types.HIDE_SPOTIFY, value)
+        this.uiStore.hide_spotify = value
       }
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.artist_tracks_sort
+        return this.uiStore.artist_tracks_sort
       },
       set(value) {
-        this.$store.commit(types.ARTIST_TRACKS_SORT, value)
+        this.uiStore.artist_tracks_sort = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     },
     track_uris() {
       return this.tracks_list.items.map((item) => item.uri).join()
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 5c29e211..a9151226 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -63,13 +63,14 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
+import { useServicesStore } from '@/stores/services'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -98,6 +99,10 @@ export default {
     })
   },
 
+  setup() {
+    return { servicesStore: useServicesStore(), uiStore: useUIStore() }
+  },
+
   data() {
     return {
       artists_list: new GroupedList(),
@@ -134,30 +139,30 @@ export default {
     },
     hide_singles: {
       get() {
-        return this.$store.state.hide_singles
+        return this.uiStore.hide_singles
       },
       set(value) {
-        this.$store.commit(types.HIDE_SINGLES, value)
+        this.uiStore.hide_singles = value
       }
     },
     hide_spotify: {
       get() {
-        return this.$store.state.hide_spotify
+        return this.uiStore.hide_spotify
       },
       set(value) {
-        this.$store.commit(types.HIDE_SPOTIFY, value)
+        this.uiStore.hide_spotify = value
       }
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.artists_sort
+        return this.uiStore.artists_sort
       },
       set(value) {
-        this.$store.commit(types.ARTISTS_SORT, value)
+        this.uiStore.artists_sort = value
       }
     },
     spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
+      return this.servicesStore.spotify.webapi_token_valid
     }
   }
 }
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 1fe9d021..e7c84858 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -60,13 +60,13 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -99,6 +99,10 @@ export default {
     })
   },
 
+  setup() {
+    return { uiStore: useUIStore() }
+  },
+
   data() {
     return {
       composer: {},
@@ -128,10 +132,10 @@ export default {
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.composer_tracks_sort
+        return this.uiStore.composer_tracks_sort
       },
       set(value) {
-        this.$store.commit(types.COMPOSER_TRACKS_SORT, value)
+        this.uiStore.composer_tracks_sort = value
       }
     },
     tracks() {
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index 794fc49a..bd7c0dc5 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -43,6 +43,7 @@ import ListDirectories from '@/components/ListDirectories.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
+import { useConfigurationStore } from '@/stores/configuration'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -57,8 +58,8 @@ const dataObject = {
       vm.directories = response.data.directories.map((directory) =>
         vm.transform(directory.path)
       )
-    } else if (vm.$store.state.config.directories) {
-      vm.directories = vm.$store.state.config.directories.map((path) =>
+    } else if (useConfigurationStore().directories) {
+      vm.directories = useConfigurationStore().directories.map((path) =>
         vm.transform(path)
       )
     } else {
@@ -96,6 +97,12 @@ export default {
     })
   },
 
+  setup() {
+    return {
+      configurationStore: useConfigurationStore()
+    }
+  },
+
   data() {
     return {
       directories: [],
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 36e54d7d..c127e17a 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -55,13 +55,13 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -94,6 +94,10 @@ export default {
     })
   },
 
+  setup() {
+    return { uiStore: useUIStore() }
+  },
+
   data() {
     return {
       genre: {},
@@ -124,10 +128,10 @@ export default {
     },
     selected_grouping_id: {
       get() {
-        return this.$store.state.genre_tracks_sort
+        return this.uiStore.genre_tracks_sort
       },
       set(value) {
-        this.$store.commit(types.GENRE_TRACKS_SORT, value)
+        this.uiStore.genre_tracks_sort = value
       }
     },
     tracks() {
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 894b304c..2ef0844d 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -17,12 +17,12 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
-import store from '@/store'
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 const dataObject = {
   load(to) {
-    const limit = store.getters.setting_recently_added_limit
+    const limit = useSettingsStore().recently_added_limit
     return webapi.search({
       expression:
         'media_kind is music having track_count > 3 order by time_added desc',
@@ -49,6 +49,12 @@ export default {
     })
   },
 
+  setup() {
+    return {
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       albums: new GroupedList()
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index e1012cef..a2309d10 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -7,10 +7,10 @@
           :artist="track.artist"
           :album="track.album"
           class="is-clickable fd-has-shadow fd-cover-big-image"
-          :class="{ 'is-masked': lyrics_visible }"
+          :class="{ 'is-masked': lyricsStore.pane }"
           @click="open_dialog(track)"
         />
-        <lyrics-pane v-if="lyrics_visible" />
+        <lyrics-pane v-if="lyricsStore.pane" />
         <control-slider
           v-model:value="track_progress"
           class="mt-5"
@@ -34,9 +34,9 @@
         />
         <p v-if="track.album" class="subtitle is-6" v-text="track.album" />
         <p
-          v-if="filepath"
+          v-if="settingsStore.show_filepath_now_playing"
           class="subtitle is-6 has-text-grey"
-          v-text="filepath"
+          v-text="track.path"
         />
       </div>
     </div>
@@ -55,12 +55,15 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ControlSlider from '@/components/ControlSlider.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import LyricsPane from '@/components/LyricsPane.vue'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import { mdiCancel } from '@mdi/js'
+import { useLyricsStore } from '@/stores/lyrics'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
+import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 const INTERVAL = 1000
@@ -74,6 +77,15 @@ export default {
     ModalDialogQueueItem
   },
 
+  setup() {
+    return {
+      lyricsStore: useLyricsStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore(),
+      settingsStore: useSettingsStore()
+    }
+  },
+
   data() {
     return {
       INTERVAL,
@@ -87,11 +99,12 @@ export default {
 
   computed: {
     composer() {
-      if (this.setting_show_composer_now_playing) {
+      if (this.settingsStore.show_composer_now_playing) {
+        const genres = this.settingsStore.show_composer_for_genre
         if (
-          !this.setting_show_composer_for_genre ||
+          !genres ||
           (this.track.genre &&
-            this.setting_show_composer_for_genre
+            genres
               .toLowerCase()
               .split(',')
               .findIndex(
@@ -104,42 +117,21 @@ export default {
       }
       return null
     },
-    filepath() {
-      if (this.setting_show_filepath_now_playing) {
-        return this.track.path
-      }
-      return null
-    },
     is_live() {
       return this.track.length_ms === 0
     },
-    lyrics_visible() {
-      return this.$store.state.lyrics.pane
-    },
-    player() {
-      return this.$store.state.player
-    },
-    setting_show_composer_for_genre() {
-      return this.$store.getters.setting_show_composer_for_genre
-    },
-    setting_show_composer_now_playing() {
-      return this.$store.getters.setting_show_composer_now_playing
-    },
-    setting_show_filepath_now_playing() {
-      return this.$store.getters.setting_show_filepath_now_playing
-    },
     track() {
-      return this.$store.getters.now_playing
+      return this.queueStore.current
     },
     track_elapsed_time() {
       return this.$filters.durationInHours(this.track_progress * INTERVAL)
     },
     track_progress: {
       get() {
-        return Math.floor(this.player.item_progress_ms / INTERVAL)
+        return Math.floor(this.playerStore.item_progress_ms / INTERVAL)
       },
       set(value) {
-        this.player.item_progress_ms = value * INTERVAL
+        this.playerStore.item_progress_ms = value * INTERVAL
       }
     },
     track_progress_max() {
@@ -153,12 +145,12 @@ export default {
   },
 
   watch: {
-    player() {
+    playerStore() {
       if (this.interval_id > 0) {
         window.clearTimeout(this.interval_id)
         this.interval_id = 0
       }
-      if (this.player.state === 'play') {
+      if (this.playerStore.state === 'play') {
         this.interval_id = window.setInterval(this.tick, INTERVAL)
       }
     }
@@ -166,8 +158,8 @@ export default {
 
   created() {
     webapi.player_status().then(({ data }) => {
-      this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
-      if (this.player.state === 'play') {
+      this.playerStore.$state = data
+      if (this.playerStore.state === 'play') {
         this.interval_id = window.setInterval(this.tick, INTERVAL)
       }
     })
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index c2aafb08..44d454aa 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -24,6 +24,7 @@
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListPlaylists from '@/components/ListPlaylists.vue'
+import { useConfigurationStore } from '@/stores/configuration'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -57,6 +58,12 @@ export default {
     })
   },
 
+  setup() {
+    return {
+      configurationStore: useConfigurationStore()
+    }
+  },
+
   data() {
     return {
       playlist: {},
@@ -77,7 +84,7 @@ export default {
       })
     },
     radio_playlists() {
-      return this.$store.state.config.radio_playlists
+      return this.configurationStore.radio_playlists
     }
   }
 }
diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
index 5917ef78..1b869b3f 100644
--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -54,7 +54,7 @@ import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
-import store from '@/store'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 const PAGE_SIZE = 50
@@ -62,12 +62,12 @@ const PAGE_SIZE = 50
 const dataObject = {
   load(to) {
     const spotifyApi = new SpotifyWebApi()
-    spotifyApi.setAccessToken(store.state.spotify.webapi_token)
+    spotifyApi.setAccessToken(useServicesStore().spotify.webapi_token)
     return Promise.all([
       spotifyApi.getPlaylist(to.params.id),
       spotifyApi.getPlaylistTracks(to.params.id, {
         limit: PAGE_SIZE,
-        market: store.state.spotify.webapi_country,
+        market: useServicesStore().state.spotify.webapi_country,
         offset: 0
       })
     ])
@@ -97,6 +97,10 @@ export default {
     })
   },
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       offset: 0,
@@ -128,11 +132,11 @@ export default {
     },
     load_next({ loaded }) {
       const spotifyApi = new SpotifyWebApi()
-      spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
+      spotifyApi.setAccessToken(this.servicesStore.spotify.webapi_token)
       spotifyApi
         .getPlaylistTracks(this.playlist.id, {
           limit: PAGE_SIZE,
-          market: store.state.spotify.webapi_country,
+          market: this.servicesStore.spotify.webapi_country,
           offset: this.offset
         })
         .then((data) => {
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index c36d11f4..08b0d160 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -57,12 +57,13 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAddRss from '@/components/ModalDialogAddRss.vue'
+import { useLibraryStore } from '@/stores/library'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 const dataObject = {
@@ -94,6 +95,10 @@ export default {
     })
   },
 
+  setup() {
+    return { libraryStore: useLibraryStore(), uiStore: useUIStore() }
+  },
+
   data() {
     return {
       albums: [],
@@ -104,7 +109,7 @@ export default {
 
   computed: {
     rss() {
-      return this.$store.state.rss_count
+      return this.libraryStore.rss
     }
   },
 
@@ -134,8 +139,8 @@ export default {
     },
 
     update_rss() {
-      this.$store.commit(types.UPDATE_DIALOG_SCAN_KIND, 'rss')
-      this.$store.commit(types.SHOW_UPDATE_DIALOG, true)
+      this.libraryStore.update_dialog_scan_kind = 'rss'
+      this.uiStore.show_update_dialog = true
     }
   }
 }
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index 24e7f021..c71f1440 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -74,7 +74,7 @@
                   />
                 </a>
                 <a
-                  v-if="element.id !== state.item_id && edit_mode"
+                  v-if="element.id !== player.item_id && edit_mode"
                   @click.prevent.stop="remove(element)"
                 >
                   <mdicon class="icon has-text-grey" name="delete" size="18" />
@@ -103,13 +103,16 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListItemQueueItem from '@/components/ListItemQueueItem.vue'
 import ModalDialogAddUrlStream from '@/components/ModalDialogAddUrlStream.vue'
 import ModalDialogPlaylistSave from '@/components/ModalDialogPlaylistSave.vue'
 import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import draggable from 'vuedraggable'
+import { useConfigurationStore } from '@/stores/configuration'
+import { usePlayerStore } from '@/stores/player'
+import { useQueueStore } from '@/stores/queue'
+import { useUIStore } from '@/stores/ui'
 import webapi from '@/webapi'
 
 export default {
@@ -123,6 +126,15 @@ export default {
     draggable
   },
 
+  setup() {
+    return {
+      configurationStore: useConfigurationStore(),
+      playerStore: usePlayerStore(),
+      queueStore: useQueueStore(),
+      uiStore: useUIStore()
+    }
+  },
+
   data() {
     return {
       edit_mode: false,
@@ -135,30 +147,30 @@ export default {
 
   computed: {
     current_position() {
-      return this.$store.getters.now_playing?.position ?? -1
+      return this.queue.current?.position ?? -1
     },
     is_queue_save_allowed() {
       return (
-        this.$store.state.config.allow_modifying_stored_playlists &&
-        this.$store.state.config.default_playlist_directory
+        this.configurationStore.allow_modifying_stored_playlists &&
+        this.configurationStore.default_playlist_directory
       )
     },
     queue() {
-      return this.$store.state.queue
+      return this.queueStore
     },
     queue_items: {
       get() {
-        return this.$store.state.queue.items
+        return this.queue.items
       },
       set() {
         /* Do nothing? Send move request in @end event */
       }
     },
     show_only_next_items() {
-      return this.$store.state.show_only_next_items
+      return this.uiStore.show_only_next_items
     },
-    state() {
-      return this.$store.state.player
+    player() {
+      return this.playerStore
     }
   },
 
@@ -191,7 +203,7 @@ export default {
       }
     },
     update_show_next_items() {
-      this.$store.commit(types.SHOW_ONLY_NEXT_ITEMS, !this.show_only_next_items)
+      this.uiStore.show_only_next_items = !this.uiStore.show_only_next_items
     }
   }
 }
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index c8137746..540acf04 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -79,7 +79,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -88,6 +87,7 @@ import ListComposers from '@/components/ListComposers.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import TabsSearch from '@/components/TabsSearch.vue'
+import { useSearchStore } from '@/stores/search'
 import webapi from '@/webapi'
 
 const PAGE_SIZE = 3,
@@ -113,6 +113,10 @@ export default {
     TabsSearch
   },
 
+  setup() {
+    return { searchStore: useSearchStore() }
+  },
+
   data() {
     return {
       components: {
@@ -136,26 +140,26 @@ export default {
       return this.search_types.length === 1
     },
     recent_searches() {
-      return this.$store.state.recent_searches
+      return this.searchStore.recent_searches
     }
   },
 
   watch: {
     search_query() {
-      this.$store.commit(types.SEARCH_QUERY, this.search_query)
+      this.searchStore.search_query = this.search_query
     }
   },
 
   mounted() {
-    this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
-    this.search_query = this.$store.state.search_query
+    this.searchStore.search_source = this.$route.name
+    this.search_query = this.searchStore.search_query
     this.search_limit = PAGE_SIZE
     this.search()
   },
 
   methods: {
     expand(type) {
-      this.search_query = this.$store.state.search_query
+      this.search_query = this.searchStore.search_query
       this.search_types = [type]
       this.search_limit = -1
       this.search()
@@ -167,7 +171,7 @@ export default {
       this.search()
     },
     remove_search(query) {
-      this.$store.dispatch('remove_recent_search', query)
+      this.searchStore.remove(query)
     },
     reset() {
       this.results.clear()
@@ -189,7 +193,7 @@ export default {
       this.search_types.forEach((type) => {
         this.search_items(type)
       })
-      this.$store.dispatch('add_recent_search', this.search_query)
+      this.searchStore.add(this.search_query)
     },
     search_items(type) {
       const music = type !== 'audiobook' && type !== 'podcast'
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 9bf26762..154b1bfb 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -74,7 +74,6 @@
 </template>
 
 <script>
-import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
 import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue'
@@ -83,6 +82,7 @@ import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import TabsSearch from '@/components/TabsSearch.vue'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
+import { useSearchStore } from '@/stores/search'
 import webapi from '@/webapi'
 
 const PAGE_SIZE = 3,
@@ -101,6 +101,10 @@ export default {
     VueEternalLoading
   },
 
+  setup() {
+    return { searchStore: useSearchStore() }
+  },
+
   data() {
     return {
       components: {
@@ -121,7 +125,7 @@ export default {
       return this.search_types.length === 1
     },
     recent_searches() {
-      return this.$store.state.recent_searches.filter(
+      return this.searchStore.recent_searches.filter(
         (query) => !query.startsWith('query:')
       )
     }
@@ -129,20 +133,20 @@ export default {
 
   watch: {
     search_query() {
-      this.$store.commit(types.SEARCH_QUERY, this.search_query)
+      this.searchStore.search_query = this.search_query
     }
   },
 
   mounted() {
-    this.$store.commit(types.SEARCH_SOURCE, this.$route.name)
-    this.search_query = this.$store.state.search_query
+    this.searchStore.search_source = this.$route.name
+    this.search_query = this.searchStore.search_query
     this.search_parameters.limit = PAGE_SIZE
     this.search()
   },
 
   methods: {
     expand(type) {
-      this.search_query = this.$store.state.search_query
+      this.search_query = this.searchStore.search_query
       this.search_types = [type]
       this.search_parameters.limit = PAGE_SIZE_EXPANDED
       this.search_parameters.offset = 0
@@ -156,7 +160,7 @@ export default {
       this.search()
     },
     remove_search(query) {
-      this.$store.dispatch('remove_recent_search', query)
+      this.searchStore.remove(query)
     },
     reset() {
       this.results.clear()
@@ -180,7 +184,7 @@ export default {
           this.results.set(type, data[`${type}s`])
         })
       })
-      this.$store.dispatch('add_recent_search', this.search_query)
+      this.searchStore.add(this.search_query)
     },
     search_items() {
       return webapi.spotify().then(({ data }) => {
diff --git a/web-src/src/pages/PageSettingsArtwork.vue b/web-src/src/pages/PageSettingsArtwork.vue
index 72ec56f3..83f2cde8 100644
--- a/web-src/src/pages/PageSettingsArtwork.vue
+++ b/web-src/src/pages/PageSettingsArtwork.vue
@@ -54,14 +54,19 @@
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
+import { useServicesStore } from '@/stores/services'
 
 export default {
   name: 'PageSettingsArtwork',
   components: { ContentWithHeading, SettingsCheckbox, TabsSettings },
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   computed: {
     spotify() {
-      return this.$store.state.spotify
+      return this.servicesStore.spotify
     }
   }
 }
diff --git a/web-src/src/pages/PageSettingsOnlineServices.vue b/web-src/src/pages/PageSettingsOnlineServices.vue
index 1965de64..c87bd37c 100644
--- a/web-src/src/pages/PageSettingsOnlineServices.vue
+++ b/web-src/src/pages/PageSettingsOnlineServices.vue
@@ -131,12 +131,17 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
+import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'PageSettingsOnlineServices',
   components: { ContentWithHeading, TabsSettings },
 
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
   data() {
     return {
       lastfm_login: {
@@ -149,10 +154,10 @@ export default {
 
   computed: {
     lastfm() {
-      return this.$store.state.lastfm
+      return this.servicesStore.lastfm
     },
     spotify() {
-      return this.$store.state.spotify
+      return this.servicesStore.spotify
     },
     spotify_missing_scope() {
       if (
diff --git a/web-src/src/pages/PageSettingsRemotesOutputs.vue b/web-src/src/pages/PageSettingsRemotesOutputs.vue
index d659a5d0..185752ee 100644
--- a/web-src/src/pages/PageSettingsRemotesOutputs.vue
+++ b/web-src/src/pages/PageSettingsRemotesOutputs.vue
@@ -95,12 +95,18 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
+import { useOutputsStore } from '@/stores/outputs'
+import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
   name: 'PageSettingsRemotesOutputs',
   components: { ContentWithHeading, TabsSettings },
 
+  setup() {
+    return { outputsStore: useOutputsStore(), remotesStore: useRemotesStore() }
+  },
+
   data() {
     return {
       pairing_req: { pin: '' },
@@ -110,10 +116,10 @@ export default {
 
   computed: {
     outputs() {
-      return this.$store.state.outputs
+      return this.outputsStore.outputs
     },
     pairing() {
-      return this.$store.state.pairing
+      return this.remotesStore.pairing
     }
   },
 
diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index 376fcef2..f8bb4cdf 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -111,7 +111,7 @@
         <settings-textfield
           category="webinterface"
           name="show_composer_for_genre"
-          :disabled="!setting_show_composer_now_playing"
+          :disabled="!settingsStore.show_composer_now_playing"
           :placeholder="$t('page.settings.general.genres')"
         >
           <template #label>
@@ -169,6 +169,7 @@ import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
 import SettingsIntfield from '@/components/SettingsIntfield.vue'
 import SettingsTextfield from '@/components/SettingsTextfield.vue'
 import TabsSettings from '@/components/TabsSettings.vue'
+import { useSettingsStore } from '@/stores/settings'
 
 export default {
   name: 'PageSettingsWebinterface',
@@ -181,6 +182,10 @@ export default {
     TabsSettings
   },
 
+  setup() {
+    return { settingsStore: useSettingsStore() }
+  },
+
   computed: {
     locale: {
       get() {
@@ -209,12 +214,6 @@ export default {
           name: this.$t(`language.${item}`)
         }))
       }
-    },
-    setting_show_composer_now_playing() {
-      return this.$store.getters.setting_show_composer_now_playing
-    },
-    setting_show_filepath_now_playing() {
-      return this.$store.getters.setting_show_filepath_now_playing
     }
   }
 }
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 6657c345..726aa31f 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -1,4 +1,3 @@
-import * as types from '@/store/mutation_types'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import PageAbout from '@/pages/PageAbout.vue'
 import PageAlbum from '@/pages/PageAlbum.vue'
@@ -40,7 +39,7 @@ import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
-import store from '@/store'
+import { useUIStore } from '@/stores/ui'
 
 const TOP_WITH_TABS = 140
 const TOP_WITHOUT_TABS = 110
@@ -343,13 +342,14 @@ export const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (store.state.show_burger_menu) {
-    store.commit(types.SHOW_BURGER_MENU, false)
+  const uiStore = useUIStore()
+  if (uiStore.show_burger_menu) {
+    uiStore.show_burger_menu = false
     next(false)
     return
   }
-  if (store.state.show_player_menu) {
-    store.commit(types.SHOW_PLAYER_MENU, false)
+  if (uiStore.show_player_menu) {
+    uiStore.show_player_menu = false
     next(false)
     return
   }
diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js
deleted file mode 100644
index 5d7ed090..00000000
--- a/web-src/src/store/index.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import * as types from './mutation_types'
-import { createStore } from 'vuex'
-
-export default createStore({
-  state() {
-    return {
-      albums_sort: 1,
-      artist_albums_sort: 1,
-      artist_tracks_sort: 1,
-      artists_sort: 1,
-      composer_tracks_sort: 1,
-      config: {
-        buildoptions: [],
-        version: '',
-        websocket_port: 0
-      },
-      genre_tracks_sort: 1,
-      hide_singles: false,
-      hide_spotify: false,
-      lastfm: {},
-      library: {
-        albums: 0,
-        artists: 0,
-        db_playtime: 0,
-        songs: 0,
-        started_at: '01',
-        updated_at: '01',
-        updating: false
-      },
-      lyrics: {
-        content: [],
-        pane: false
-      },
-      notifications: {
-        list: [],
-        next_id: 1
-      },
-      outputs: [],
-      pairing: {},
-      player: {
-        consume: false,
-        item_id: 0,
-        item_length_ms: 0,
-        item_progress_ms: 0,
-        repeat: 'off',
-        shuffle: false,
-        state: 'stop',
-        volume: 0
-      },
-      queue: {
-        count: 0,
-        items: [],
-        version: 0
-      },
-      recent_searches: [],
-      rss_count: {},
-      search_query: '',
-      search_source: 'search-library',
-      settings: {
-        categories: []
-      },
-      show_burger_menu: false,
-      show_only_next_items: false,
-      show_player_menu: false,
-      show_update_dialog: false,
-      spotify: {},
-      update_dialog_scan_kind: ''
-    }
-  },
-
-  getters: {
-    now_playing: (state) =>
-      state.queue.items.find((item) => item.id === state.player.item_id) ?? {},
-    setting: (state) => (categoryName, optionName) =>
-      state.settings.categories
-        .find((category) => category.name === categoryName)
-        ?.options.find((option) => option.name === optionName) ?? {},
-    setting_recently_added_limit: (state, getters) =>
-      getters.settings_webinterface?.options.find(
-        (option) => option.name === 'recently_added_limit'
-      )?.value ?? 100,
-    setting_show_composer_for_genre: (state, getters) =>
-      getters.settings_webinterface?.options.find(
-        (option) => option.name === 'show_composer_for_genre'
-      )?.value ?? null,
-    setting_show_composer_now_playing: (state, getters) =>
-      getters.settings_webinterface?.options.find(
-        (option) => option.name === 'show_composer_now_playing'
-      )?.value ?? false,
-    setting_show_filepath_now_playing: (state, getters) =>
-      getters.settings_webinterface?.options.find(
-        (option) => option.name === 'show_filepath_now_playing'
-      )?.value ?? false,
-    settings_webinterface: (state) =>
-      state.settings?.categories.find(
-        (category) => category.name === 'webinterface'
-      ) ?? null
-  },
-
-  mutations: {
-    [types.UPDATE_CONFIG](state, config) {
-      state.config = config
-    },
-    [types.UPDATE_SETTINGS](state, settings) {
-      state.settings = settings
-    },
-    [types.UPDATE_LIBRARY_STATS](state, libraryStats) {
-      state.library = libraryStats
-    },
-    [types.UPDATE_LIBRARY_RSS_COUNT](state, count) {
-      state.rss_count = count
-    },
-    [types.UPDATE_OUTPUTS](state, outputs) {
-      state.outputs = outputs
-    },
-    [types.UPDATE_PLAYER_STATUS](state, playerStatus) {
-      state.player = playerStatus
-    },
-    [types.UPDATE_QUEUE](state, queue) {
-      state.queue = queue
-    },
-    [types.UPDATE_LYRICS](state, lyrics) {
-      state.lyrics.content = lyrics
-    },
-    [types.UPDATE_LASTFM](state, lastfm) {
-      state.lastfm = lastfm
-    },
-    [types.UPDATE_SPOTIFY](state, spotify) {
-      state.spotify = spotify
-    },
-    [types.UPDATE_PAIRING](state, pairing) {
-      state.pairing = pairing
-    },
-    [types.SEARCH_QUERY](state, query) {
-      state.search_query = query
-    },
-    [types.SEARCH_SOURCE](state, searchSource) {
-      state.search_source = searchSource
-    },
-    [types.COMPOSER_TRACKS_SORT](state, sort) {
-      state.composer_tracks_sort = sort
-    },
-    [types.GENRE_TRACKS_SORT](state, sort) {
-      state.genre_tracks_sort = sort
-    },
-    [types.HIDE_SINGLES](state, hideSingles) {
-      state.hide_singles = hideSingles
-    },
-    [types.HIDE_SPOTIFY](state, hideSpotify) {
-      state.hide_spotify = hideSpotify
-    },
-    [types.ARTISTS_SORT](state, sort) {
-      state.artists_sort = sort
-    },
-    [types.ARTIST_ALBUMS_SORT](state, sort) {
-      state.artist_albums_sort = sort
-    },
-    [types.ARTIST_TRACKS_SORT](state, sort) {
-      state.artist_tracks_sort = sort
-    },
-    [types.ALBUMS_SORT](state, sort) {
-      state.albums_sort = sort
-    },
-    [types.SHOW_ONLY_NEXT_ITEMS](state, showOnlyNextItems) {
-      state.show_only_next_items = showOnlyNextItems
-    },
-    [types.SHOW_BURGER_MENU](state, showBurgerMenu) {
-      state.show_burger_menu = showBurgerMenu
-    },
-    [types.SHOW_PLAYER_MENU](state, showPlayerMenu) {
-      state.show_player_menu = showPlayerMenu
-    },
-    [types.SHOW_UPDATE_DIALOG](state, showUpdateDialog) {
-      state.show_update_dialog = showUpdateDialog
-    },
-    [types.UPDATE_DIALOG_SCAN_KIND](state, scanKind) {
-      state.update_dialog_scan_kind = scanKind
-    }
-  },
-
-  actions: {
-    add_notification({ state }, notification) {
-      const newNotification = {
-        id: state.notifications.next_id++,
-        text: notification.text,
-        timeout: notification.timeout,
-        topic: notification.topic,
-        type: notification.type
-      }
-      if (newNotification.topic) {
-        const index = state.notifications.list.findIndex(
-          (elem) => elem.topic === newNotification.topic
-        )
-        if (index >= 0) {
-          state.notifications.list.splice(index, 1, newNotification)
-          return
-        }
-      }
-      state.notifications.list.push(newNotification)
-      if (notification.timeout > 0) {
-        setTimeout(() => {
-          this.dispatch('delete_notification', newNotification)
-        }, notification.timeout)
-      }
-    },
-    add_recent_search({ state }, query) {
-      const index = state.recent_searches.indexOf(query)
-      if (index !== -1) {
-        state.recent_searches.splice(index, 1)
-      }
-      state.recent_searches.splice(0, 0, query)
-      if (state.recent_searches.length > 5) {
-        state.recent_searches.pop()
-      }
-    },
-    delete_notification({ state }, notification) {
-      const index = state.notifications.list.indexOf(notification)
-      if (index !== -1) {
-        state.notifications.list.splice(index, 1)
-      }
-    },
-    remove_recent_search({ state }, query) {
-      const index = state.recent_searches.indexOf(query)
-      if (index !== -1) {
-        state.recent_searches.splice(index, 1)
-      }
-    },
-    update_setting({ state }, option) {
-      const settingCategory = state.settings.categories.find(
-          (category) => category.name === option.category
-        ),
-        settingOption = settingCategory.options.find(
-          (setting) => setting.name === option.name
-        )
-      settingOption.value = option.value
-    }
-  }
-})
diff --git a/web-src/src/store/mutation_types.js b/web-src/src/store/mutation_types.js
deleted file mode 100644
index 4aac0546..00000000
--- a/web-src/src/store/mutation_types.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export const ALBUMS_SORT = 'ALBUMS_SORT',
-  ARTISTS_SORT = 'ARTISTS_SORT',
-  ARTIST_ALBUMS_SORT = 'ARTIST_ALBUMS_SORT',
-  ARTIST_TRACKS_SORT = 'ARTIST_TRACKS_SORT',
-  COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT',
-  GENRE_TRACKS_SORT = 'GENRE_TRACKS_SORT',
-  HIDE_SINGLES = 'HIDE_SINGLES',
-  HIDE_SPOTIFY = 'HIDE_SPOTIFY',
-  SEARCH_QUERY = 'SEARCH_QUERY',
-  SEARCH_SOURCE = 'SEARCH_SOURCE',
-  SHOW_BURGER_MENU = 'SHOW_BURGER_MENU',
-  SHOW_ONLY_NEXT_ITEMS = 'SHOW_ONLY_NEXT_ITEMS',
-  SHOW_PLAYER_MENU = 'SHOW_PLAYER_MENU',
-  SHOW_UPDATE_DIALOG = 'SHOW_UPDATE_DIALOG',
-  UPDATE_CONFIG = 'UPDATE_CONFIG',
-  UPDATE_DIALOG_SCAN_KIND = 'UPDATE_DIALOG_SCAN_KIND',
-  UPDATE_LASTFM = 'UPDATE_LASTFM',
-  UPDATE_LIBRARY_RSS_COUNT = 'UPDATE_LIBRARY_RSS_COUNT',
-  UPDATE_LIBRARY_STATS = 'UPDATE_LIBRARY_STATS',
-  UPDATE_LYRICS = 'UPDATE_LYRICS',
-  UPDATE_OUTPUTS = 'UPDATE_OUTPUTS',
-  UPDATE_PAIRING = 'UPDATE_PAIRING',
-  UPDATE_PLAYER_STATUS = 'UPDATE_PLAYER_STATUS',
-  UPDATE_QUEUE = 'UPDATE_QUEUE',
-  UPDATE_SETTINGS = 'UPDATE_SETTINGS',
-  UPDATE_SPOTIFY = 'UPDATE_SPOTIFY'
diff --git a/web-src/src/stores/configuration.js b/web-src/src/stores/configuration.js
new file mode 100644
index 00000000..880efe9e
--- /dev/null
+++ b/web-src/src/stores/configuration.js
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+export const useConfigurationStore = defineStore('ConfigurationStore', {
+  state: () => ({
+    buildoptions: [],
+    version: '',
+    websocket_port: 0
+  })
+})
diff --git a/web-src/src/stores/library.js b/web-src/src/stores/library.js
new file mode 100644
index 00000000..bd4569d7
--- /dev/null
+++ b/web-src/src/stores/library.js
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useLibraryStore = defineStore('LibraryStore', {
+  state: () => ({
+    albums: 0,
+    artists: 0,
+    db_playtime: 0,
+    songs: 0,
+    rss: {},
+    started_at: '01',
+    updated_at: '01',
+    update_dialog_scan_kind: '',
+    updating: false
+  })
+})
diff --git a/web-src/src/stores/lyrics.js b/web-src/src/stores/lyrics.js
new file mode 100644
index 00000000..ac6c0272
--- /dev/null
+++ b/web-src/src/stores/lyrics.js
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+
+export const useLyricsStore = defineStore('LyricsStore', {
+  state: () => ({
+    content: [],
+    pane: false
+  })
+})
diff --git a/web-src/src/stores/notifications.js b/web-src/src/stores/notifications.js
new file mode 100644
index 00000000..53e7e5e1
--- /dev/null
+++ b/web-src/src/stores/notifications.js
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+
+export const useNotificationsStore = defineStore('NotificationsStore', {
+  state: () => ({
+    list: [],
+    next_id: 1
+  }),
+  actions: {
+    add(notification) {
+      const newNotification = {
+        id: this.next_id++,
+        text: notification.text,
+        timeout: notification.timeout,
+        topic: notification.topic,
+        type: notification.type
+      }
+      if (newNotification.topic) {
+        const index = this.list.findIndex(
+          (elem) => elem.topic === newNotification.topic
+        )
+        if (index >= 0) {
+          this.list.splice(index, 1, newNotification)
+          return
+        }
+      }
+      this.list.push(newNotification)
+      if (notification.timeout > 0) {
+        setTimeout(() => {
+          this.remove(newNotification)
+        }, notification.timeout)
+      }
+    },
+    remove(notification) {
+      const index = this.list.indexOf(notification)
+      if (index !== -1) {
+        this.list.splice(index, 1)
+      }
+    }
+  }
+})
diff --git a/web-src/src/stores/outputs.js b/web-src/src/stores/outputs.js
new file mode 100644
index 00000000..0b1ceb83
--- /dev/null
+++ b/web-src/src/stores/outputs.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useOutputsStore = defineStore('OutputsStore', {
+  state: () => ({
+    outputs: []
+  })
+})
diff --git a/web-src/src/stores/player.js b/web-src/src/stores/player.js
new file mode 100644
index 00000000..7a9cd2b9
--- /dev/null
+++ b/web-src/src/stores/player.js
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const usePlayerStore = defineStore('PlayerStore', {
+  state: () => ({
+    consume: false,
+    item_id: 0,
+    item_length_ms: 0,
+    item_progress_ms: 0,
+    repeat: 'off',
+    shuffle: false,
+    state: 'stop',
+    volume: 0
+  })
+})
diff --git a/web-src/src/stores/queue.js b/web-src/src/stores/queue.js
new file mode 100644
index 00000000..aed96c52
--- /dev/null
+++ b/web-src/src/stores/queue.js
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+import { usePlayerStore } from '@/stores/player'
+
+export const useQueueStore = defineStore('QueueStore', {
+  state: () => ({
+    count: 0,
+    items: [],
+    version: 0
+  }),
+  getters: {
+    current(state) {
+      const player = usePlayerStore()
+      return state.items.find((item) => item.id === player.item_id) ?? {}
+    }
+  }
+})
diff --git a/web-src/src/stores/remotes.js b/web-src/src/stores/remotes.js
new file mode 100644
index 00000000..c41204dc
--- /dev/null
+++ b/web-src/src/stores/remotes.js
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useRemotesStore = defineStore('RemotesStore', {
+  state: () => ({
+    pairing: {}
+  })
+})
diff --git a/web-src/src/stores/search.js b/web-src/src/stores/search.js
new file mode 100644
index 00000000..73210cb1
--- /dev/null
+++ b/web-src/src/stores/search.js
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+
+export const useSearchStore = defineStore('SearchStore', {
+  state: () => ({
+    recent_searches: [],
+    search_query: '',
+    search_source: 'search-library'
+  }),
+  actions: {
+    add(query) {
+      const index = this.recent_searches.indexOf(query)
+      if (index !== -1) {
+        this.recent_searches.splice(index, 1)
+      }
+      this.recent_searches.unshift(query)
+      if (this.recent_searches.length > 5) {
+        this.recent_searches.pop()
+      }
+    },
+    remove(query) {
+      const index = this.recent_searches.indexOf(query)
+      if (index !== -1) {
+        this.recent_searches.splice(index, 1)
+      }
+    }
+  }
+})
diff --git a/web-src/src/stores/services.js b/web-src/src/stores/services.js
new file mode 100644
index 00000000..1348f02d
--- /dev/null
+++ b/web-src/src/stores/services.js
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+
+export const useServicesStore = defineStore('ServicesStore', {
+  state: () => ({
+    lastfm: {},
+    spotify: {}
+  })
+})
diff --git a/web-src/src/stores/settings.js b/web-src/src/stores/settings.js
new file mode 100644
index 00000000..f39ff1f5
--- /dev/null
+++ b/web-src/src/stores/settings.js
@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia'
+
+export const useSettingsStore = defineStore('SettingsStore', {
+  state: () => ({
+    categories: []
+  }),
+  getters: {
+    recently_added_limit: (state) =>
+      state.setting('webinterface', 'recently_added_limit')?.value ?? 100,
+    show_composer_for_genre: (state) =>
+      state.setting('webinterface', 'show_composer_for_genre')?.value ?? null,
+    show_composer_now_playing: (state) =>
+      state.setting('webinterface', 'show_composer_now_playing')?.value ??
+      false,
+    show_cover_artwork_in_album_lists: (state) =>
+      state.setting('webinterface', 'show_cover_artwork_in_album_lists')
+        ?.value ?? false,
+    show_filepath_now_playing: (state) =>
+      state.setting('webinterface', 'show_filepath_now_playing')?.value ??
+      false,
+    show_menu_item_audiobooks: (state) =>
+      state.setting('webinterface', 'show_menu_item_audiobooks')?.value ??
+      false,
+    show_menu_item_files: (state) =>
+      state.setting('webinterface', 'show_menu_item_files')?.value ?? false,
+    show_menu_item_music: (state) =>
+      state.setting('webinterface', 'show_menu_item_music')?.value ?? false,
+    show_menu_item_playlists: (state) =>
+      state.setting('webinterface', 'show_menu_item_playlists')?.value ?? false,
+    show_menu_item_podcasts: (state) =>
+      state.setting('webinterface', 'show_menu_item_podcasts')?.value ?? false,
+    show_menu_item_radio: (state) =>
+      state.setting('webinterface', 'show_menu_item_radio')?.value ?? false,
+    show_menu_item_search: (state) =>
+      state.setting('webinterface', 'show_menu_item_search')?.value ?? false
+  },
+  actions: {
+    update(option) {
+      const settingCategory = this.categories.find(
+        (category) => category.name === option.category
+      )
+      if (!settingCategory) {
+        return
+      }
+      const settingOption = settingCategory.options.find(
+        (setting) => setting.name === option.name
+      )
+      if (settingOption) {
+        settingOption.value = option.value
+      }
+    },
+    setting(categoryName, optionName) {
+      return (
+        this.categories
+          .find((category) => category.name === categoryName)
+          ?.options.find((option) => option.name === optionName) ?? {}
+      )
+    }
+  }
+})
diff --git a/web-src/src/stores/ui.js b/web-src/src/stores/ui.js
new file mode 100644
index 00000000..bc80cbf3
--- /dev/null
+++ b/web-src/src/stores/ui.js
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+
+export const useUIStore = defineStore('UIStore', {
+  state: () => ({
+    albums_sort: 1,
+    artist_albums_sort: 1,
+    artist_tracks_sort: 1,
+    artists_sort: 1,
+    composer_tracks_sort: 1,
+    genre_tracks_sort: 1,
+    hide_singles: false,
+    hide_spotify: false,
+    show_burger_menu: false,
+    show_only_next_items: false,
+    show_player_menu: false,
+    show_update_dialog: false
+  })
+})
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index 3e66203d..2bff94a2 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import i18n from '@/i18n'
-import store from '@/store'
+import { useNotificationsStore } from '@/stores/notifications'
+import { useQueueStore } from '@/stores/queue'
 
 const { t } = i18n.global
 
@@ -8,7 +9,7 @@ axios.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.request.status && error.request.responseURL) {
-      store.dispatch('add_notification', {
+      useNotificationsStore().add({
         text: t('server.request-failed', {
           cause: error.request.statusText,
           status: error.request.status,
@@ -316,7 +317,7 @@ export default {
 
   queue_add(uri) {
     return axios.post(`./api/queue/items/add?uris=${uri}`).then((response) => {
-      store.dispatch('add_notification', {
+      useNotificationsStore().add({
         text: t('server.appended-tracks', { count: response.data.count }),
         timeout: 2000,
         type: 'info'
@@ -327,16 +328,15 @@ export default {
 
   queue_add_next(uri) {
     let position = 0
-    if (store.getters.now_playing && store.getters.now_playing.id) {
-      position = store.getters.now_playing.position + 1
+    const { current } = useQueueStore()
+    if (current?.id) {
+      position = current.position + 1
     }
     return axios
       .post(`./api/queue/items/add?uris=${uri}&position=${position}`)
       .then((response) => {
-        store.dispatch('add_notification', {
-          text: t('server.appended-tracks', {
-            count: response.data.count
-          }),
+        useNotificationsStore().add({
+          text: t('server.appended-tracks', { count: response.data.count }),
           timeout: 2000,
           type: 'info'
         })
@@ -352,10 +352,8 @@ export default {
     return axios
       .post('./api/queue/items/add', null, { params: { expression } })
       .then((response) => {
-        store.dispatch('add_notification', {
-          text: t('server.appended-tracks', {
-            count: response.data.count
-          }),
+        useNotificationsStore().add({
+          text: t('server.appended-tracks', { count: response.data.count }),
           timeout: 2000,
           type: 'info'
         })
@@ -367,16 +365,15 @@ export default {
     const params = {}
     params.expression = expression
     params.position = 0
-    if (store.getters.now_playing && store.getters.now_playing.id) {
-      params.position = store.getters.now_playing.position + 1
+    const { current } = useQueueStore()
+    if (current?.id) {
+      params.position = current.position + 1
     }
     return axios
       .post('./api/queue/items/add', null, { params })
       .then((response) => {
-        store.dispatch('add_notification', {
-          text: t('server.appended-tracks', {
-            count: response.data.count
-          }),
+        useNotificationsStore().add({
+          text: t('server.appended-tracks', { count: response.data.count }),
           timeout: 2000,
           type: 'info'
         })
@@ -396,7 +393,7 @@ export default {
     return axios
       .post('./api/queue/save', null, { params: { name } })
       .then((response) => {
-        store.dispatch('add_notification', {
+        useNotificationsStore().add({
           text: t('server.queue-saved', { name }),
           timeout: 2000,
           type: 'info'