Nuxt
nuxt/no-module-scope-state
Never create ref() or reactive() state at module scope in a Nuxt app; use useState or a Pinia store.
seriousstaticfe-nuxt
Why
A module is loaded once per server process and shared by every request it serves. export const user = ref(null) in a composable file therefore holds the last visitor's data for the next one: one user can see another user's name, cart or token in server-rendered HTML, and the value never gets freed.
Fix
Create state inside a function that runs per request: export const useUser = () => useState('user', () => null), or a Pinia store (defineStore), which Nuxt creates per request. A plain <script> block of a .vue file is module scope too; <script setup> is per component. Client-only files (*.client.ts plugins) may keep module state.
Examples
// bad (composables/user.js)
export const user = ref(null)
// good
export const useUser = () => useState('user', () => null)Sources
Facts
- Id
nuxt/no-module-scope-state- Severity
- serious
- Check
- static checked in the source by
audit - Applies to
vuejsx- Only in projects with
nuxt- Taught by the skill
fe-nuxtNuxt apps- Since version
- 0.1.0
Read it in the terminal
npx github:dawidolko/frontend-skills explain nuxt/no-module-scope-state