nuxt-color-mode 未运行。返回未定义答案

【问题标题】：nuxt-color-mode not running. Returning undefinednuxt-color-mode 未运行。返回未定义
【发布时间】：2022-11-11 09:47:23
【问题描述】：

按照他们的官方文档安装nuxt-color-mode。虽然，在加载我得到的页面时无法读取未定义的属性（读取“值”）

npm install --save-dev @nuxtjs/color-mode

添加到nuxt.config.js

buildModules: [
  // https://go.nuxtjs.dev/tailwindcss
  '@nuxtjs/tailwindcss',
  '@nuxtjs/color-mode'
],

然后在index.vue 内添加：

<script>
export default {
  name: 'IndexPage',
  colorMode: 'light',
}
</script>

不确定为什么以下行导致错误： <h1>Color mode: {{ $colorMode.value }}</h1> 它也没有向 <html> 元素添加类。

我在这里做错了吗？

【问题讨论】：

嗨，您在这里使用的是 Nuxt2 还是 3？
"nuxt": "^2.15.8",

标签： vue.js nuxt.js

【解决方案1】：

您需要降级到软件包的最新 v2，即 "@nuxtjs/color-mode": "^2.1.1"。看起来 v3 无法与 Nuxt2 一起正常工作。

以下模板效果很好

<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<style>
body {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

和

buildModules: ['@nuxtjs/color-mode']

和ssr: true 在nuxt.config.js。

【讨论】：