Nuxt.js全局中间件获取客户端localStorage处理主题切换刷新失效问题

针对你遇到的SSR环境无法访问localStorage、刷新时主题样式异常的问题，以下是几种无需在每个页面重复编写mounted逻辑的解决方案：

方案1：客户端专属全局插件（推荐） #

利用Nuxt的插件机制，通过文件名后缀.client指定仅在客户端运行，确保只在浏览器环境下读取localStorage并设置主题，全局仅执行一次。

步骤： #

1. 在项目plugins目录创建theme.client.js文件：

// Nuxt 3 写法
export default defineNuxtPlugin((nuxtApp) => {
  // 初始化主题
  if (process.client) {
    const storedTheme = localStorage.getItem('_t') || '_l'
    document.documentElement.setAttribute('data-theme', storedTheme === '_d' ? 'dark' : 'light')
  }

  // 封装全局主题切换方法
  const toggleTheme = () => {
    const currentTheme = localStorage.getItem('_t') || '_l'
    const newTheme = currentTheme === '_d' ? '_l' : '_d'
    localStorage.setItem('_t', newTheme)
    document.documentElement.setAttribute('data-theme', newTheme === '_d' ? 'dark' : 'light')
  }

  // 挂载到Nuxt实例，组件内可通过useNuxtApp().$toggleTheme调用
  nuxtApp.provide('toggleTheme', toggleTheme)
})

Nuxt 2 适配写法：

export default ({ app }) => {
  if (process.client) {
    const storedTheme = localStorage.getItem('_t') || '_l'
    document.documentElement.setAttribute('data-theme', storedTheme === '_d' ? 'dark' : 'light')

    app.$toggleTheme = () => {
      const currentTheme = localStorage.getItem('_t') || '_l'
      const newTheme = currentTheme === '_d' ? '_l' : '_d'
      localStorage.setItem('_t', newTheme)
      document.documentElement.setAttribute('data-theme', newTheme === '_d' ? 'dark' : 'light')
    }
  }
}

方案2：全局入口app.vue中使用useHead动态设置 #

在Nuxt的全局入口组件app.vue中，通过useHead的htmlAttrs结合onload事件，确保DOM加载后初始化主题：

<template>
  <NuxtPage />
</template>

<script setup>
// Nuxt 3 写法
useHead({
  htmlAttrs: {
    onload: () => {
      const storedTheme = localStorage.getItem('_t') || '_l'
      document.documentElement.setAttribute('data-theme', storedTheme === '_d' ? 'dark' : 'light')
    }
  }
})

// 主题切换方法
const toggleTheme = () => {
  const currentTheme = localStorage.getItem('_t') || '_l'
  const newTheme = currentTheme === '_d' ? '_l' : '_d'
  localStorage.setItem('_t', newTheme)
  document.documentElement.setAttribute('data-theme', newTheme === '_d' ? 'dark' : 'light')
}
</script>

这种方式无需额外创建插件，直接在全局入口处理，适合简单场景。

方案3：内联脚本提前设置主题（解决闪烁问题） #

如果刷新页面时出现短暂的样式闪烁，可以在nuxt.config.ts中添加同步执行的内联脚本，在HTML加载初期就设置主题属性：

// Nuxt 3 nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: `
            (function() {
              const theme = localStorage.getItem('_t') || '_l';
              document.documentElement.setAttribute('data-theme', theme === '_d' ? 'dark' : 'light');
            })();
          `,
          type: 'text/javascript',
          defer: false // 同步执行，提前设置主题
        }
      ]
    }
  }
})

该脚本会在页面渲染前执行，比插件或组件钩子更早，彻底避免样式闪烁。

内容的提问来源于stack exchange，提问作者dokichan