diff --git a/assets/App.vue b/assets/App.vue
index 5430fa79..73862a18 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -18,7 +18,7 @@
                 show-title
                 scrollable
                 closable
-                @close="store.dispatch('REMOVE_ACTIVE_CONTAINER', other)"
+                @close="containerStore.removeActiveContainer(other)"
               ></log-container>
             </pane>
           </template>
@@ -44,25 +44,29 @@
 
 <script lang="ts" setup>
 import { Splitpanes, Pane } from "splitpanes";
-import { ref, onMounted, watchEffect, toRefs, computed } from "vue";
-import { useStore } from "vuex";
+import { ref, onMounted, watchEffect } from "vue";
+import { storeToRefs } from "pinia";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import hotkeys from "hotkeys-js";
-import { setTitle } from "./composables/title";
-import { isMobile } from "./composables/mediaQuery";
-import { smallerScrollbars, lightTheme, menuWidth } from "@/composables/settings";
 
-import FuzzySearchModal from "./components/FuzzySearchModal.vue";
-import LogContainer from "./components/LogContainer.vue";
-import SideMenu from "./components/SideMenu.vue";
-import MobileMenu from "./components/MobileMenu.vue";
+import { setTitle } from "@/composables/title";
+import { isMobile } from "@/composables/media";
+import { smallerScrollbars, lightTheme, menuWidth } from "@/composables/settings";
+import { useContainerStore } from "@/stores/container";
+
+import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
+import LogContainer from "@/components/LogContainer.vue";
+import SideMenu from "@/components/SideMenu.vue";
+import MobileMenu from "@/components/MobileMenu.vue";
 
 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
