chore: upgrade deps & add clientOnly for swicth ssr hydration

Author: YunYouJun

components/Examples.vue

@@ -1,5 +1,22 @@
+<script setup lang="ts">
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+
+const timeValue = ref("");
+const hello = () => ElMessage.info("hello world");
+const helloSuccess = () => ElMessage.success("hello world");
+
+const color = useColorMode();
+const colorMode = computed({
+  get: () => color.value === 'dark',
+  set: () => (color.preference = (color.value === 'dark' ? 'light' : 'dark')),
+});
+</script>
+
+
 <template>
-  <el-switch v-model="colorMode" inline-prompt active-text="dark" inactive-text="light" size="large"></el-switch>
+  <ClientOnly>
+    <el-switch v-model="colorMode" inline-prompt active-text="dark" inactive-text="light" size="large"></el-switch>
+  </ClientOnly>
 
   <br />
 
@@ -53,17 +70,3 @@
     />
   </el-config-provider>
 </template>
-
-<script setup lang="ts">
-import zhCn from "element-plus/es/locale/lang/zh-cn";
-
-const timeValue = ref("");
-const hello = () => ElMessage.info("hello world");
-const helloSuccess = () => ElMessage.success("hello world");
-
-const color = useColorMode();
-const colorMode = computed({
-  get: () => color.value === 'dark',
-  set: () => (color.preference = color.value === 'dark' ? 'light' : 'dark'),
-});
-</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-plus-nuxt-starter",
-  "packageManager": "pnpm@8.8.0",
+  "packageManager": "pnpm@8.12.1",
   "version": "0.1.0",
   "description": "Element Plus with Nuxt 3 Minimal Starter",
   "repository": {
@@ -20,19 +20,19 @@
     "postinstall": "nuxi prepare"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
-    "element-plus": "^2.3.14"
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.4.4"
   },
   "devDependencies": {
-    "@element-plus/nuxt": "^1.0.6",
-    "@nuxtjs/color-mode": "^3.3.0",
-    "@pinia/nuxt": "^0.4.11",
-    "@unocss/nuxt": "^0.53.6",
-    "@vueuse/nuxt": "^10.4.1",
+    "@element-plus/nuxt": "^1.0.7",
+    "@nuxtjs/color-mode": "^3.3.2",
+    "@pinia/nuxt": "^0.5.1",
+    "@unocss/nuxt": "^0.58.0",
+    "@vueuse/nuxt": "^10.7.0",
     "consola": "^3.2.3",
-    "nuxt": "^3.7.4",
-    "sass": "^1.68.0",
-    "typescript": "^5.2.2"
+    "nuxt": "^3.8.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "pinia": "^2.1.6"