[Vuejs]-Persisting pinia stores using nuxt 3

by

0👍

I had the same issues and decided to go for a quick and easy workaround, without using any plugins:

// app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
import { watch, onBeforeMount } from "vue";
import { usePersistentStore } from "~~/store/persistent";

const ps = usePersistentStore();

onBeforeMount(() => {
  ps.$state = JSON.parse(localStorage.getItem("persistent"));
});
watch(ps.$state, (value) => {
  localStorage.setItem("persistent", JSON.stringify(ps.$state));
});
</script>

Leave a comment