Как можно использовать localStorage в pinia, с использованием Nuxt3?

Приложение написано на Nuxt 3 и я хотел в него добавить pinia, но специфика регистраций и авторизаций пользователя в том что я сохраняю данные о нем в localStorage и когда пользователь заходит на сайт, он сразу заходит в свой аккаунт из за того что у него сохранились данные из localStorage. И проблема в том что nuxt использует SSR, поэтому изначально localStorage недоступен. Поэтому выходит ошибка

Я перепробовал несколько решений, таких как - Использование import { useLocalStorage } from '@vueuse/core';

Через костяк с сохранением пользователя в localStorage в шаблонах vue после рендера страницы

Пробовал убирать SSR, и оно работало, но это противоречит моей изначальной задумке использования Nuxt

Но все ровно ни одно из этих решений мне не помогло.

Если нельзя через localSrorage, я открыт к решению с использованием cookie

import { defineStore } from 'pinia';
import axios from "axios";
import * as process from "process";

// import { useLocalStorage } from '@vueuse/core';

const useUserStore = defineStore('user', {

    state(){
        return {
            currentUser: localStorage.getItem('user') != null ? JSON.parse(localStorage.getItem('user')) : {user: null},
            users: [],
        }
    },

    ...
}

Конфиг Nuxt:

// https://nuxt.com/docs/api/configuration/nuxt-config
// @ts-ignore
import * as process from "process";

export default defineNuxtConfig({
    webpack: undefined,
    theme: "",
    app: {
        head: {
            charset: 'utf-8',
            viewport: 'width=device-width, initial-scale=1',
            title: 'My Library',
            meta: [
                // <meta name="description" content="My amazing site">
                { name: 'description', content: 'My amazing site' }
            ]
        }
    },

    // ssr: false,

    runtimeConfig: {
        public: {
            base: process.env.BASE_URL,
            baseApi: process.env.API_BASE_URL
        }
    },

    modules: [
        '@nuxtjs/tailwindcss',
        '@nuxtjs/color-mode',
        '@vueuse/nuxt',
        '@pinia/nuxt'
    ],

    imports: {
        dirs: ['./stores'],
    },

    pinia: {
        autoImports: ['defineStore', 'acceptHMRUpdate'],
    },

    plugins: [
        '~/plugins/vue3-toastify'
    ],

    colorMode: {
        classSuffix: '' // Удаляю приписку -mode
    },

    // конфиги tailwindcss
    tailwindcss: {
        cssPath: '~/assets/css/tailwind.css',
        configPath: 'tailwind.config.js',
        exposeConfig: false,
        injectPosition: 0,
        viewer: true
    }
})


Ответы (0 шт):