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
vue jsx
Only in projects with
nuxt
Taught by the skill
fe-nuxt Nuxt apps
Since version
0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain nuxt/no-module-scope-state