feat(nuxt): nuxt3 -> nuxt4

.prettierignore

@@ -0,0 +1,12 @@
+.test
+.nuxt
+.output
+.data
+dist
+node_modules
+*.JPG
+*.png
+*.webp
+*.gltf
+*.blend
+*.blend1

Dockerfile

@@ -9,7 +9,7 @@ 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
@@ -17,6 +17,7 @@ RUN pnpm run build
 
 FROM base
 
+COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/.output /app/.output
 
 EXPOSE 3000

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);
+}

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">
+  <UModal v-model:open="app.apiModalOpened" title="API Documentation">
-    <UCard
+    <template #body>
-      :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>
-
       <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"
+                  class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-xs font-mono"
-                  >GET</span
+                  ><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>

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<{
-
+  hasLogo: boolean;
-const state = reactive({
+  logo: string | undefined;
+  format: ImageFormat;
+  content: string | undefined;
+}>({
   hasLogo: false,
   logo: undefined,
   format: IMAGE_FORMATS[0],
   content: undefined,
 });
 
-const stateErrors = computed(() => ({
+const parsedState = computed(() => formSchema.safeParse(state));
-  content: firstBlured.value && !state.content,
-  logo: firstBlured.value && state.hasLogo && !state.logo,
-}));
 
-const isValidState = computed(
+const apiUrl = computed<string>((previous) => {
-  () =>
+  if (!parsedState.value.success) return previous ?? "";
-    ((state.hasLogo && state.logo) || !state.hasLogo) &&
-    state.content &&
-    state.format,
-);
-
-const apiUrl = computed((previous) => {
-  if (!isValidState.value) return previous;
 
+  const { content, format, hasLogo, logo } = parsedState.value.data;
   const params = new URLSearchParams({
-    ...(state.hasLogo && { logo: state.logo }),
+    ...(hasLogo && logo && { logo }),
-    format: state.format,
+    format,
-    content: state.content,
+    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 { content, hasLogo, logo, format } = parsedState.value.data;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+  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;
+  if (!parsedState.value.success) return;
-  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
+  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">
+    <UForm
-      <UFormGroup
+      :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
+          class="w-full"
-          clear-search-on-close
           @change="updateQRCode"
-          @blur="firstBlured = true"
         >
-          <template #label>
+          <template #item-label="{ item }">
-            <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
+            {{ capitalize(item) }}
           </template>
 
-          <template #option="props">
+          <template v-if="state.logo">{{ capitalize(state.logo) }}</template>
-            <span>{{ capitalize(props.option) }}</span>
-          </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>
+          <template #item-label="{ item }">
-            <span v-if="state.format">{{ upperCase(state.format) }}</span>
+            {{ upperCase(item) }}
           </template>
 
-          <template #option="props">
+          {{ upperCase(state.format) }}
-            <span>{{ upperCase(props.option) }}</span>
-          </template>
         </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

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>

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"

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"

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");

eslint.config.mjs

@@ -1,5 +1,3 @@
-// @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";
 
 export default withNuxt();
-// Your custom configs here

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",

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",
+    "jszip": "^3.10.1",
-    "@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",
     "qrcode": "^1.5.4",
-    "sharp": "^0.33.5",
+    "skia-canvas": "^3.0.8",
-    "vue": "latest",
+    "zod": "^4.3.6"
-    "vue-router": "latest",
-    "zod": "^3.23.8"
   },
-  "packageManager": "pnpm@9.11.0",
+  "packageManager": "pnpm@10.28.2",
   "devDependencies": {
-    "@types/qrcode": "^1.5.5",
+    "@iconify-json/heroicons": "^1.2.3",
-    "typescript": "5.5.4"
+    "@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"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - esbuild
+  - skia-canvas
+  - unrs-resolver
+  - vue-demi

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();
+  const image = canvas.toBuffer(format);
-  if (format !== "png") {
-    image = await sharp(image).toFormat(format).toBuffer();
-  }
-
   event.node.res.setHeader("Content-Type", `image/${format}`);
   return image;
 });

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[];

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";