feat(nuxt): nuxt3 -> nuxt4

2026-02-21 16:22:51 +01:00
parent 6a74e8c6ea
commit c4c165edab
22 changed files with 6600 additions and 9049 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+.test
+.nuxt
+.output
+.data
+dist
+node_modules
+*.JPG
+*.png
+*.webp
+*.gltf
+*.blend
+*.blend1
--- a/5
+++ b/5
@@ -9,14 +9,15 @@ COPY . /app
 WORKDIR /app

 FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile --ignore-scripts

 FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 RUN pnpm run build

-FROM base 
+FROM base

+COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/.output /app/.output

 EXPOSE 3000
--- a/app/app.vue
+++ b/app/app.vue
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -0,0 +1,28 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --ui-color-primary-50: oklch(98.2% 0.018 155.826);
+  --ui-color-primary-100: oklch(96.2% 0.044 156.743);
+  --ui-color-primary-200: oklch(92.5% 0.084 155.995);
+  --ui-color-primary-300: oklch(87.1% 0.15 154.449);
+  --ui-color-primary-400: oklch(79.5% 0.22 151.711);
+  --ui-color-primary-500: oklch(72.5% 0.232 149.579);
+  --ui-color-primary-600: oklch(62.9% 0.204 149.214);
+  --ui-color-primary-700: oklch(52.8% 0.162 150.069);
+  --ui-color-primary-800: oklch(44.9% 0.125 151.328);
+  --ui-color-primary-900: oklch(39.4% 0.1 152.535);
+  --ui-color-primary-950: oklch(26.7% 0.068 152.934);
+
+  --ui-color-neutral-50: oklch(98.5% 0 0);
+  --ui-color-neutral-100: oklch(96.7% 0.001 286.375);
+  --ui-color-neutral-200: oklch(92% 0.004 286.32);
+  --ui-color-neutral-300: oklch(87.1% 0.006 286.286);
+  --ui-color-neutral-400: oklch(70.5% 0.015 286.067);
+  --ui-color-neutral-500: oklch(55.2% 0.016 285.938);
+  --ui-color-neutral-600: oklch(44.2% 0.017 285.786);
+  --ui-color-neutral-700: oklch(37% 0.013 285.805);
+  --ui-color-neutral-800: oklch(27.4% 0.006 286.033);
+  --ui-color-neutral-900: oklch(21% 0.006 285.885);
+  --ui-color-neutral-950: oklch(14.1% 0.005 285.823);
+}
--- a/app/components/body/ApiModal.vue
+++ b/app/components/body/ApiModal.vue
@@ -1,39 +1,13 @@
 <script setup lang="ts">
 const app = useAppStore();

-const closeModal = () => {
-  app.apiModalOpened = false;
-};
-
 const baseApiUrl = useBaseApiUrl();
 const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
 </script>

 <template>
-  <UModal v-model="app.apiModalOpened">
-    <UCard
-      :ui="{
-        ring: '',
-        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-      }"
-    >
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3
-            class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            API Documentation
-          </h3>
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-heroicons-x-mark-20-solid"
-            class="-my-1"
-            @click="closeModal"
-          />
-        </div>
-      </template>
-
+  <UModal v-model:open="app.apiModalOpened" title="API Documentation">
+    <template #body>
      <div class="flex flex-col space-y-8">
        <p>
          You can easily generate QRCodes by using the API, with no rate
@@ -47,23 +21,24 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
        <div class="space-y-3">
          <h2 class="font-bold text-lg">Base API URL</h2>

-          <UButtonGroup size="sm" orientation="horizontal" class="w-full">
+          <UButtonGroup size="md" class="w-full">
            <UInput
              :model-value="baseApiUrl"
-              size="sm"
+              size="md"
              class="w-full"
              disabled
-              :ui="{ base: '!ps-12 !cursor-text font-mono' }"
+              :ui="{ base: '!ps-12.5 !cursor-text font-mono' }"
            >
              <template #leading>
                <span
-                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm"
-                  >GET</span
+                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-xs font-mono"
+                  ><span class="translate-y-px inline-block">GET</span></span
                >
              </template>
            </UInput>
            <UButton
-              color="gray"
+              color="neutral"
+              variant="subtle"
              :icon="baseApiUrlIcon"
              @click="copyBaseApiUrl"
            />
@@ -75,21 +50,21 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
          <div
            class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
          >
-            <div class="pt-1 flex justify-between gap-x-5">
+            <div class="pt-1 pb-4 flex justify-between gap-x-5">
              <span class="text-primary font-semibold">format</span>
              <span class="text-slate-700 dark:text-slate-200 text-right">{{
                arrayToUnion(IMAGE_FORMATS)
              }}</span>
            </div>

