chore: various fixes and updates

components/News.server.vue → components/News.vue

@@ -4,11 +4,12 @@ import type { News } from "../types/news";
 
 const resource: string = "/api/news";
 
-const { pending, data: raw, error } = await useFetch<Array<News>>(resource);
+const { status, data: raw, error } = await useFetch<Array<News>>(resource);
 
 if (error.value) console.error("ERROR from useFetch: ", error.value);
 
 const data = raw?.value?.slice(0, 7) ?? [];
+const isPending = status.value === "pending";
 </script>
 
 <template>
@@ -19,9 +20,9 @@ const data = raw?.value?.slice(0, 7) ?? [];
         <li
           v-for="(item, index) in data"
           :key="index"
-          :class="pending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+          :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
         >
-          <div v-if="pending" :class="loadingClass()"></div>
+          <div v-if="isPending" :class="loadingClass()"></div>
           <a
             v-else
             :href="item.url"

components/Status.server.vue → components/Status.vue

@@ -7,9 +7,10 @@ const resource: string = "/api/status";
 const lineClass = (line: string): string =>
   `badge badge-lg bg-line-${line} rounded-none border-0 w-10`;
 
-const { pending, data, error } = await useFetch<Array<LineStatus>>(resource);
+const { status, data, error } = await useFetch<Array<LineStatus>>(resource);
 
 const inactive: Array<string> = ["tratta sospesa", "rallentata"];
+const isPending = status.value === "pending";
 
 const notActive = (status: string): string =>
   inactive.includes(status.toLocaleLowerCase()) ? "font-bold" : "font-normal";
@@ -25,14 +26,14 @@ if (error.value) console.error("ERROR from useFetch: ", error.value);
         <li
           v-for="(item, index) in data"
           :key="index"
-          :class="pending ? 'my-2 animate-pulse' : 'my-2'"
+          :class="isPending ? 'my-2 animate-pulse' : 'my-2'"
         >
-          <div :class="pending ? loadingClass() : lineClass(item.line)">
-            <span v-if="!pending" class="text-base-100">{{ item.line }}</span>
+          <div :class="isPending ? loadingClass() : lineClass(item.line)">
+            <span v-if="!isPending" class="text-base-100">{{ item.line }}</span>
           </div>
           {{ " " }}
-          <!-- <span v-if="!pending">{{ item.text }} |{{ " " }} {{ item.status }}{{ " " }}</span> -->
-          <span v-if="!pending" :class="notActive(item.status)"
+          <!-- <span v-if="!isPending">{{ item.text }} |{{ " " }} {{ item.status }}{{ " " }}</span> -->
+          <span v-if="!isPending" :class="notActive(item.status)"
             >{{ " " }} {{ item.status }}</span
           >
         </li>

components/Traffic.server.vue → components/Traffic.vue

@@ -4,7 +4,8 @@ import type { News } from "../types/news";
 
 const resource: string = "/api/traffic";
 
-const { pending, data, error } = await useFetch<Array<News>>(resource);
+const { status, data, error } = await useFetch<Array<News>>(resource);
+const isPending = status.value === "pending";
 
 if (error.value) console.log("ERROR from useFetch: ", error.value);
 </script>
@@ -17,9 +18,9 @@ if (error.value) console.log("ERROR from useFetch: ", error.value);
         <li
           v-for="(item, index) in data"
           :key="index"
-          :class="pending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+          :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
         >
-          <div v-if="pending" :class="loadingClass()"></div>
+          <div v-if="isPending" :class="loadingClass()"></div>
           <a
             v-else
             :href="item.url"

components/__tests__/Card.test.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { expect, test } from "vitest";
 
-import Card from "../Card.server.vue";
+import Card from "../Card.vue";
 
 test("<Card />", () => {
   const title = "Test title";

components/__tests__/Footer.test.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { expect, test } from "vitest";
 
-import Footer from "../Footer.server.vue";
+import Footer from "../Footer.vue";
 
 test("<Footer />", () => {
   const wrapper = mount(Footer);

components/__tests__/Header.test.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { expect, test } from "vitest";
 
-import Header from "../Header.server.vue";
+import Header from "../Header.vue";
 
 test("<Header />", () => {
   const wrapper = mount(Header);

nuxt.config.ts

@@ -1,7 +1,10 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: ["@nuxtjs/tailwindcss", "nuxt-icon"],
+
   experimental: {
     componentIslands: true,
   },
-});
+
+  compatibilityDate: "2024-10-26",
+});