Как можно использовать 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
}
})