| name | app-store |
| description | Global Pinia store (useAppStore) for theme and language with cookie persistence. Use when changing theme or language, or touching app/stores/app.ts. |
App Store (Pinia)
Global app store: theme and language with SSR-safe cookie persistence.
Key files
app/stores/app.ts - store definition
API
const appStore = useAppStore()
type ThemeName = 'dark' | 'light'
type LanguageCode = 'en' | 'es'
appStore.theme
appStore.language
appStore.setTheme('light')
appStore.toggleTheme()
appStore.setLanguage('es')
Persistence
theme and language use useCookie() - SSR-safe, no hydration mismatch- Cookies:
theme and language, both with sameSite: 'lax'
- The store is initialized before Vuetify (
app:mounted hook)
Theme change
appStore.toggleTheme()
appStore.setTheme('light')
Language change
const { setLocale } = useI18n()
const appStore = useAppStore()
appStore.setLanguage('es')
setLocale('es')
Restrictions
- Do not call
vuetify.theme.change() or vuetify.theme.global.name directly from components
- Do not read
localStorage for the theme; use the store
- Changing language requires both
setLanguage() (store) and setLocale() (i18n)
- Do not import the store with
import { useAppStore } from '~/stores/app' - Nuxt auto-imports it
