feat: use useImages composable instead of <img> + useTemplateRef

app/components/Common/ButtonSelector.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CORNER_IMAGE from "/assets/images/home/bottom-screen/buttons/corner.png";
+
 const props = withDefaults(
   defineProps<{
     rect: [x: number, y: number, width: number, height: number];
@@ -9,15 +11,13 @@ const props = withDefaults(
   },
 );
 
-const cornerImage = useTemplateRef("cornerImage");
+const [cornerImage] = useImages(CORNER_IMAGE);
 
 const ANIMATION_SPEED = 0.25;
 
 let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
 useRender((ctx) => {
-  if (!cornerImage.value) return;
-
   const [targetX, targetY, targetWidth, targetHeight] = props.rect;
   const dx = targetX - currentX;
   const dy = targetY - currentY;
@@ -45,29 +45,25 @@ useRender((ctx) => {
 
   ctx.globalAlpha = props.opacity;
 
-  ctx.drawImage(cornerImage.value, x, y);
+  ctx.drawImage(cornerImage!, x, y);
 
   ctx.save();
   ctx.scale(-1, 1);
-  ctx.drawImage(cornerImage.value, -(x + w), y);
+  ctx.drawImage(cornerImage!, -(x + w), y);
   ctx.restore();
 
   ctx.save();
   ctx.scale(1, -1);
-  ctx.drawImage(cornerImage.value, x, -(y + h));
+  ctx.drawImage(cornerImage!, x, -(y + h));
   ctx.restore();
 
   ctx.save();
   ctx.scale(-1, -1);
-  ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
+  ctx.drawImage(cornerImage!, -(x + w), -(y + h));
   ctx.restore();
 });
-</script>
 
-<template>
+defineOptions({
-  <img
+  render: () => null,
-    ref="cornerImage"
+});
-    src="/assets/images/home/bottom-screen/buttons/corner.png"
+</script>
-    hidden
-  />
-</template>

app/components/Contact/BottomScreen/Background.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
+import HOME_BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.png";
+import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/bottom-screen/background.png";
+
 const store = useContactStore();
 
-const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
+const [homeBackgroundImage, contactBackgroundImage] = useImages(
-const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
+  HOME_BACKGROUND_IMAGE,
+  CONTACT_BACKGROUND_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
+  ctx.drawImage(homeBackgroundImage!, 0, 0);
-
-  ctx.drawImage(homeBackgroundImage.value, 0, 0);
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage2Opacity
     : store.outro.stage3Opacity;
 
-  ctx.drawImage(contactBackgroundImage.value, 0, 0);
+  ctx.drawImage(contactBackgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="homeBackgroundImage"
-    src="/assets/images/home/bottom-screen/background.png"
-    hidden
-  />
-  <img
-    ref="contactBackgroundImage"
-    src="/assets/images/contact/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Contact/BottomScreen/Bars.vue

@@ -1,50 +1,39 @@
 <script setup lang="ts">
+import TOP_BAR_IMAGE from "/assets/images/contact/bottom-screen/top-bar.png";
+import BOTTOM_BAR_IMAGE from "/assets/images/contact/bottom-screen/bottom-bar.png";
+import BOTTOM_BAR_OK_IMAGE from "/assets/images/contact/bottom-screen/ok-button.png";
+
 const props = defineProps<{
   okLabel: "Copy" | "Open";
 }>();
 
 const store = useContactStore();
 
-const topBarImage = useTemplateRef("topBarImage");
+const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
-const bottomBarImage = useTemplateRef("bottomBarImage");
+  TOP_BAR_IMAGE,
-const bottomBarOkImage = useTemplateRef("bottomBarOkImage");
+  BOTTOM_BAR_IMAGE,
+  BOTTOM_BAR_OK_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
-    return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage2Opacity;
 
   // top bar
-  ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
+  ctx.drawImage(topBarImage!, 0, store.isIntro ? store.intro.topBarY : 0);
 
   // bottom bar
   ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
-  ctx.drawImage(bottomBarImage.value, 0, 0);
+  ctx.drawImage(bottomBarImage!, 0, 0);
 
-  ctx.drawImage(bottomBarOkImage.value, 144, 4);
+  ctx.drawImage(bottomBarOkImage!, 144, 4);
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#000000";
   ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
 });
-</script>
 
-<template>
+defineOptions({
-  <img
+  render: () => null,
-    ref="topBarImage"
+});
-    src="/assets/images/contact/bottom-screen/top-bar.png"
+</script>
-    hidden
-  />
-  <img
-    ref="bottomBarImage"
-    src="/assets/images/contact/bottom-screen/bottom-bar.png"
-    hidden
-  />
-  <img
-    ref="bottomBarOkImage"
-    src="/assets/images/contact/bottom-screen/ok-button.png"
-    hidden
-  />
-</template>

app/components/Contact/BottomScreen/Buttons.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
+import BUTTONS_IMAGE from "/assets/images/contact/bottom-screen/buttons.png";
+
 const store = useContactStore();
 
-const buttonsImage = useTemplateRef("buttonsImage");
+const [buttonsImage] = useImages(BUTTONS_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonsImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
-  ctx.drawImage(buttonsImage.value, 31, 32);
+  ctx.drawImage(buttonsImage!, 31, 32);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonsImage"
-    src="/assets/images/contact/bottom-screen/buttons.png"
-    hidden
-  />
-</template>

app/components/Contact/TopScreen/Background.vue

@@ -1,30 +1,24 @@
 <script setup lang="ts">
+import HOME_BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
+import CONTACT_BACKGROUND_IMAGE from "/assets/images/contact/top-screen/background.png";
+
 const store = useContactStore();
 
-const homeBackgroundImage = useTemplateRef("homeBackgroundImage");
+const [homeBackgroundImage, contactBackgroundImage] = useImages(
-const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
+  HOME_BACKGROUND_IMAGE,
+  CONTACT_BACKGROUND_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
+  ctx.drawImage(homeBackgroundImage!, 0, 0);
-
-  ctx.drawImage(homeBackgroundImage.value, 0, 0);
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage2Opacity
     : store.outro.stage3Opacity;
 
-  ctx.drawImage(contactBackgroundImage.value, 0, 0);
+  ctx.drawImage(contactBackgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="homeBackgroundImage"
-    src="/assets/images/home/top-screen/background.png"
-    hidden
-  />
-  <img
-    ref="contactBackgroundImage"
-    src="/assets/images/contact/top-screen/background.png"
-    hidden
-  />
-</template>

app/components/Contact/TopScreen/LeftBar.vue

@@ -1,33 +1,27 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/contact/top-screen/left-bar.png";
+import THINGS_IMAGE from "/assets/images/contact/top-screen/left-bar-things.png";
+
 const store = useContactStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
+const [backgroundImage, thingsImage] = useImages(
-const thingsImage = useTemplateRef("thingsImage");
+  BACKGROUND_IMAGE,
+  THINGS_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!backgroundImage.value || !thingsImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage3Opacity
     : store.outro.stage1Opacity;
-  ctx.drawImage(thingsImage.value, 0, 0);
+  ctx.drawImage(thingsImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/contact/top-screen/left-bar.png"
-    hidden
-  />
-  <img
-    ref="thingsImage"
-    src="/assets/images/contact/top-screen/left-bar-things.png"
-    hidden
-  />
-</template>

app/components/Contact/TopScreen/Notifications.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import NOTIFICATION_IMAGE from "/assets/images/contact/bottom-screen/notification.png";
+import TITLE_IMAGE from "/assets/images/contact/top-screen/title.png";
+
 // text color:
 const store = useContactStore();
 
-const notificationImage = useTemplateRef("notificationImage");
+const [notificationImage, titleImage] = useImages(
-const titleImage = useTemplateRef("titleImage");
+  NOTIFICATION_IMAGE,
+  TITLE_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!notificationImage.value || !titleImage.value) return;
-
   ctx.globalAlpha = store.outro.stage2Opacity;
   ctx.font = "10px NDS10";
 
@@ -17,7 +20,7 @@ useRender((ctx) => {
     const y = 169 - 24 * index + store.notificationsYOffset;
     if (y < -24) break;
 
-    ctx.drawImage(notificationImage.value, 21, y);
+    ctx.drawImage(notificationImage!, 21, y);
 
     const content = store.notifications[i]!;
     ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
@@ -29,7 +32,7 @@ useRender((ctx) => {
     ? store.intro.stage1Opacity
     : store.outro.stage2Opacity;
   ctx.drawImage(
-    titleImage.value,
+    titleImage!,
     21,
     store.isIntro
       ? store.intro.titleY
@@ -70,17 +73,8 @@ useRender((ctx) => {
     }
   }
 });
-</script>
 
-<template>
+defineOptions({
-  <img
+  render: () => null,
-    ref="notificationImage"
+});
-    src="/assets/images/contact/bottom-screen/notification.png"
+</script>
-    hidden
-  />
-  <img
-    ref="titleImage"
-    src="/assets/images/contact/top-screen/title.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Background.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.png";
+
 const store = useHomeStore();
 const app = useAppStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
-
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/home/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/ContactButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/contact.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/contact.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/downloadPlay.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/downloadPlay.png"
-    hidden
-  />
-</template>

app/components/Home/BottomScreen/Buttons/GameButton.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/game.png";
+
 const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
 }>();
 
-const buttonImage = useTemplateRef("buttonImage");
+const [buttonImage] = useImages(BUTTON_IMAGE);
 
 useRender((ctx) => {
-  if (!buttonImage.value) return;
-
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(buttonImage.value, props.x, props.y);
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="buttonImage"
-    src="/assets/images/home/bottom-screen/buttons/game.png"
-    hidden
-  />
-</template>

app/components/Home/TopScreen/Background.vue

@@ -1,21 +1,17 @@
 <script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/home/top-screen/background.png";
+
 const store = useHomeStore();
 const app = useAppStore();
 
-const backgroundImage = useTemplateRef("backgroundImage");
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
-
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
-  ctx.drawImage(backgroundImage.value, 0, 0);
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/home/top-screen/background.png"
-    hidden
-  />
-</template>

app/components/Home/TopScreen/Calendar.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import CALENDAR_IMAGE from "/assets/images/home/top-screen/calendar/calendar.png";
+import LAST_ROW_IMAGE from "/assets/images/home/top-screen/calendar/last-row.png";
+import DAY_SELECTOR_IMAGE from "/assets/images/home/top-screen/calendar/day-selector.png";
+
 // NOTE: calendar background is handled by TopScreenBackground
 const store = useHomeStore();
 
-const lastRowImage = useTemplateRef("lastRowImage");
+const [calendarImage, lastRowImage, daySelectorImage] = useImages(
-const daySelectorImage = useTemplateRef("daySelectorImage");
+  CALENDAR_IMAGE,
-const calendarImage = useTemplateRef("calendarImage");
+  LAST_ROW_IMAGE,
+  DAY_SELECTOR_IMAGE,
+);
 
 useRender((ctx) => {
-  if (!calendarImage.value || !lastRowImage.value || !daySelectorImage.value)
-    return;
-
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
@@ -32,11 +35,11 @@ useRender((ctx) => {
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(calendarImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
+  ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33);
 
   const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
   if (extraRow) {
-    ctx.drawImage(lastRowImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
+    ctx.drawImage(lastRowImage!, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
   }
 
   ctx.globalAlpha = store.isIntro
@@ -57,7 +60,7 @@ useRender((ctx) => {
         const cellTop = CALENDAR_TOP + col * 16;
 
         if (now.getDate() === day) {
-          ctx.drawImage(daySelectorImage.value, cellLeft, cellTop);
+          ctx.drawImage(daySelectorImage!, cellLeft, cellTop);
         }
 
         ctx.fillText(
@@ -82,22 +85,8 @@ useRender((ctx) => {
     CALENDAR_TOP - 20,
   );
 });
-</script>
 
-<template>
+defineOptions({
-  <img
+  render: () => null,
-    ref="calendarImage"
+});
-    src="/assets/images/home/top-screen/calendar/calendar.png"
+</script>
-    hidden
-  />
-  <img
-    ref="lastRowImage"
-    src="/assets/images/home/top-screen/calendar/last-row.png"
-    hidden
-  />
-  <img
-    ref="daySelectorImage"
-    src="/assets/images/home/top-screen/calendar/day-selector.png"
-    hidden
-  />
-</template>

app/components/Home/TopScreen/Clock.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import CLOCK_IMAGE from "/assets/images/home/top-screen/clock.png";
+
 const CENTER_X = 63;
 const CENTER_Y = 95;
 
 const store = useHomeStore();
 
-const clockImage = useTemplateRef("clockImage");
+const [clockImage] = useImages(CLOCK_IMAGE);
 
 function drawLine(
   ctx: CanvasRenderingContext2D,
@@ -52,14 +54,12 @@ function drawLine(
 }
 
 useRender((ctx) => {
-  if (!clockImage.value) return;
-
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
     : store.isOutro
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(clockImage.value, 13, 45);
+  ctx.drawImage(clockImage!, 13, 45);
 
   ctx.globalAlpha = store.isIntro
     ? store.intro.stage1Opacity
@@ -93,8 +93,8 @@ useRender((ctx) => {
   ctx.fillStyle = "#494949";
   ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
 });
-</script>
 
-<template>
+defineOptions({
-  <img ref="clockImage" src="/assets/images/home/top-screen/clock.png" hidden />
+  render: () => null,
-</template>
+});
+</script>

app/components/Home/TopScreen/StatusBar.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
+import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.png";
+import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.png";
+import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.png";
+import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.png";
+
 const store = useHomeStore();
 
-const statusBarImage = useTemplateRef("statusBarImage");
+const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
-const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
+  useImages(
-const startupModeImage = useTemplateRef("startupModeImage");
+    STATUS_BAR_IMAGE,
-const batteryImage = useTemplateRef("batteryImage");
+    GBA_DISPLAY_IMAGE,
+    STARTUP_MODE_IMAGE,
+    BATTERY_IMAGE,
+  );
 
 useRender((ctx) => {
-  if (
-    !statusBarImage.value ||
-    !gbaDisplayImage.value ||
-    !startupModeImage.value ||
-    !batteryImage.value
-  )
-    return;
-
   const TEXT_Y = 11;
 
   ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
 
   ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
-  ctx.drawImage(statusBarImage.value, 0, 0);
+  ctx.drawImage(statusBarImage!, 0, 0);
 
   ctx.fillStyle = "#ffffff";
   ctx.font = "7px NDS7";
@@ -50,31 +50,12 @@ useRender((ctx) => {
   fillNumberCell(now.getMonth() + 1, 12, -1);
 
   // icons
-  ctx.drawImage(gbaDisplayImage.value, 210, 2);
+  ctx.drawImage(gbaDisplayImage!, 210, 2);
-  ctx.drawImage(startupModeImage.value, 226, 2);
+  ctx.drawImage(startupModeImage!, 226, 2);
-  ctx.drawImage(batteryImage.value, 242, 4);
+  ctx.drawImage(batteryImage!, 242, 4);
+});
+
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="statusBarImage"
-    src="/assets/images/home/top-screen/status-bar/status-bar.png"
-    hidden
-  />
-  <img
-    ref="gbaDisplayImage"
-    src="/assets/images/home/top-screen/status-bar/gba-display.png"
-    hidden
-  />
-  <img
-    ref="startupModeImage"
-    src="/assets/images/home/top-screen/status-bar/startup-mode.png"
-    hidden
-  />
-  <img
-    ref="batteryImage"
-    src="/assets/images/home/top-screen/status-bar/battery.png"
-    hidden
-  />
-</template>

app/components/Projects/BottomScreen/Background.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-const backgroundImage = useTemplateRef("backgroundImage");
+import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.png";
+
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
-  if (!backgroundImage.value) return;
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
 
-  ctx.drawImage(backgroundImage.value, 0, 0);
+defineOptions({
+  render: () => null,
 });
 </script>
-
-<template>
-  <img
-    ref="backgroundImage"
-    src="/assets/images/projects/bottom-screen/background.png"
-    hidden
-  />
-</template>

app/components/Projects/BottomScreen/Projects.vue

@@ -65,4 +65,8 @@ const handleKeyDown = (e: KeyboardEvent) => {
 
 onMounted(() => window.addEventListener("keydown", handleKeyDown));
 onUnmounted(() => window.removeEventListener("keydown", handleKeyDown));
+
+defineOptions({
+  render: () => null,
+});
 </script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,3 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
-
+defineOptions({
-<template></template>
+  render: () => null,
+});
+</script>