Nuxt.js中v-calendar v2.4.1日期星期显示错误所有月份均从周日起始

• 日历组件显示异常：2022年6月1日本为周三，组件内显示为周日，且所有月份的1号均被错误显示为周日。
• 环境说明：使用v2.4.1版本v-calendar，组件调用无额外props配置；同版本组件在纯Vue项目中运行正常，异常仅出现在Nuxt.js项目中。
• 现有引入配置：
  /plugins/v-calendar.js

import Vue from "vue";
import VCalendar from "v-calendar";

Vue.use(VCalendar, {
  componentPrefix: "v",
});

nuxt.config.js

plugins: [
   { src: "@/plugins/v-calendar.js", ssr: false },
],

页面调用代码

<v-calendar />

设置ssr: false后，v-calendar仅在客户端初始化，初始化过程中组件未正确读取浏览器本地的时区、周规则配置，日期星期计算逻辑出现锚点错误，默认将每月1号的星期值固定为周日。

两种方案任选其一即可：

1. 注册插件时显式传入本地化配置，跳过默认的环境探测逻辑，修改/plugins/v-calendar.js：

import Vue from "vue";
import VCalendar from "v-calendar";

Vue.use(VCalendar, {
  componentPrefix: "v",
  // 显式指定使用中文区域配置
  locale: "zh-CN",
  locales: {
    "zh-CN": {
      // 周一作为周起始，若需要周日起始可改为0
      firstDayOfWeek: 1,
    },
  },
});

2. 调整插件加载模式，移除ssr: false配置，让插件同时支持SSR和客户端渲染。
   修改nuxt.config.js：

plugins: [
   "@/plugins/v-calendar.js",
],

如果调整后SSR阶段报window is not defined错误，给插件加客户端判断即可：

import Vue from "vue";
let VCalendar;
if (process.client) {
  VCalendar = require("v-calendar").default;
}
Vue.use(VCalendar, {
  componentPrefix: "v",
});

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