-            <div class="pt-4 flex justify-between gap-x-5">
+            <div class="flex pb-4 justify-between gap-x-5">
              <span class="text-primary font-semibold">logo</span>
              <span class="text-slate-700 dark:text-slate-200 text-right">{{
                arrayToUnion(LOGOS)
              }}</span>
            </div>

-            <div class="pt-4 flex justify-between gap-x-5">
+            <div class="flex justify-between gap-x-5">
              <span class="text-primary font-semibold">content</span>
              <span class="text-slate-700 dark:text-slate-200 text-right"
                >string</span
@@ -98,6 +73,6 @@ const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
          </div>
        </div>
      </div>
-    </UCard>
+    </template>
  </UModal>
 </template>
--- a/app/components/body/AppBody.vue
+++ b/app/components/body/AppBody.vue
--- a/app/components/body/QRCodeForm.vue
+++ b/app/components/body/QRCodeForm.vue
@@ -1,37 +1,50 @@
 <script setup lang="ts">
+import { z } from "zod";
+
 const app = useAppStore();
 const baseApiUrl = useBaseApiUrl();

+const formSchema = z
+  .object({
+    content: z.string().min(1, "Required"),
+    hasLogo: z.boolean(),
+    logo: z.string().optional(),
+    format: z.enum(IMAGE_FORMATS),
+  })
+  .superRefine((data, ctx) => {
+    if (data.hasLogo && !data.logo) {
+      ctx.addIssue({
+        code: "custom",
+        message: "Required",
+        path: ["logo"],
+      });
+    }
+  });
+
 const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");