-const store = useStore();
-const { authorizationNeeded } = toRefs(store.state);
-const activeContainers = computed(() => store.getters.activeContainers);
-const visibleContainers = computed(() => store.getters.visibleContainers);
+
+const authorizationNeeded = false;
+
+const containerStore = useContainerStore();
+
+const { activeContainers, visibleContainers } = storeToRefs(containerStore);
 
 onMounted(() => {
   if (smallerScrollbars.value) {
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 13090da1..e2f8f8bf 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -32,71 +32,67 @@
   </div>
 </template>
 
-<script lang="ts">
-import { mapState, mapActions } from "vuex";
+<script lang="ts" setup>
 import fuzzysort from "fuzzysort";
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { Container } from "@/types/Container";
 
-export default {
-  props: {
-    maxResults: {
-      default: 20,
-      type: Number,
-    },
+const props = defineProps({
+  maxResults: {
+    default: 20,
+    type: Number,
   },
-  data() {
-    return {
-      query: "",
-    };
-  },
-  name: "FuzzySearchModal",
+});
 
-  mounted() {
-    this.$nextTick(() => this.$refs.autocomplete.focus());
-  },
-  watch: {},
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-    selected(item) {
-      this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
-      this.$emit("close");
-    },
-    addColumn(container) {
-      this.appendActiveContainer(container);
-      this.$emit("close");
-    },
-  },
-  computed: {
-    ...mapState(["containers"]),
-    preparedContainers() {
-      return this.containers.map((c) => ({
-        name: c.name,
-        id: c.id,
-        created: c.created,
-        state: c.state,
-        preparedName: fuzzysort.prepare(c.name),
-      }));
-    },
-    results() {
-      const options = {
-        limit: this.maxResults,
-        key: "preparedName",
-      };
-      if (this.query) {
-        const results = fuzzysort.go(this.query, this.preparedContainers, options);
-        results.forEach((result) => {
-          if (result.obj.state === "running") {
-            result.score += 1;
-          }
-        });
-        return results.sort((a, b) => b.score - a.score).map((i) => i.obj);
-      } else {
-        return [...this.containers].sort((a, b) => b.created - a.created);
+const emit = defineEmits(["close"]);
+
+const query = ref("");
+const autocomplete = ref<HTMLElement>();
+const router = useRouter();
+const store = useContainerStore();
+const { containers } = storeToRefs(store);
+const preparedContainers = computed(() =>
+  containers.value.map(({ name, id, created, state }) => ({
+    name,
+    id,
+    created,
+    state,
+    preparedName: fuzzysort.prepare(name),
+  }))
+);
+
+const results = computed(() => {
+  const options = {
+    limit: props.maxResults,
+    key: "preparedName",
+  };
+  if (query.value) {
+    const results = fuzzysort.go(query.value, preparedContainers.value, options);
+    results.forEach((result) => {
+      if (result.obj.state === "running") {
+        // @ts-ignore
+        result.score += 1;
       }
-    },
-  },
-};
+    });
+    return [...results].sort((a, b) => b.score - a.score).map((i) => i.obj);
+  } else {
+    return [...containers.value].sort((a, b) => b.created - a.created);
+  }
+});
+
+onMounted(() => nextTick(() => autocomplete.value?.focus()));
+
+function selected(item: { id: string; name: string }) {
+  router.push({ name: "container", params: { id: item.id, name: item.name } });
+  emit("close");
+}
+function addColumn(container: Container) {
+  store.appendActiveContainer(container);
+  emit("close");
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/assets/components/LogActionsToolbar.vue b/assets/components/LogActionsToolbar.vue
index 9851fc76..ae1e55d6 100644
--- a/assets/components/LogActionsToolbar.vue
+++ b/assets/components/LogActionsToolbar.vue
@@ -22,7 +22,8 @@
 </template>
 
 <script lang="ts" setup>
-import config from "../store/config";
+import config from "@/stores/config";
+import { Container } from "@/types/Container";
 import hotkeys from "hotkeys-js";
 import { onMounted, onUnmounted } from "vue";
 
@@ -32,7 +33,8 @@ const props = defineProps({
     default: () => {},
   },
   container: {
-    type: Object,
+    type: Object as () => Container,
+    required: true,
   },
 });
 
diff --git a/assets/components/LogContainer.vue b/assets/components/LogContainer.vue
index 3a7d290f..609a9a58 100644
--- a/assets/components/LogContainer.vue
+++ b/assets/components/LogContainer.vue
@@ -6,10 +6,10 @@
           <container-title :container="container" @close="$emit('close')"></container-title>
         </div>
         <div class="column is-narrow is-paddingless">
-          <container-stat :stat="container.stat" :state="container.state"></container-stat>
+          <!-- <container-stat :stat="container.stat" :state="container.state"></container-stat> -->
         </div>
         <div class="mr-2 column is-narrow is-paddingless" v-if="closable">
-          <button class="delete is-medium" @click="$emit('close')"></button>
+          <button class="delete is-medium" @click="emit('close')"></button>
         </div>
         <!-- <div class="mr-2 column is-narrow is-paddingless">
           <o-dropdown aria-role="list" position="bottom-left">
@@ -36,7 +36,8 @@
 
 <script lang="ts" setup>
 import { ref, toRefs } from "vue";
-import useContainer from "../composables/container";
+import LogViewerWithSource from "./LogViewerWithSource.vue";
+import { useContainerStore } from "@/stores/container";
 
 const props = defineProps({
   id: {
@@ -56,10 +57,15 @@ const props = defineProps({
     default: false,
   },
 });
-const { id } = toRefs(props);
-const { container } = useContainer(id);
 
-const viewer = ref<HTMLElement>();
+const emit = defineEmits(["close"]);
+
+const { id } = toRefs(props);
+const store = useContainerStore();
+
+const container = store.currentContainer(id);
+
+const viewer = ref<InstanceType<typeof LogViewerWithSource>>();
 
 function onClearClicked() {
   viewer.value?.clear();
diff --git a/assets/components/LogEventSource.spec.ts b/assets/components/LogEventSource.spec.ts
index b7901e0e..9a64ec85 100644
--- a/assets/components/LogEventSource.spec.ts
+++ b/assets/components/LogEventSource.spec.ts
@@ -1,12 +1,14 @@
 import { mount } from "@vue/test-utils";
-import { createStore } from "vuex";
+import { createTestingPinia } from "@pinia/testing";
 // @ts-ignore
 import EventSource, { sources } from "eventsourcemock";
 import debounce from "lodash.debounce";
 import LogEventSource from "./LogEventSource.vue";
 import LogViewer from "./LogViewer.vue";
 import { settings } from "../composables/settings";
+import { useSearchFilter } from "@/composables/search";
 import { mocked } from "ts-jest/utils";
+import { computed, Ref } from "vue";
 
 jest.mock("lodash.debounce", () =>
   jest.fn((fn) => {
@@ -15,9 +17,22 @@ jest.mock("lodash.debounce", () =>
   })
 );
 
-jest.mock("../store/config.ts", () => ({ base: "" }));
+jest.mock("@/stores/container", () => ({
+  __esModule: true,
+  useContainerStore() {
+    return {
+      currentContainer(id: Ref<string>) {
+        return computed(() => ({ id: id.value }));
+      },
+    };
+  },
+}));
+
+jest.mock("@/stores/config", () => ({ base: "" }));
 
 describe("<LogEventSource />", () => {
+  const search = useSearchFilter();
+
   beforeEach(() => {
     // @ts-ignore
     global.EventSource = EventSource;
@@ -32,25 +47,18 @@ describe("<LogEventSource />", () => {
   });
 
   function createLogEventSource(
-    { searchFilter = null, hourStyle = "auto" }: { searchFilter?: string | null; hourStyle?: "auto" | "24" | "12" } = {
+    {
+      searchFilter = undefined,
+      hourStyle = "auto",
+    }: { searchFilter?: string | undefined; hourStyle?: "auto" | "24" | "12" } = {
       hourStyle: "auto",
     }
   ) {
     settings.value.hourStyle = hourStyle;
-    const store = createStore({
-      state: { searchFilter },
-      getters: {
-        allContainersById() {
-          return {
-            abc: { state: "running" },
-          };
-        },
-      },
-    });
-
+    search.searchFilter.value = searchFilter;
     return mount(LogEventSource, {
       global: {
-        plugins: [store],
+        plugins: [createTestingPinia()],
         components: {
           LogViewer,
         },
diff --git a/assets/components/LogEventSource.vue b/assets/components/LogEventSource.vue
index b76d6358..2b536a87 100644
--- a/assets/components/LogEventSource.vue
+++ b/assets/components/LogEventSource.vue
@@ -1,18 +1,16 @@
 <template>
-  <div>
-    <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
-    <slot :messages="messages"></slot>
-  </div>
+  <infinite-loader :onLoadMore="loadOlderLogs" :enabled="messages.length > 100"></infinite-loader>
+  <slot :messages="messages"></slot>
 </template>
 
 <script lang="ts" setup>
 import { toRefs, ref, watch, onUnmounted } from "vue";
 import debounce from "lodash.debounce";
 
+import { LogEntry } from "@/types/LogEntry";
 import InfiniteLoader from "./InfiniteLoader.vue";
-
-import config from "../store/config";
-import useContainer from "../composables/container";
+import config from "@/stores/config";
+import { useContainerStore } from "@/stores/container";
 
 const props = defineProps({
   id: {
@@ -22,15 +20,9 @@ const props = defineProps({
 });
 
 const { id } = toRefs(props);
-
 const emit = defineEmits(["loading-more"]);
-
-interface LogEntry {
-  date: Date;
-  message: String;
-  key: String;
-  event?: String;
-}
+const store = useContainerStore();
+const container = store.currentContainer(id);
 
 const messages = ref<LogEntry[]>([]);
 const buffer = ref<LogEntry[]>([]);
@@ -110,8 +102,6 @@ function parseMessage(data: String): LogEntry {
   return { key, date, message };
 }
 
-const { container } = useContainer(id);
-
 watch(
   () => container.value.state,
   (newValue, oldValue) => {
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index 993d15c6..d02fb4b3 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -8,49 +8,26 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-import { useStore } from "vuex";
+import { PropType, toRefs } from "vue";
 
 import { size, showTimestamp } from "@/composables/settings";
 import RelativeTime from "./RelativeTime.vue";
 import AnsiConvertor from "ansi-to-html";
+import { LogEntry } from "@/types/LogEntry";
+import { useSearchFilter } from "@/composables/search";
 
 const props = defineProps({
   messages: {
-    type: Array,
+    type: Array as PropType<LogEntry[]>,
     required: true,
   },
 });
 
-const store = useStore();
 const ansiConvertor = new AnsiConvertor({ escapeXML: true });
-function colorize(value: string) {
-  return ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
-}
-
-const searchFilter = computed(() => store.state.searchFilter);
-const filtered = computed(() => {
-  if (searchFilter && searchFilter.value) {
-    const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
-    try {
-      const regex = isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
-      return props.messages
-        .filter((d) => d.message.match(regex))
-        .map((d) => ({
-          ...d,
-          message: d.message.replace(regex, "<mark>$&</mark>"),
-        }));
-    } catch (e) {
-      if (e instanceof SyntaxError) {
-        console.info(`Ignoring SytaxError from search.`, e);
-        return props.messages;
-      }
-      throw e;
-    }
-  }
-
-  return props.messages;
-});
+const colorize = (value: string) =>
+  ansiConvertor.toHtml(value).replace("&lt;mark&gt;", "<mark>").replace("&lt;/mark&gt;", "</mark>");
+const { messages } = toRefs(props);
+const filtered = useSearchFilter().filteredMessages(messages);
 </script>
 <style scoped lang="scss">
 .events {
diff --git a/assets/components/LogViewerWithSource.vue b/assets/components/LogViewerWithSource.vue
index d745fc7d..b796bcf7 100644
--- a/assets/components/LogViewerWithSource.vue
+++ b/assets/components/LogViewerWithSource.vue
@@ -1,10 +1,11 @@
 <template>
-  <log-event-source ref="source" :id="id" v-slot="eventSource" @loading-more="emit('loading-more', $event)">
-    <log-viewer :messages="eventSource.messages"></log-viewer>
+  <log-event-source ref="source" :id="id" v-slot="{ messages }" @loading-more="emit('loading-more', $event)">
+    <log-viewer :messages="messages"></log-viewer>
   </log-event-source>
 </template>
 
 <script lang="ts" setup>
+import LogViewer from "./LogViewer.vue";
 import { ref } from "vue";
 defineProps({
   id: {
@@ -15,7 +16,7 @@ defineProps({
 
 const emit = defineEmits(["loading-more"]);
 
-const source = ref<HTMLElement>();
+const source = ref<InstanceType<typeof LogViewer>>();
 function clear() {
   source.value?.clear();
 }
diff --git a/assets/components/MobileMenu.vue b/assets/components/MobileMenu.vue
index 1abfe61e..9e60deb9 100644
--- a/assets/components/MobileMenu.vue
+++ b/assets/components/MobileMenu.vue
@@ -9,7 +9,7 @@
         </router-link>
       </div>
       <div class="column ml-4 is-family-monospace is-ellipsis" v-if="$route.name == 'container'">
-        {{ allContainersById[$route.params.id].name }}
+        {{ allContainersById[route.params.id].name }}
       </div>
 
       <div class="column is-narrow push-right">
@@ -41,32 +41,26 @@
   </aside>
 </template>
 
-<script lang="ts">
-import { mapGetters } from "vuex";
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
 
-export default {
-  props: [],
-  name: "MobileMenu",
-  data() {
-    return {
-      showNav: false,
-    };
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "allContainersById"]),
-  },
-  watch: {
-    $route(to, from) {
-      this.showNav = false;
-    },
-  },
-};
+const store = useContainerStore();
+const route = useRoute();
+const { visibleContainers, allContainersById } = storeToRefs(store);
+
+const showNav = ref(false);
+
+watch(route, () => {
+  showNav.value = false;
+});
 </script>
 <style scoped lang="scss">
 aside {
   padding: 1em;
   position: fixed;
-  top: 0;
   left: 0;
   right: 0;
   background: var(--scheme-main-ter);
diff --git a/assets/components/ScrollProgress.vue b/assets/components/ScrollProgress.vue
index 883a169a..17febec6 100644
--- a/assets/components/ScrollProgress.vue
+++ b/assets/components/ScrollProgress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll-progress">
+  <div class="scroll-progress" ref="root">
     <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
       <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
     </svg>
@@ -17,76 +17,70 @@
   </div>
 </template>
 
-<script lang="ts">
-import { mapGetters } from "vuex";
+<script lang="ts" setup>
+import { useContainerStore } from "@/stores/container";
 import throttle from "lodash.throttle";
+import { storeToRefs } from "pinia";
+import { onMounted, onUnmounted, ref, watchPostEffect } from "vue";
 
-export default {
-  name: "ScrollProgress",
-  props: {
-    indeterminate: {
-      default: false,
-      type: Boolean,
-    },
-    autoHide: {
-      default: true,
-      type: Boolean,
-    },
+const props = defineProps({
+  indeterminate: {
+    default: false,
+    type: Boolean,
   },
-  data() {
-    return {
-      scrollProgress: 0,
-      animation: { cancel: () => {} },
-      parentElement: document,
-    };
+  autoHide: {
+    default: true,
+    type: Boolean,
   },
-  created() {
-    this.onScrollThrottled = throttle(this.onScroll, 150);
-  },
-  mounted() {
-    this.attachEvents();
-  },
-  beforeUnmount() {
-    this.detachEvents();
-  },
-  watch: {
-    activeContainers() {
-      this.detachEvents();
-      this.attachEvents();
-    },
-    indeterminate() {
-      this.$nextTick(() => this.onScroll());
-    },
-  },
-  computed: {
-    ...mapGetters(["activeContainers"]),
-  },
-  methods: {
-    attachEvents() {
-      this.parentElement = this.$el.closest("[data-scrolling]") || document;
-      this.parentElement.addEventListener("scroll", this.onScrollThrottled);
-    },
-    detachEvents() {
-      this.parentElement.removeEventListener("scroll", this.onScrollThrottled);
-    },
-    onScroll() {
-      const p = this.parentElement == document ? document.documentElement : this.parentElement;
-      this.scrollProgress = p.scrollTop / (p.scrollHeight - p.clientHeight);
-      this.animation.cancel();
-      if (this.autoHide) {
-        this.animation = this.$el.animate(
-          { opacity: [1, 0] },
-          {
-            duration: 500,
-            delay: 2000,
-            fill: "both",
-            easing: "ease-out",
-          }
-        );
+});
+
+const scrollProgress = ref(0);
+const animation = ref({ cancel: () => {} });
+const parentElement = ref<Node>(document);
+const root = ref<HTMLElement>();
+const store = useContainerStore();
+const { activeContainers } = storeToRefs(store);
+const onScrollThrottled = throttle(onScroll, 150);
+
+function onScroll() {
+  const parent = parentElement.value == document ? document.documentElement : (parentElement.value as HTMLElement);
+  scrollProgress.value = parent.scrollTop / (parent.scrollHeight - parent.clientHeight);
+  animation.value.cancel();
+  if (props.autoHide && root.value) {
+    animation.value = root.value.animate(
+      { opacity: [1, 0] },
+      {
+        duration: 500,
+        delay: 2000,
+        fill: "both",
+        easing: "ease-out",
       }
-    },
-  },
-};
+    );
+  }
+}
+
+function attachEvents() {
+  parentElement.value = root.value?.closest("[data-scrolling]") || document;
+  parentElement.value.addEventListener("scroll", onScrollThrottled);
+}
+
+function detachEvents() {
+  parentElement.value.removeEventListener("scroll", onScrollThrottled);
+}
+
+onMounted(() => {
+  attachEvents();
+});
+
+onUnmounted(() => {
+  detachEvents();
+});
+
+watchPostEffect(() => {
+  activeContainers.value.length;
+  detachEvents();
+  attachEvents();
+});
 </script>
 <style scoped lang="scss">
 .scroll-progress {
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index 9a4cbc2e..443fb602 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -6,8 +6,8 @@
           class="input"
           type="text"
           placeholder="Find / RegEx"
-          ref="filter"
-          v-model="filter"
+          ref="input"
+          v-model="searchFilter"
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
@@ -22,56 +22,34 @@
 </template>
 
 <script lang="ts" setup>
-import { search } from "@/composables/settings";
-</script>
-
-<script lang="ts">
-import { mapActions, mapState } from "vuex";
 import hotkeys from "hotkeys-js";
 
-export default {
-  props: [],
-  name: "Search",
-  data() {
-    return {
-      showSearch: false,
-    };
-  },
-  mounted() {
-    hotkeys("command+f, ctrl+f", (event, handler) => {
-      this.showSearch = true;
-      this.$nextTick(() => this.$refs.filter.focus() || this.$refs.filter.select());
-      event.preventDefault();
-    });
-    hotkeys("esc", (event, handler) => {
-      this.resetSearch();
-    });
-  },
-  beforeUnmount() {
-    this.updateSearchFilter("");
-    hotkeys.unbind("command+f, ctrl+f, esc");
-  },
-  methods: {
-    ...mapActions({
-      updateSearchFilter: "SET_SEARCH",
-    }),
-    resetSearch() {
-      this.showSearch = false;
-      this.filter = "";
-    },
-  },
-  computed: {
-    ...mapState(["searchFilter"]),
-    filter: {
-      get() {
-        return this.searchFilter;
-      },
-      set(value) {
-        this.updateSearchFilter(value);
-      },
-    },
-  },
-};
+import { search } from "@/composables/settings";
+import { useSearchFilter } from "@/composables/search";
+import { ref, nextTick, onMounted, onUnmounted } from "vue";
+
+const showSearch = ref(false);
+const input = ref<HTMLInputElement>();
+const { searchFilter } = useSearchFilter();
+
+onMounted(() => {
+  hotkeys("command+f, ctrl+f", (event, handler) => {
+    showSearch.value = true;
+    nextTick(() => input.value?.focus() || input.value?.select());
+    event.preventDefault();
+  });
+  hotkeys("esc", () => resetSearch());
+});
+
+onUnmounted(() => {
+  searchFilter.value = "";
+  hotkeys.unbind("command+f, ctrl+f");
+  hotkeys.unbind("esc");
+});
+
+function resetSearch() {
+  showSearch.value = false;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index af2f12ef..1e1ad844 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -42,7 +42,7 @@
             <div class="is-flex-shrink-1 column-icon">
               <span
                 class="icon is-small"
-                @click.stop.prevent="appendActiveContainer(item)"
+                @click.stop.prevent="store.appendActiveContainer(item)"
                 v-show="!activeContainersById[item.id]"
                 title="Pin as column"
               >
@@ -56,31 +56,22 @@
   </aside>
 </template>
 
-<script lang="ts">
-import { mapActions, mapGetters } from "vuex";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useContainerStore } from "@/stores/container";
+import type { Container } from "@/types/Container";
 
-export default {
-  props: [],
-  name: "SideMenu",
+const store = useContainerStore();
 
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapGetters(["visibleContainers", "activeContainers"]),
-    activeContainersById() {
-      return this.activeContainers.reduce((map, obj) => {
-        map[obj.id] = obj;
-        return map;
-      }, {});
-    },
-  },
-  methods: {
-    ...mapActions({
-      appendActiveContainer: "APPEND_ACTIVE_CONTAINER",
-    }),
-  },
-};
+const { activeContainers, visibleContainers } = storeToRefs(store);
+
+const activeContainersById = computed(() =>
+  activeContainers.value.reduce((acc, item) => {
+    acc[item.id] = item;
+    return acc;
+  }, {} as Record<string, Container>)
+);
 </script>
 <style scoped lang="scss">
 aside {
diff --git a/assets/components/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/__snapshots__/LogEventSource.spec.ts.snap
index 3b7bbf3e..dc7b6bdb 100644
--- a/assets/components/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/__snapshots__/LogEventSource.spec.ts.snap
@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LogEventSource /> renders correctly 1`] = `
-"<div>
-  <div class=\\"infinte-loader\\">
-    <div class=\\"spinner\\" style=\\"display: none;\\">
-      <div class=\\"bounce1\\"></div>
-      <div class=\\"bounce2\\"></div>
-      <div class=\\"bounce3\\"></div>
-    </div>
+"<div class=\\"infinte-loader\\">
+  <div class=\\"spinner\\" style=\\"display: none;\\">
+    <div class=\\"bounce1\\"></div>
+    <div class=\\"bounce2\\"></div>
+    <div class=\\"bounce3\\"></div>
   </div>
-  <ul class=\\"events medium\\"></ul>
-</div>"
+</div>
+<ul class=\\"events medium\\"></ul>"
 `;
diff --git a/assets/composables/container.ts b/assets/composables/container.ts
deleted file mode 100644
index 4ace0a57..00000000
--- a/assets/composables/container.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Ref , computed} from "vue";
-import { useStore } from "vuex";
-
-export default function useContainer(id: Ref<string>) {
-  const store = useStore();
-  const container = computed(() => store.getters.allContainersById[id.value]);
-
-  return { container };
-}
diff --git a/assets/composables/mediaQuery.ts b/assets/composables/media.ts
similarity index 100%
rename from assets/composables/mediaQuery.ts
rename to assets/composables/media.ts
diff --git a/assets/composables/search.ts b/assets/composables/search.ts
new file mode 100644
index 00000000..e671868b
--- /dev/null
+++ b/assets/composables/search.ts
@@ -0,0 +1,37 @@
+import { ref, computed, Ref } from "vue";
+
+const searchFilter = ref<string>();
+
+import type { LogEntry } from "@/types/LogEntry";
+
+export function useSearchFilter() {
+  function filteredMessages(messages: Ref<LogEntry[]>) {
+    return computed(() => {
+      if (searchFilter && searchFilter.value) {
+        const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
+        try {
+          const regex = isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
+          return messages.value
+            .filter((d) => d.message.match(regex))
+            .map((d) => ({
+              ...d,
+              message: d.message.replace(regex, "<mark>$&</mark>"),
+            }));
+        } catch (e) {
+          if (e instanceof SyntaxError) {
+            console.info(`Ignoring SytaxError from search.`, e);
+            return messages.value;
+          }
+          throw e;
+        }
+      }
+
+      return messages.value;
+    });
+  }
+
+  return {
+    filteredMessages,
+    searchFilter,
+  };
+}
diff --git a/assets/main.ts b/assets/main.ts
index 9a7c7268..51ad5f78 100644
--- a/assets/main.ts
+++ b/assets/main.ts
@@ -3,8 +3,8 @@ import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 import { Autocomplete, Button, Dropdown, Switch, Radio, Field, Tooltip, Modal, Config } from "@oruga-ui/oruga-next";
 import { bulmaConfig } from "@oruga-ui/theme-bulma";
-import store from "./store";
-import config from "./store/config";
+import { createPinia } from 'pinia'
+import config from "./stores/config";
 import App from "./App.vue";
 import { Container, Settings, Index, Show, ContainerNotFound, PageNotFound, Login } from "./pages";
 
@@ -54,7 +54,7 @@ const router = createRouter({
 
 createApp(App)
   .use(router)
-  .use(store)
+  .use(createPinia())
   .use(Autocomplete)
   .use(Button)
   .use(Dropdown)
diff --git a/assets/pages/Container.vue b/assets/pages/Container.vue
index bd0afecd..646fbe25 100644
--- a/assets/pages/Container.vue
+++ b/assets/pages/Container.vue
@@ -5,38 +5,33 @@
   </div>
 </template>
 
-<script lang="ts">
-import { mapGetters } from "vuex";
-import Search from "../components/Search.vue";
-import LogContainer from "../components/LogContainer.vue";
+<script lang="ts" setup>
+import { onMounted, toRefs, watchEffect } from "vue";
+import Search from "@/components/Search.vue";
+import LogContainer from "@/components/LogContainer.vue";
 import { setTitle } from "@/composables/title";
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
 
-export default {
-  props: ["id"],
-  name: "Container",
-  components: {
-    LogContainer,
-    Search,
-  },
-  created() {
-    setTitle("loading");
-  },
+const store = useContainerStore();
 
-  mounted() {
-    if (this.allContainersById[this.id]) {
-      setTitle(this.allContainersById[this.id].name);
-    }
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
   },
-  computed: {
-    ...mapGetters(["allContainersById", "activeContainers"]),
-  },
-  watch: {
-    id() {
-      setTitle(this.allContainersById[this.id].name);
-    },
-    allContainersById() {
-      setTitle(this.allContainersById[this.id].name);
-    },
-  },
-};
+});
+
+const { id } = toRefs(props);
+
+const currentContainer = store.currentContainer(id);
+const { activeContainers } = storeToRefs(store);
+
+setTitle("loading");
+
+onMounted(() => {
+  setTitle(currentContainer.value?.name);
+});
+
+watchEffect(() => setTitle(currentContainer.value?.name));
 </script>
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
index 1e16a7b0..070380d3 100644
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -76,60 +76,47 @@
   </div>
 </template>
 
-<script lang="ts">
-import { mapState } from "vuex";
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useRouter } from "vue-router";
+import { useContainerStore } from "@/stores/container";
 import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime.vue";
-import config from "../store/config";
+import config from "@/stores/config";
 
-export default {
-  name: "Index",
-  components: { SearchIcon, PastTime },
-  data() {
-    return {
-      version: config.version,
-      search: null,
-      sort: "running",
-      secured: config.secured,
-      base: config.base,
-    };
-  },
-  methods: {
-    onEnter() {
-      if (this.results.length == 1) {
-        const [item] = this.results;
-        this.$router.push({ name: "container", params: { id: item.id, name: item.name } });
-      }
-    },
-  },
-  computed: {
-    ...mapState(["containers"]),
-    mostRecentContainers() {
-      return [...this.containers].sort((a, b) => b.created - a.created);
-    },
-    runningContainers() {
-      return this.mostRecentContainers.filter((c) => c.state === "running");
-    },
-    allContainers() {
-      return this.containers;
-    },
-    results() {
-      if (this.search) {
-        return fuzzysort.go(this.search, this.allContainers, { key: "name" }).map((i) => i.obj);
-      }
-      switch (this.sort) {
-        case "all":
-          return this.mostRecentContainers;
-        case "running":
-          return this.runningContainers;
+const { base, version, secured } = config;
+const containerStore = useContainerStore();
+const { containers } = storeToRefs(containerStore);
+const router = useRouter();
 
-        default:
-          throw `Invalid sort order: ${this.sort}`;
-      }
-    },
-  },
-};
+const sort = ref("running");
+const search = ref();
+
+const results = computed(() => {
+  if (search.value) {
+    return fuzzysort.go(search.value, containers.value, { key: "name" }).map((i) => i.obj);
+  }
+  switch (sort.value) {
+    case "all":
+      return mostRecentContainers.value;
+    case "running":
+      return runningContainers.value;
+    default:
+      throw `Invalid sort order: ${sort.value}`;
+  }
+});
+
+const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
+const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
+
+function onEnter() {
+  if (results.value.length == 1) {
+    const [item] = results.value;
+    router.push({ name: "container", params: { id: item.id, name: item.name } });
+  }
+}
 </script>
 <style lang="scss" scoped>
 .panel {
diff --git a/assets/pages/Login.vue b/assets/pages/Login.vue
index 6c4fd43a..270d4732 100644
--- a/assets/pages/Login.vue
+++ b/assets/pages/Login.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import config from "../store/config";
+import config from "@/stores/config";
 import { setTitle } from "@/composables/title";
 export default {
   name: "Login",
diff --git a/assets/pages/Settings.vue b/assets/pages/Settings.vue
index 6c6545f5..b8bd24d5 100644
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -108,7 +108,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import gt from "semver/functions/gt";
-import config from "../store/config";
+import config from "@/stores/config";
 import { setTitle } from "@/composables/title";
 import {
   search,
diff --git a/assets/pages/Show.vue b/assets/pages/Show.vue
index 11390e42..ea806ed1 100644
--- a/assets/pages/Show.vue
+++ b/assets/pages/Show.vue
@@ -1,29 +1,29 @@
-<template></template>
+<script lang="ts" setup>
+import { useContainerStore } from "@/stores/container";
+import { storeToRefs } from "pinia";
+import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-<script lang="ts">
-import { mapGetters } from "vuex";
-export default {
-  props: [],
-  name: "Show",
-  computed: mapGetters(["visibleContainers"]),
-  watch: {
-    visibleContainers(newValue) {
-      if (newValue) {
-        if (this.$route.query.name) {
-          const [container, _] = this.visibleContainers.filter((c) => c.name == this.$route.query.name);
-          if (container) {
-            this.$router.push({ name: "container", params: { id: container.id } });
-          } else {
-            console.error(`No containers found matching name=${this.$route.query.name}. Redirecting to /`);
-            this.$router.push({ name: "default" });
-          }
-        } else {
-          console.error(`Expection query parameter name to be set. Redirecting to /`);
-          this.$router.push({ name: "default" });
-        }
+const router = useRouter();
+const route = useRoute();
+
+const store = useContainerStore();
+const { visibleContainers } = storeToRefs(store);
+
+watch(visibleContainers, (newValue) => {
+  if (newValue) {
+    if (route.query.name) {
+      const [container, _] = visibleContainers.value.filter((c) => c.name == route.query.name);
+      if (container) {
+        router.push({ name: "container", params: { id: container.id } });
+      } else {
+        console.error(`No containers found matching name=${route.query.name}. Redirecting to /`);
+        router.push({ name: "default" });
       }
-    },
-  },
-};
+    } else {
+      console.error(`Expection query parameter name to be set. Redirecting to /`);
+      router.push({ name: "default" });
+    }
+  }
+});
 </script>
-<style scoped></style>
diff --git a/assets/store/index.ts b/assets/store/index.ts
deleted file mode 100644
index 0c381527..00000000
--- a/assets/store/index.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { createStore } from "vuex";
-import config from "./config";
-import { showAllContainers } from "@/composables/settings";
-
-interface Container {
-  id: string;
-  name: string;
-  state: string;
-  stat: ContainerStat;
-}
-
-interface ContainerStat {
-  cpu: number;
-  memory: number;
-  memoryUsage: number;
-}
-
-type IdToContainer = { [id: string]: Container };
-
-function allContainersById(containers: Container[]): IdToContainer {
-  return containers.reduce((map, obj) => {
-    map[obj.id] = obj;
-    return map;
-  }, {} as IdToContainer);
-}
-const store = createStore({
-  state: {
-    containers: [] as Container[],
-    activeContainerIds: [] as string[],
-    searchFilter: null,
-    authorizationNeeded: config.authorizationNeeded,
-  },
-  mutations: {
-    SET_CONTAINERS(state, containers) {
-      const containersById = allContainersById(containers);
-
-      containers.forEach((container: Container) => {
-        container.stat =
-          containersById[container.id] && containersById[container.id].stat
-            ? containersById[container.id].stat
-            : { memoryUsage: 0, cpu: 0, memory: 0 };
-      });
-
-      state.containers = containers;
-    },
-    ADD_ACTIVE_CONTAINERS(state, { id }) {
-      state.activeContainerIds.push(id);
-    },
-    REMOVE_ACTIVE_CONTAINER(state, { id }) {
-      state.activeContainerIds.splice(state.activeContainerIds.indexOf(id), 1);
-    },
-    SET_SEARCH(state, filter) {
-      state.searchFilter = filter;
-    },
-    UPDATE_CONTAINER(_, { container, data }) {
-      for (const [key, value] of Object.entries(data)) {
-        container[key] = value;
-      }
-    },
-  },
-  actions: {
-    APPEND_ACTIVE_CONTAINER({ commit }, container) {
-      commit("ADD_ACTIVE_CONTAINERS", container);
-    },
-    REMOVE_ACTIVE_CONTAINER({ commit }, container) {
-      commit("REMOVE_ACTIVE_CONTAINER", container);
-    },
-    SET_SEARCH({ commit }, filter) {
-      commit("SET_SEARCH", filter);
-    },
-    UPDATE_SETTING({ commit }, setting) {
-      commit("UPDATE_SETTINGS", setting);
-    },
-    UPDATE_STATS({ commit, getters: { allContainersById } }, stat) {
-      const container = allContainersById[stat.id];
-      if (container) {
-        commit("UPDATE_CONTAINER", { container, data: { stat } });
-      }
-    },
-    UPDATE_CONTAINER({ commit, getters: { allContainersById } }, event) {
-      switch (event.name) {
-        case "die":
-          const container = allContainersById[event.actorId];
-          commit("UPDATE_CONTAINER", { container, data: { state: "exited" } });
-          break;
-        default:
-      }
-    },
-  },
-  getters: {
-    allContainersById({ containers }) {
-      return allContainersById(containers);
-    },
-    visibleContainers({ containers }) {
-      const filter = showAllContainers ? () => true : (c: Container) => c.state === "running";
-      return containers.filter(filter);
-    },
-    activeContainers({ activeContainerIds }, { allContainersById }) {
-      return activeContainerIds.map((id) => allContainersById[id]);
-    },
-  },
-});
-
-if (!config.authorizationNeeded) {
-  const es = new EventSource(`${config.base}/api/events/stream`);
-  es.addEventListener("containers-changed", (e) => store.commit("SET_CONTAINERS", JSON.parse(e.data)), false);
-  es.addEventListener("container-stat", (e) => store.dispatch("UPDATE_STATS", JSON.parse(e.data)), false);
-  es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
-}
-
-export default store;
diff --git a/assets/store/config.ts b/assets/stores/config.ts
similarity index 100%
rename from assets/store/config.ts
rename to assets/stores/config.ts
diff --git a/assets/stores/container.ts b/assets/stores/container.ts
new file mode 100644
index 00000000..cb9286a1
--- /dev/null
+++ b/assets/stores/container.ts
@@ -0,0 +1,54 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref, Ref, computed } from "vue";
+
+import { showAllContainers } from "@/composables/settings";
+import config from "@/stores/config";
+import { Container } from "@/types/Container";
+
+export const useContainerStore = defineStore("container", () => {
+  const containers = ref<Container[]>([]);
+  const activeContainerIds = ref<string[]>([]);
+
+  const allContainersById = computed(() =>
+    containers.value.reduce((acc, container) => {
+      acc[container.id] = container;
+      return acc;
+    }, {} as Record<string, Container>)
+  );
+
+  const visibleContainers = computed(() => {
+    const filter = showAllContainers.value ? () => true : (c: Container) => c.state === "running";
+    return containers.value.filter(filter);
+  });
+
+  const activeContainers = computed(() => activeContainerIds.value.map((id) => allContainersById.value[id]));
+
+  const es = new EventSource(`${config.base}/api/events/stream`);
+  es.addEventListener(
+    "containers-changed",
+    (e: Event) => (containers.value = JSON.parse((e as MessageEvent).data)),
+    false
+  );
+  // es.addEventListener("container-stat", (e) => store.dispatch("UPDATE_STATS", JSON.parse(e.data)), false);
+  // es.addEventListener("container-die", (e) => store.dispatch("UPDATE_CONTAINER", JSON.parse(e.data)), false);
+
+  const currentContainer = (id: Ref<string>) => computed(() => allContainersById.value[id.value]);
+  const appendActiveContainer = ({ id }: Container) => activeContainerIds.value.push(id);
+  const removeActiveContainer = ({ id }: Container) => activeContainerIds.value.splice(activeContainerIds.value.indexOf(id), 1);
+  return {
+    containers,
+    activeContainerIds,
+    allContainersById,
+    visibleContainers,
+    activeContainers,
+    currentContainer,
+    appendActiveContainer,
+    removeActiveContainer,
+  };
+});
+
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useContainerStore, import.meta.hot));
+}
diff --git a/assets/types/Container.d.ts b/assets/types/Container.d.ts
new file mode 100644
index 00000000..b360da2f
--- /dev/null
+++ b/assets/types/Container.d.ts
@@ -0,0 +1,15 @@
+export interface Container {
+  readonly id: string;
+  readonly created: number;
+  readonly image: string;
+  readonly name: string;
+  readonly state: string;
+  readonly status: string;
+  stat: ContainerStat;
+}
+
+export interface ContainerStat {
+  readonly cpu: number;
+  readonly memory: number;
+  readonly memoryUsage: number;
+}
diff --git a/assets/types/LogEntry.d.ts b/assets/types/LogEntry.d.ts
new file mode 100644
index 00000000..5bbd0b2c
--- /dev/null
+++ b/assets/types/LogEntry.d.ts
@@ -0,0 +1,6 @@
+export interface LogEntry {
+  date: Date;
+  message: string;
+  key: string;
+  event?: string;
+}
diff --git a/package.json b/package.json
index c4061d8f..512ec580 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "hotkeys-js": "^3.8.7",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "pinia": "^2.0.3",
     "sass": "^1.43.4",
     "semver": "^7.3.5",
     "splitpanes": "^3.0.6",
@@ -46,12 +47,12 @@
     "unplugin-vue-components": "^0.17.2",
     "vite": "^2.6.14",
     "vue": "^3.2.22",
-    "vue-router": "^4.0.12",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
+    "@pinia/testing": "^0.0.6",
     "@types/jest": "^27.0.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 125d3666..c97c92df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
   '@iconify-json/octicon': ^1.0.5
   '@oruga-ui/oruga-next': ^0.4.7
   '@oruga-ui/theme-bulma': ^0.1.3
+  '@pinia/testing': ^0.0.6
   '@types/jest': ^27.0.2
   '@types/lodash.debounce': ^4.0.6
   '@types/lodash.throttle': ^4.1.6
@@ -31,6 +32,7 @@ specifiers:
   lodash.debounce: ^4.0.8
   lodash.throttle: ^4.1.1
   npm-run-all: ^4.1.5
+  pinia: ^2.0.3
   prettier: ^2.4.1
   release-it: ^14.11.7
   sass: ^1.43.4
@@ -45,7 +47,6 @@ specifiers:
   vite: ^2.6.14
   vue: ^3.2.22
   vue-router: ^4.0.12
-  vuex: ^4.0.2
 
 dependencies:
   '@iconify-json/carbon': 1.0.10
@@ -63,6 +64,7 @@ dependencies:
   hotkeys-js: 3.8.7
   lodash.debounce: 4.0.8
   lodash.throttle: 4.1.1
+  pinia: 2.0.3_typescript@4.4.4+vue@3.2.22
   sass: 1.43.4
   semver: 7.3.5
   splitpanes: 3.0.6
@@ -73,11 +75,11 @@ dependencies:
   vite: 2.6.14_sass@1.43.4
   vue: 3.2.22
   vue-router: 4.0.12_vue@3.2.22
-  vuex: 4.0.2_vue@3.2.22
 
 devDependencies:
   '@babel/plugin-transform-runtime': 7.16.0
   '@babel/preset-env': 7.16.0
+  '@pinia/testing': 0.0.6_pinia@2.0.3+vue@3.2.22
   '@types/jest': 27.0.2
   '@types/lodash.debounce': 4.0.6
   '@types/lodash.throttle': 4.1.6
@@ -1707,6 +1709,18 @@ packages:
       bulma: 0.9.3
     dev: false
 
+  /@pinia/testing/0.0.6_pinia@2.0.3+vue@3.2.22:
+    resolution: {integrity: sha512-Jb+M5Cu0HCBULvpl7sSYn6hZ0v30pAMWGfPNO6DmoCJ1RnDbz0VtEF4A5C7Cuuo485cJaCm074V+2VO8Fs+Usg==}
+    peerDependencies:
+      pinia: ~2.0.4
+    dependencies:
+      pinia: 2.0.3_typescript@4.4.4+vue@3.2.22
+      vue-demi: 0.12.1_vue@3.2.22
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@rollup/pluginutils/4.1.1:
     resolution: {integrity: sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==}
     engines: {node: '>= 8.0.0'}
@@ -5239,6 +5253,24 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /pinia/2.0.3_typescript@4.4.4+vue@3.2.22:
+    resolution: {integrity: sha512-jNq+eVCAbFQS/uOiqskSRsKsFzLcQpgegcpjI8eAzU3QOwmsdLLHZBE1dvy802jecRC3FPPJSlj1MISF/sRV2w==}
+    peerDependencies:
+      '@vue/composition-api': ^1.3.3
+      typescript: ^4.4.4
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.0.0-beta.20
+      typescript: 4.4.4
+      vue: 3.2.22
+      vue-demi: 0.12.1_vue@3.2.22
+    dev: false
+
   /pirates/4.0.1:
     resolution: {integrity: sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==}
     engines: {node: '>= 6'}
@@ -6410,7 +6442,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.22
-    dev: false
 
   /vue-router/4.0.12_vue@3.2.22:
     resolution: {integrity: sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==}
@@ -6431,15 +6462,6 @@ packages:
       '@vue/shared': 3.2.22
     dev: false
 
-  /vuex/4.0.2_vue@3.2.22:
-    resolution: {integrity: sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==}
-    peerDependencies:
-      vue: ^3.0.2
-    dependencies:
-      '@vue/devtools-api': 6.0.0-beta.20
-      vue: 3.2.22
-    dev: false
-
   /w3c-hr-time/1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     dependencies: