chore: add prettier and format

app/app.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="wrapper">
-        <Screen>
-            <Background />
-            <Stats />
-        </Screen>
-    </div>
+  <div class="wrapper">
+    <Screen>
+      <Background />
+      <Stats />
+    </Screen>
+  </div>
 </template>
 
 <style>
 .wrapper {
-    width: fit-content;
-    height: fit-content;
-    border: 1px solid red;
+  width: fit-content;
+  height: fit-content;
+  border: 1px solid red;
 }
 </style>

app/components/Background.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 useRender((ctx) => {
-    ctx.fillStyle = "green";
-    ctx.fillRect(0, 0, 100, 100);
+  ctx.fillStyle = "green";
+  ctx.fillRect(0, 0, 100, 100);
 });
 </script>

app/components/Screen.vue

@@ -10,61 +10,61 @@ let lastFrameTime = 0;
 let lastRealFrameTime = 0;
 
 const registerUpdateCallback = (callback: UpdateCallback) => {
-    updateCallbacks.add(callback);
-    return () => updateCallbacks.delete(callback);
+  updateCallbacks.add(callback);
+  return () => updateCallbacks.delete(callback);
 };
 
 const registerRenderCallback = (callback: RenderCallback) => {
-    renderCallbacks.add(callback);
-    return () => renderCallbacks.delete(callback);
+  renderCallbacks.add(callback);
+  return () => renderCallbacks.delete(callback);
 };
 
 const renderFrame = (timestamp: number) => {
-    if (!ctx) return;
+  if (!ctx) return;
 
-    const deltaTime = timestamp - lastFrameTime;
-    lastFrameTime = timestamp;
+  const deltaTime = timestamp - lastFrameTime;
+  lastFrameTime = timestamp;
 
-    const start = Date.now();
+  const start = Date.now();
 
-    // update
-    for (const callback of updateCallbacks) {
-        callback(deltaTime, lastRealFrameTime);
-    }
+  // update
+  for (const callback of updateCallbacks) {
+    callback(deltaTime, lastRealFrameTime);
+  }
 
-    // render
-    ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+  // render
+  ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
-    for (const callback of renderCallbacks) {
-        callback(ctx);
-    }
+  for (const callback of renderCallbacks) {
+    callback(ctx);
+  }
 
-    lastRealFrameTime = Date.now() - start;
+  lastRealFrameTime = Date.now() - start;
 
-    animationFrameId = requestAnimationFrame(renderFrame);
+  animationFrameId = requestAnimationFrame(renderFrame);
 };
 
 onMounted(() => {
-    if (!canvas.value) throw new Error("Missing canvas");
+  if (!canvas.value) throw new Error("Missing canvas");
 
-    ctx = canvas.value.getContext("2d");
-    if (!ctx) throw new Error("Missing 2d context");
+  ctx = canvas.value.getContext("2d");
+  if (!ctx) throw new Error("Missing 2d context");
 
-    provide("registerUpdateCallback", registerUpdateCallback);
-    provide("registerRenderCallback", registerRenderCallback);
+  provide("registerUpdateCallback", registerUpdateCallback);
+  provide("registerRenderCallback", registerRenderCallback);
 
-    animationFrameId = requestAnimationFrame(renderFrame);
+  animationFrameId = requestAnimationFrame(renderFrame);
 });
 
 onUnmounted(() => {
-    if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-    }
+  if (animationFrameId !== null) {
+    cancelAnimationFrame(animationFrameId);
+  }
 });
 </script>
 
 <template>
-    <canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" />
+  <canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" />
 
-    <slot v-if="canvas" />
+  <slot v-if="canvas" />
 </template>

app/components/Stats.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 const props = defineProps({
-    x: {
-        type: Number,
-        default: 0,
-    },
-    y: {
-        type: Number,
-        default: 0,
-    },
+  x: {
+    type: Number,
+    default: 0,
+  },
+  y: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const SAMPLES = 60;
@@ -15,54 +15,53 @@ let average = { deltaTime: 0, realDeltaTime: 0 };
 const lastFrames: (typeof average)[] = [];
 
 useUpdate((deltaTime, realDeltaTime) => {
-    lastFrames.push({ deltaTime, realDeltaTime });
+  lastFrames.push({ deltaTime, realDeltaTime });
 
-    if (lastFrames.length > SAMPLES) {
-        lastFrames.shift();
-    }
+  if (lastFrames.length > SAMPLES) {
+    lastFrames.shift();
+  }
 
-    if (lastFrames.length > 0) {
-        average = {
-            deltaTime:
-                lastFrames.reduce((acc, v) => acc + v.deltaTime, 0) /
-                lastFrames.length,
-            realDeltaTime:
-                lastFrames.reduce((acc, v) => acc + v.realDeltaTime, 0) /
-                lastFrames.length,
-        };
-    }
+  if (lastFrames.length > 0) {
+    average = {
+      deltaTime:
+        lastFrames.reduce((acc, v) => acc + v.deltaTime, 0) / lastFrames.length,
+      realDeltaTime:
+        lastFrames.reduce((acc, v) => acc + v.realDeltaTime, 0) /
+        lastFrames.length,
+    };
+  }
 });
 
 useRender((ctx) => {
-    const LINE_COUNT = 5;
-    const LINE_HEIGHT = 12;
+  const LINE_COUNT = 5;
+  const LINE_HEIGHT = 12;
 
-    ctx.fillStyle = "red";
-    ctx.fillRect(props.x - 2, props.y, 140, LINE_COUNT * LINE_HEIGHT + 3);
+  ctx.fillStyle = "red";
+  ctx.fillRect(props.x - 2, props.y, 140, LINE_COUNT * LINE_HEIGHT + 3);
 
-    let textY = props.y;
+  let textY = props.y;
 
-    ctx.fillStyle = "black";
-    ctx.fillText("[avg on 60 frames]", props.x, (textY += LINE_HEIGHT));
-    ctx.fillText(
-        `fps=${(1000 / average.deltaTime).toFixed()}`,
-        props.x,
-        (textY += LINE_HEIGHT),
-    );
-    ctx.fillText(
-        `frame_time=${average.deltaTime.toFixed(2)}ms`,
-        props.x,
-        (textY += LINE_HEIGHT),
-    );
-    ctx.fillText(
-        `real_fps=${(1000 / average.realDeltaTime).toFixed()}`,
-        props.x,
-        (textY += LINE_HEIGHT),
-    );
-    ctx.fillText(
-        `real_frame_time=${average.realDeltaTime.toFixed(2)}ms`,
-        props.x,
-        (textY += LINE_HEIGHT),
-    );
+  ctx.fillStyle = "black";
+  ctx.fillText("[avg on 60 frames]", props.x, (textY += LINE_HEIGHT));
+  ctx.fillText(
+    `fps=${(1000 / average.deltaTime).toFixed()}`,
+    props.x,
+    (textY += LINE_HEIGHT),
+  );
+  ctx.fillText(
+    `frame_time=${average.deltaTime.toFixed(2)}ms`,
+    props.x,
+    (textY += LINE_HEIGHT),
+  );
+  ctx.fillText(
+    `real_fps=${(1000 / average.realDeltaTime).toFixed()}`,
+    props.x,
+    (textY += LINE_HEIGHT),
+  );
+  ctx.fillText(
+    `real_frame_time=${average.realDeltaTime.toFixed(2)}ms`,
+    props.x,
+    (textY += LINE_HEIGHT),
+  );
 });
 </script>

nuxt.config.ts

@@ -1,5 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
-  devtools: { enabled: true }
-})
+  compatibilityDate: "2025-07-15",
+  devtools: { enabled: true },
+});

package.json

@@ -7,11 +7,15 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "format": "prettier --write --cache ."
   },
   "dependencies": {
     "nuxt": "^4.2.1",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2"
   }
 }

pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 onlyBuiltDependencies:
-  - '@parcel/watcher'
+  - "@parcel/watcher"
   - esbuild