-const firstBlured = ref(false);
-
-const state = reactive({
+const state = reactive<{
+  hasLogo: boolean;
+  logo: string | undefined;
+  format: ImageFormat;
+  content: string | undefined;
+}>({
  hasLogo: false,
  logo: undefined,
  format: IMAGE_FORMATS[0],
  content: undefined,
 });

-const stateErrors = computed(() => ({
-  content: firstBlured.value && !state.content,
-  logo: firstBlured.value && state.hasLogo && !state.logo,
-}));
+const parsedState = computed(() => formSchema.safeParse(state));

-const isValidState = computed(
-  () =>
-    ((state.hasLogo && state.logo) || !state.hasLogo) &&
-    state.content &&
-    state.format,
-);
-
-const apiUrl = computed((previous) => {
-  if (!isValidState.value) return previous;
+const apiUrl = computed<string>((previous) => {
+  if (!parsedState.value.success) return previous ?? "";

+  const { content, format, hasLogo, logo } = parsedState.value.data;
  const params = new URLSearchParams({
-    ...(state.hasLogo && { logo: state.logo }),
-    format: state.format,
-    content: state.content,
+    ...(hasLogo && logo && { logo }),
+    format,
+    content,
  });

  return `${baseApiUrl}?${params}`;
@@ -47,12 +60,13 @@ const openApiModal = () => {
 const updateQRCode = async () => {
  await nextTick();

-  if (!isValidState.value) return;
+  if (!parsedState.value.success) return;

-  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+  const { content, hasLogo, logo, format } = parsedState.value.data;
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);

-  app.qrCode = canvas.toDataURL(`image/${state.format}`);
+  app.qrCode = canvas.toDataURL(format);
 };

 const downloadQRCode = () => {
@@ -72,10 +86,13 @@ const {
 } = useCopyable(async () => {
  if (isQRCodeEmpty.value) return;

-  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+  if (!parsedState.value.success) return;
+  const { content, hasLogo, logo } = parsedState.value.data;

-  const qrCode = canvas.toDataURL(`image/png`);
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);
+
+  const qrCode = canvas.toDataURL("png");

  const blob = await (await fetch(qrCode)).blob();
  const item = new ClipboardItem({ "image/png": blob });
@@ -85,84 +102,85 @@ const {

 <template>
  <div class="flex-1 flex flex-col justify-center">
-    <UForm ref="form" :state="state" class="space-y-4">
-      <UFormGroup
+    <UForm
+      :schema="formSchema"
+      :state="state"
+      :validate-on="['blur', 'change', 'input']"
+      class="space-y-4"
+    >
+      <UFormField
        label="Username or link"
        name="content"
-        :error="stateErrors.content"
+        :ui="{ error: 'hidden' }"
      >
        <UInput
          v-model="state.content"
+          name="content"
          icon="i-heroicons-user"
          placeholder="Your username or profile link"
+          class="w-full"
          @input="updateQRCode"
-          @blur="firstBlured = true"
        />
-      </UFormGroup>
+      </UFormField>

-      <UFormGroup name="logo" :error="stateErrors.logo">
+      <UFormField name="logo" :ui="{ error: 'hidden' }">
        <template #label>
          <UCheckbox
            v-model="state.hasLogo"
            class="mb-1.5"
            label="Logo"
            @change="updateQRCode"
-            @blur="firstBlured = true"
          />
        </template>

        <USelectMenu
          v-model="state.logo"
+          name="logo"
          icon="i-heroicons-photo"
-          :options="LOGOS"
+          :items="unreadonly(LOGOS)"
          :disabled="!state.hasLogo"
          placeholder="Select logo"
-          searchable
-          clear-search-on-close
+          class="w-full"
          @change="updateQRCode"
-          @blur="firstBlured = true"
        >
-          <template #label>
-            <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
+          <template #item-label="{ item }">
+            {{ capitalize(item) }}
          </template>

-          <template #option="props">
-            <span>{{ capitalize(props.option) }}</span>
-          </template>
+          <template v-if="state.logo">{{ capitalize(state.logo) }}</template>
        </USelectMenu>
-      </UFormGroup>
+      </UFormField>

-      <UFormGroup label="Format" name="format">
+      <UFormField label="Format" name="format">
        <USelectMenu
          v-model="state.format"
+          name="format"
          icon="i-heroicons-document-duplicate"
-          :options="IMAGE_FORMATS"
+          :items="unreadonly(IMAGE_FORMATS)"
          placeholder="Select format"
+          class="w-full"
          @change="updateQRCode"
-          @blur="firstBlured = true"
        >
-          <template #label>
-            <span v-if="state.format">{{ upperCase(state.format) }}</span>
+          <template #item-label="{ item }">
+            {{ upperCase(item) }}
          </template>

-          <template #option="props">
-            <span>{{ upperCase(props.option) }}</span>
-          </template>
+          {{ upperCase(state.format) }}
        </USelectMenu>
-      </UFormGroup>
+      </UFormField>

-      <UFormGroup label="API">
+      <UFormField label="API">
        <template #hint>
          <UButton
            size="md"
-            color="gray"
+            color="neutral"
            variant="link"
            icon="i-heroicons-question-mark-circle"
            @click="openApiModal"
          />
        </template>

-        <UButtonGroup size="sm" orientation="horizontal" class="w-full">
+        <UButtonGroup size="sm" class="w-full">
          <UInput
            v-model="apiUrl"
            disabled
@@ -170,13 +188,14 @@ const {
            class="w-full"
          />
          <UButton
-            color="gray"
+            color="neutral"
+            variant="subtle"
            :disabled="!isValidApiUrl"
            :icon="copyUrlIcon"
            @click="copyUrl"
          />
        </UButtonGroup>
-      </UFormGroup>
+      </UFormField>

      <div class="flex space-x-4 pt-2">
        <UButton
--- a/app/components/body/QRCodePreview.vue
+++ b/app/components/body/QRCodePreview.vue
@@ -6,5 +6,5 @@ const app = useAppStore();
  <img
    :src="app.qrCode"
    class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
-  />
+  >
 </template>
--- a/app/components/header/AppHeader.vue
+++ b/app/components/header/AppHeader.vue
@@ -7,10 +7,10 @@
    <ClientOnly>
      <div class="flex gap-x-1 animate-fadeIn">
        <UButton
-          color="gray"
+          color="neutral"
          variant="ghost"
          icon="i-uil-github"
-          aria-label="Github repo"
+          aria-label="Git repo"
          class="w-8 h-8"
          target="_blank"
          to="https://github.com/pihkaal/simple-qr"
--- a/app/components/header/ThemeSwitcher.vue
+++ b/app/components/header/ThemeSwitcher.vue
@@ -14,7 +14,7 @@ const isDark = computed({
 <template>
  <UButton
    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-    color="gray"
+    color="neutral"
    variant="ghost"
    aria-label="Theme"
    class="w-8 h-8"
--- a/app/composables/useBaseUrl.ts
+++ b/app/composables/useBaseUrl.ts
--- a/app/composables/useCopyable.ts
+++ b/app/composables/useCopyable.ts
@@ -1,5 +1,9 @@
 export const useCopyable = (
-  valueOrCallback: string | Ref<string> | (() => PromiseLike<string>),
+  valueOrCallback:
+    | string
+    | Ref<string>
+    | (() => PromiseLike<string>)
+    | (() => PromiseLike<void>),
 ) => {
  const icon = ref("i-heroicons-clipboard-document");
  const label = ref("Copy");
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,3 @@
-// @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";

 export default withNuxt();
-// Your custom configs here
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,8 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: "2024-04-03",
+  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
+  css: ["~/assets/css/main.css"],
  components: [
    {
      path: "~/components",
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "social-qr",
+  "name": "simple-qr",
  "description": "Simple, bullshit-free QR code generator",
  "author": "Pihkaal <hello@pihkaal.me> (https://pihkaal.me)",
  "private": true,
@@ -11,25 +11,28 @@
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint --fix --cache .",
-    "format": "pnpx prettier --cache --write ."
+    "format": "prettier --cache --write ."
  },
  "dependencies": {
-    "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/uil": "^1.2.1",
-    "@nuxt/eslint": "^0.5.7",
-    "@nuxt/ui": "^2.18.6",
-    "@pinia/nuxt": "^0.5.5",
-    "canvas": "^2.11.2",
-    "nuxt": "^3.13.0",
+    "jszip": "^3.10.1",
    "qrcode": "^1.5.4",
-    "sharp": "^0.33.5",
-    "vue": "latest",
-    "vue-router": "latest",
-    "zod": "^3.23.8"
+    "skia-canvas": "^3.0.8",
+    "zod": "^4.3.6"
  },
-  "packageManager": "pnpm@9.11.0",
+  "packageManager": "pnpm@10.28.2",
  "devDependencies": {
-    "@types/qrcode": "^1.5.5",
-    "typescript": "5.5.4"
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.92",
+    "@iconify-json/uil": "^1.2.3",
+    "@nuxt/eslint": "^1.15.1",
+    "@nuxt/ui": "^3.3.7",
+    "@pinia/nuxt": "^0.11.3",
+    "@types/qrcode": "^1.5.6",
+    "eslint": "^9.39.1",
+    "nuxt": "^4.3.1",
+    "pinia": "^3.0.4",
+    "prettier": "^3.8.1",
+    "tailwindcss": "^4.2.0",
+    "typescript": "^5.6.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - esbuild
+  - skia-canvas
+  - unrs-resolver
+  - vue-demi
--- a/server/api/index.ts
+++ b/server/api/index.ts
@@ -1,7 +1,4 @@
 import { resolve } from "path";
-import sharp from "sharp";
-import { renderQRCodeToCanvas } from "~/utils/renderer";
-import { settingsSchema } from "~/utils/settings";

 export default defineEventHandler(async (event) => {
  const query = getQuery(event);
@@ -12,7 +9,7 @@ export default defineEventHandler(async (event) => {
      status: 400,
      data: {
        errors: Object.fromEntries(
-          parsed.error.errors.map((x) => [x.path.join("."), x.message]),
+          parsed.error.issues.map((x) => [x.path.join("."), x.message]),
        ),
      },
    });
@@ -23,11 +20,7 @@ export default defineEventHandler(async (event) => {
  const logoUrl = logo ? resolve("public", `logos/${logo}.png`) : undefined;
  const canvas = await renderQRCodeToCanvas(content, logoUrl);

-  let image = canvas.toBuffer();
-  if (format !== "png") {
-    image = await sharp(image).toFormat(format).toBuffer();
-  }
-
+  const image = canvas.toBuffer(format);
  event.node.res.setHeader("Content-Type", `image/${format}`);
  return image;
 });
--- a/shared/utils/formatting.ts
+++ b/shared/utils/formatting.ts
@@ -3,5 +3,8 @@ export const capitalize = (str: string) =>

 export const upperCase = (str: string) => str.toUpperCase();

-export const arrayToUnion = (array: string[]) =>
+export const arrayToUnion = (array: string[] | readonly string[]) =>
  array.map((x) => `"${x}"`).join(" | ");
+
+export const unreadonly = <T extends string>(arr: readonly T[]): string[] =>
+  [...arr] as string[];
--- a/shared/utils/renderer.ts
+++ b/shared/utils/renderer.ts
@@ -1,4 +1,4 @@
-import { createCanvas, loadImage } from "canvas";
+import { Canvas, loadImage } from "skia-canvas";
 import QRCode from "qrcode";

 const CANVAS_SIZE = 1000;
@@ -8,7 +8,7 @@ export const renderQRCodeToCanvas = async (
  content: string,
  logoUrl: string | undefined,
 ) => {
-  const canvas = createCanvas(CANVAS_SIZE, CANVAS_SIZE);
+  const canvas = new Canvas(CANVAS_SIZE, CANVAS_SIZE);
  const errorCorrectionLevel: QRCode.QRCodeErrorCorrectionLevel = logoUrl
    ? "H"
    : "M";
--- a/shared/utils/settings.ts
+++ b/shared/utils/settings.ts