简介

使用 Vuetify 和 Nuxt3 搭建系统时，I18N 需要做一些特殊配置，本文就来记录一下。

本文记录时使用的各个包版本：

json
{
  "dependencies": {
    "@nuxtjs/i18n": "^8.3.1",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "echarts": "^5.5.1",
    "nuxt": "^3.12.4",
    "vue": "latest",
    "vuetify-nuxt-module": "^0.18.2"
  },
  "devDependencies": {
    "i": "^0.3.7",
    "pnpm": "^9.7.0",
    "vite-plugin-vuetify": "^2.0.4"
  }
}

总的来说，实现 Nuxt 中的 Vuetify 国际化 I18N 配置分三步:

1. 安装依赖，重点依赖：@nuxtjs/i18n、vuetify-nuxt-module；
2. 设置Nuxt 的 i18n配置，重要文件：nuxt.config.ts、i18n.config.ts；
3. 客制化 i18n，并引用 Vuetify 提供的 I18N 文件，如：zhHans、en等。

使用Electron开发桌面程序时，一般都会自定义窗口标题行，并实现拖拽窗口的功能，要实现该功能非常简单，只需要一个CSS即可：

css
-webkit-app-region: drag;

原帖链接：https://www.instagram.com/p/DAi1X7vMJEr

1. 全民炒股：仅一周的时间，全国各地，大街小巷，充斥着炒股的声音，各大媒体/娱乐平台都在谈论股市，上证指数也在短短五个交易日从 2800 冲上了 3300 ，创业板更是大涨超 40% ，这是回光返照还是起死回生？我们拭目以待。
2. 房价上涨：随着上一周的会议宣布，中央出台一揽子政策，并明确说明要促进股市上涨、房价止跌回升，有个别房企跟随政策的声音，发布房价上涨声明！？
3. 个人反省：老狗再一次认识到自己的不足，虽然老狗早已确定中国股市是“政策市”，但因为对某些党派的偏见，选择不相信他们会有什么好手段，所以一直不再愿意触碰大A，但随着这几天的暴涨，不得不承认，老狗酸了，虽然为时已晚。

PS：怎样才能做到反向操作呢？怎么才能知道自己的真实想法呢？

组件代码

不啰嗦，直接看代码，代码下面会有详细说明。

html
<template>
  <div>
    <v-switch
      color="warning"
      v-model="themeValue"
      @update:modelValue="toggleTheme()"
      hide-details
      inset
    >
      <template v-slot:label>
        <v-icon
          :icon="themeValue ? 'mdi-emoticon-cool-outline' : 'mdi-weather-night'"
          :color="themeValue ? 'warning' : 'white'"
        ></v-icon>
      </template>
    </v-switch>
  </div>
</template>

<script setup lang="ts">
// 切换主题开关组件，只负责切换逻辑，不关心主题初始化逻辑
import { useTheme } from "vuetify";

const theme = useTheme(); // vuetify 的 theme 属性
const themeValue = ref(theme.global.name.value == "light"); // 根据theme控制switch开关的变量

const toggleTheme = () => {
  const to = themeValue.value ? "light" : "dark";
  theme.global.name.value = to;
  localStorage.setItem("theme", to);
};
</script>

<style scoped></style>