Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

faust's avatar
Level 1

Issue with Pinia stores persistence in production

Hello

I'm having an issue with store persistence in production enviroment using pinia-plugin-persistedstate. I have 'persist' option as localStorage but when i reload the page everything is reset. This doesn't happen in development enviroment. I tried changing 'persist' to sessionStorage but that didn't do anything.

I'm hosting (shared hosting) a Laravel 10 + Vue 3 app. I don't have the Vue code in a different code base, I have it inside resources/js within the Laravel project folder.

Relevant files:

resources/js/app.js

import { createApp, markRaw } from 'vue';
import App from './App.vue';
import router from './routes';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import './bootstrap';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)

pinia.use(({ store }) => {
    store.router = markRaw(router);
});

const app = createApp(App);
app.use(router);
app.use(pinia);
app.config.globalProperties.$storage = window.location.protocol + '//' + window.location.host + '/storage/';

app.mount('#app');

resources/js/bootstrap.js

import axios from 'axios';


axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;
axios.defaults.baseURL = "http://example.com";

resources/js/routes.js

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    const authStore = useAuthStore();

    let isAuthenticated = authStore.user;

    console.log(isAuthenticated);

    // check route meta if it requires auth or not
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!isAuthenticated) {
            return next({
                name: 'login'
            });
        }
    }

    if (isAuthenticated && (to.name == 'login' || to.name == 'register')) {
        return next({
            name: 'dashboard'
        });
    }

    if (to.name == 'base') {
        if (isAuthenticated) {
            return next({
                name: 'dashboard'
            });
        } else {
            return next({
                name: 'login'
            });
        }
    }

    return next();
});

export default router;

This is my first time hosting a Laravel + Vue application so I'm not sure which information i should provide, so if you need more info please do tell.

0 likes
0 replies

Please or to participate in this conversation.