🐛 fix undefined value

.env.example

@@ -11,5 +11,5 @@ NUXT_GRAVATAR_URL = "https://gravatar.com"
 
 NUXT_AVATAR_CACHE_TIME = 3600000
 
-NUXT_PUBLIC_LINKS = {"blog":"https://blog.example.com","forum":"https://forum.example.com"}
-NUXT_PUBLIC_SOCIALS = {"github":{"link":"https://github.com/","icon":"fa-brands fa-github"},"bilibili":{"link":"https://www.bilibili.com/","icon":"fa-brands fa-bilibili"},"email":{"link":"mailto:[email protected]","icon":"fa-solid fa-envelope"}}
+NUXT_LINKS = {"blog":"https://blog.example.com","forum":"https://forum.example.com"}
+NUXT_SOCIALS = {"github":{"link":"https://github.com/","icon":"fa-brands fa-github"},"bilibili":{"link":"https://www.bilibili.com/","icon":"fa-brands fa-bilibili"},"email":{"link":"mailto:[email protected]","icon":"fa-solid fa-envelope"}}

app.vue

@@ -10,7 +10,9 @@
 
             <hr class="w-1/2 border-gray-600 m-5" />
 
-            <span class="text-lg text-zinc-400 font-thin text-center break-after-auto max-w-[95dvw]">{{ hitokoto }}</span>
+            <span class="text-lg text-zinc-400 font-thin text-center break-after-auto max-w-[95dvw]">{{
+                hitokoto
+            }}</span>
 
             <hr class="w-1/2 border-gray-600 m-6" />
 
@@ -56,15 +58,18 @@ useHead({
     ],
 });
 
-const ownerName = ref(config.ownerName);
-const description = ref(config.description);
+const ownerName = useState(() => config.ownerName);
+const description = useState(() => config.description);
 
-const hitokotoData: Record<string, string | number> = await $fetch(config.hitokotoUrl);
-const hitokoto = hitokotoData.hitokoto;
+const hitokoto: Ref<string> = useState();
 
-const footer = ref(config.footer);
+if (process.server) {
+    const hitokotoData: Record<string, any> = await $fetch(config.hitokotoUrl);
+    hitokoto.value = hitokotoData.hitokoto;
+}
 
-const links = ref(config.public.links as Record<string, string>);
-const socials = ref(config.public.socials as Record<string, { link: string; icon: string }>);
-</script>
+const footer = useState(() => config.footer);
 
+const links = useState(() => config.links as Record<string, string>);
+const socials = useState(() => config.socials as Record<string, { link: string; icon: string }>);
+</script>

nuxt.config.ts

@@ -8,14 +8,11 @@ export default defineNuxtConfig({
         ownerEmail: "[email protected]",
         ownerName: "Example",
         description: "Welcome to Example's main page",
-        footer: 'an example footer',
+        footer: "an example footer",
         hitokotoUrl: "https://v1.hitokoto.cn",
         gravatarUrl: "https://gravatar.com",
         avatarCacheTime: 60 * 60 * 1000, // 1 hour
-        public: {
-            links: {},
-            socials: {},
-        },
+        links: {},
+        socials: {},
     },
 });
-