@dargmuesli/nuxt-vio 20.0.0-beta.1 → 20.0.0-beta.2

package/.config/lint.js

@@ -36,13 +36,6 @@ export const VIO_ESLINT_CONFIG = [
       },
     },
     rules: {
-      '@intlify/vue-i18n/no-missing-keys': 'error',
-      '@intlify/vue-i18n/no-raw-text': 'error',
-      '@intlify/vue-i18n/no-deprecated-i18n-component': 'error', // TODO: do not specify below rules manually, but have them included in `recommended` https://github.com/intlify/eslint-plugin-vue-i18n/issues/275
-      '@intlify/vue-i18n/no-deprecated-i18n-place-attr': 'error',
-      '@intlify/vue-i18n/no-deprecated-i18n-places-prop': 'error',
-      '@intlify/vue-i18n/no-i18n-t-path-prop': 'error',
-      '@intlify/vue-i18n/valid-message-syntax': 'error',
       '@intlify/vue-i18n/key-format-style': 'error',
       '@intlify/vue-i18n/no-duplicate-keys-in-locale': 'error',
       '@intlify/vue-i18n/no-dynamic-keys': 'error',

package/app/assets/css/shadcn.css

@@ -0,0 +1,119 @@
+/* stylelint-disable at-rule-no-unknown */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
+.dark {
+  --background: oklch(14.5% 0 0deg);
+  --foreground: oklch(98.5% 0 0deg);
+  --card: oklch(20.5% 0 0deg);
+  --card-foreground: oklch(98.5% 0 0deg);
+  --popover: oklch(20.5% 0 0deg);
+  --popover-foreground: oklch(98.5% 0 0deg);
+  --primary: oklch(92.2% 0 0deg);
+  --primary-foreground: oklch(20.5% 0 0deg);
+  --secondary: oklch(26.9% 0 0deg);
+  --secondary-foreground: oklch(98.5% 0 0deg);
+  --muted: oklch(26.9% 0 0deg);
+  --muted-foreground: oklch(70.8% 0 0deg);
+  --accent: oklch(26.9% 0 0deg);
+  --accent-foreground: oklch(98.5% 0 0deg);
+  --destructive: oklch(70.4% 0.191 22.216deg);
+  --border: oklch(100% 0 0deg / 10%);
+  --input: oklch(100% 0 0deg / 15%);
+  --ring: oklch(55.6% 0 0deg);
+  --chart-1: oklch(48.8% 0.243 264.376deg);
+  --chart-2: oklch(69.6% 0.17 162.48deg);
+  --chart-3: oklch(76.9% 0.188 70.08deg);
+  --chart-4: oklch(62.7% 0.265 303.9deg);
+  --chart-5: oklch(64.5% 0.246 16.439deg);
+  --sidebar: oklch(20.5% 0 0deg);
+  --sidebar-foreground: oklch(98.5% 0 0deg);
+  --sidebar-primary: oklch(48.8% 0.243 264.37deg);
+  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+  --sidebar-accent: oklch(26.9% 0 0deg);
+  --sidebar-accent-foreground: oklch(98.5% 0 0deg);
+  --sidebar-border: oklch(100% 0 0deg / 10%);
+  --sidebar-ring: oklch(55.6% 0 0deg);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(100% 0 0deg);
+  --foreground: oklch(14.5% 0 0deg);
+  --card: oklch(100% 0 0deg);
+  --card-foreground: oklch(14.5% 0 0deg);
+  --popover: oklch(100% 0 0deg);
+  --popover-foreground: oklch(14.5% 0 0deg);
+  --primary: oklch(20.5% 0 0deg);
+  --primary-foreground: oklch(98.5% 0 0deg);
+  --secondary: oklch(97% 0 0deg);
+  --secondary-foreground: oklch(20.5% 0 0deg);
+  --muted: oklch(97% 0 0deg);
+  --muted-foreground: oklch(55.6% 0 0deg);
+  --accent: oklch(97% 0 0deg);
+  --accent-foreground: oklch(20.5% 0 0deg);
+  --destructive: oklch(57.7% 0.245 27.32deg);
+  --border: oklch(92.2% 0 0deg);
+  --input: oklch(92.2% 0 0deg);
+  --ring: oklch(70.8% 0 0deg);
+  --chart-1: oklch(64.6% 0.222 41.11deg);
+  --chart-2: oklch(60% 0.118 184.7deg);
+  --chart-3: oklch(39.8% 0.07 227.39deg);
+  --chart-4: oklch(82.8% 0.189 84.42deg);
+  --chart-5: oklch(76.9% 0.188 70deg);
+  --sidebar: oklch(98.5% 0 0deg);
+  --sidebar-foreground: oklch(14.5% 0 0deg);
+  --sidebar-primary: oklch(20.5% 0 0deg);
+  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+  --sidebar-accent: oklch(97% 0 0deg);
+  --sidebar-accent-foreground: oklch(20.5% 0 0deg);
+  --sidebar-border: oklch(92.2% 0 0deg);
+  --sidebar-ring: oklch(70.8% 0 0deg);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/app/assets/css/vio.css

@@ -5,15 +5,17 @@
 /* stylelint-disable plugin/no-unsupported-browser-features */
 
 @import 'tailwindcss';
+@import 'tw-animate-css';
 @import './forms.css';
+@import './shadcn.css';
 
-@source "../../";
+@source '../../';
 
-@plugin "@tailwindcss/forms" {
+@plugin '@tailwindcss/forms' {
   strategy: 'base';
 }
 
-@plugin "@tailwindcss/typography";
+@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:where(.dark, .dark *));
 

package/app/components/scn/sonner/Sonner.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from 'lucide-vue-next'
+import { Toaster as Sonner } from 'vue-sonner'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>

package/app/components/scn/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

package/app/components/vio/_/VioApp.vue

@@ -5,6 +5,7 @@
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <NuxtPage />
     </NuxtLayout>
+    <VioSonner />
   </div>
 </template>
 

package/app/components/vio/_/VioSonner.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- TODO: add `class="pointer-events-auto"` -->
+  <Toaster rich-colors :theme="colorModePreference" />
+</template>
+
+<script setup lang="ts">
+import type { ColorMode } from '~/types/color-mode'
+
+const colorMode = useColorMode()
+
+const colorModePreference = colorMode.preference as ColorMode
+</script>
+
+<style>
+@import url('vue-sonner/style.css');
+</style>

package/app/components/vio/_/VioTime.vue

@@ -10,7 +10,6 @@
 import { reactiveOmit } from '@vueuse/core'
 import { useForwardProps } from 'reka-ui'
 
-// TODO: use imported type (https://github.com/nuxt/nuxt/issues/29757)
 import type { NuxtTimeProps } from '#app'
 
 const { locale: defaultLocale } = useI18n()

package/app/components/vio/button/VioButtonShare.vue

@@ -26,7 +26,7 @@ const copy = async (string: string) => {
 
   try {
     await copyText(string)
-    showToast({ title: t('donationUrlCopySuccess') })
+    toast.success(t('donationUrlCopySuccess'))
   } catch (error: unknown) {
     console.error(error)
     alert(t('donationUrlCopyError'))

package/app/composables/alert.ts

@@ -1,17 +1,26 @@
 import { consola } from 'consola'
-import Swal from 'sweetalert2'
-import type { Ref } from 'vue'
 
-export const useFireError = () => {
+export const useAlertError = () => {
   const { t } = useI18n({ useScope: 'global' })
 
-  return ({ error }: { error: Error }, api?: Ref<{ errors: Error[] }>) => {
-    Swal.fire({
-      icon: 'error',
-      title: t('globalStatusError'),
-      text: error.message,
+  return (
+    options:
+      | string
+      | {
+          error?: Error
+          messageI18n: string
+          toastOptions?: Parameters<typeof toast>[1]
+        },
+  ) => {
+    const error =
+      typeof options === 'string' ? new Error(options) : options.error
+    const errorMessage =
+      typeof options === 'string' ? options : options.messageI18n
+
+    consola.error({ errorMessage, ...(error ? { error } : {}) })
+    toast.error(t('globalError'), {
+      ...(typeof options !== 'string' ? options.toastOptions || {} : {}),
+      description: errorMessage,
     })
-    api?.value.errors.push(error)
-    consola.error(error)
   }
 }

package/app/plugins/ssr-width.ts

@@ -0,0 +1,5 @@
+import { provideSSRWidth } from '@vueuse/core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  provideSSRWidth(1024, nuxtApp.vueApp)
+})

package/app/types/color-mode.d.ts

@@ -0,0 +1 @@
+export type ColorMode = 'dark' | 'light' | 'system'

package/app/utils/notification.ts

@@ -0,0 +1 @@
+export { toast } from 'vue-sonner'

package/app/utils/shadcn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/i18n/locales/de.json

@@ -1,4 +1,5 @@
 {
+  "globalError": "Fehler",
   "globalSeoOgImageAlt": "Social Preview Image für eine Vio Webseite.",
   "globalPlaceholderEmailAddress": "e-mail{'@'}adres.se",
   "globalPlaceholderUrl": "https://websei.te",

package/i18n/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "globalError": "Error",
   "globalSeoOgImageAlt": "Social Preview Image for a Vio webpage.",
   "globalPlaceholderEmailAddress": "email{'@'}addre.ss",
   "globalPlaceholderUrl": "https://websi.te",

package/nuxt.config.ts

@@ -1,3 +1,6 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
 import tailwindcss from '@tailwindcss/vite'
 import { defu } from 'defu'
 
@@ -10,6 +13,8 @@ import {
 } from './shared/utils/constants'
 import { VIO_NUXT_BASE_CONFIG } from './shared/utils/nuxt'
 
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
 export default defineNuxtConfig(
   defu(
     {
@@ -50,6 +55,7 @@ export default defineNuxtConfig(
         '@nuxtjs/seo',
         '@pinia/nuxt',
         'nuxt-gtag',
+        'shadcn-nuxt',
         (_options, nuxt) => {
           if (nuxt.options.nitro.static) {
             nuxt.options.features.inlineStyles = false
@@ -65,11 +71,6 @@ export default defineNuxtConfig(
           ) {
             if (nuxt.options.nitro.static) {
               nuxtConfigSecurityHeaders.contentSecurityPolicy = defu(
-                {
-                  'script-src-elem': [
-                    "'unsafe-inline'", // TODO: remove (https://github.com/Baroshem/nuxt-security/pull/659)
-                  ],
-                },
                 VIO_GET_CSP({ siteUrl: new URL(SITE_URL) }),
                 nuxtConfigSecurityHeaders.contentSecurityPolicy,
               )
@@ -242,6 +243,10 @@ export default defineNuxtConfig(
         },
         strict: true,
       },
+      shadcn: {
+        prefix: '',
+        componentDir: join(currentDir, './app/components/scn'),
+      },
       site: {
         url: SITE_URL,
       },
@@ -256,7 +261,8 @@ export default defineNuxtConfig(
         },
         nitro: {
           experimental: {
-            openAPI: false, // TODO: set to true (https://github.com/nuxt/content/issues/2839)
+            asyncContext: true,
+            openAPI: true,
           },
         },
         runtimeConfig: {
@@ -270,7 +276,6 @@ export default defineNuxtConfig(
         // modules
         security: {
           headers: {
-            crossOriginEmbedderPolicy: 'unsafe-none',
             strictTransportSecurity: false, // prevent endless reload in Chrome
           },
         },
@@ -295,6 +300,7 @@ export default defineNuxtConfig(
         },
         security: {
           headers: {
+            crossOriginEmbedderPolicy: 'require-corp', // breaks nuxt devtools
             strictTransportSecurity: {
               maxAge: 31536000,
               preload: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "9.1.7",
-    "@eslint/compat": "1.4.1",
+    "@dargmuesli/nuxt-cookie-control": "9.1.8",
+    "@eslint/compat": "2.0.0",
     "@heroicons/vue": "2.2.0",
     "@http-util/status-i18n": "0.9.0",
     "@intlify/eslint-plugin-vue-i18n": "4.1.0",
@@ -10,7 +10,7 @@
     "@nuxt/image": "2.0.0",
     "@nuxtjs/color-mode": "4.0.0",
     "@nuxtjs/html-validator": "2.1.0",
-    "@nuxtjs/i18n": "10.2.0",
+    "@nuxtjs/i18n": "10.2.1",
     "@nuxtjs/seo": "3.2.2",
     "@pinia/nuxt": "0.11.3",
     "@tailwindcss/forms": "0.5.10",
@@ -21,7 +21,10 @@
     "@urql/vue": "2.0.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "clipboardy": "5.0.0",
+    "@vueuse/core": "14.0.0",
+    "class-variance-authority": "0.7.1",
+    "clipboardy": "5.0.1",
+    "clsx": "2.1.1",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-compat": "6.0.2",
@@ -29,14 +32,18 @@
     "eslint-plugin-yml": "1.19.0",
     "globals": "16.5.0",
     "jiti": "2.6.1",
-    "jose": "6.1.1",
+    "jose": "6.1.2",
+    "lucide-vue-next": "0.554.0",
     "nuxt-gtag": "4.1.0",
-    "nuxt-security": "2.4.0",
-    "sweetalert2": "11.26.3",
-    "vue-tsc": "3.1.3"
+    "nuxt-security": "2.5.0",
+    "shadcn-nuxt": "2.3.3",
+    "tailwind-merge": "3.4.0",
+    "tw-animate-css": "1.4.0",
+    "vue-sonner": "2.0.9",
+    "vue-tsc": "3.1.5"
   },
   "devDependencies": {
-    "@types/node": "24.10.0",
+    "@types/node": "24.10.1",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "8.1.0",
     "@vueuse/core": "14.0.0",
@@ -51,12 +58,12 @@
     "reka-ui": "2.6.0",
     "serve": "14.2.5",
     "sharp": "0.34.5",
-    "stylelint": "16.25.0",
+    "stylelint": "16.26.0",
     "stylelint-config-recommended-vue": "1.6.1",
     "stylelint-config-standard": "39.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.5",
     "tailwindcss": "4.1.17",
-    "vue": "3.5.24",
+    "vue": "3.5.25",
     "vue-router": "4.6.3"
   },
   "engines": {
@@ -107,5 +114,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "20.0.0-beta.1"
+  "version": "20.0.0-beta.2"
 }

package/server/middleware/timezone.ts

@@ -1,5 +1,5 @@
 export default defineEventHandler(async (event) => {
-  event.context.$timezone = await getTimezoneServer(event)
+  event.context.$timezone = await getTimezone(event)
 })
 
 declare module 'h3' {

package/server/plugins/security.ts

@@ -1,10 +1,9 @@
 import { defu } from 'defu'
-import type { NuxtOptions } from 'nuxt/schema'
+import type { ModuleOptions } from 'nuxt-security'
 
 // remove invalid `'none'`s and duplicates
 export const cleanupCsp = (
-  // @ts-expect-error https://github.com/Baroshem/nuxt-security/pull/661
-  nuxtSecurityConfiguration: Partial<NuxtOptions['security']>,
+  nuxtSecurityConfiguration: Partial<ModuleOptions>,
 ) => {
   if (
     nuxtSecurityConfiguration.headers &&
@@ -28,7 +27,6 @@ export const cleanupCsp = (
 }
 
 export default defineNitroPlugin((nitroApp) => {
-  // @ts-expect-error https://github.com/Baroshem/nuxt-security/pull/661
   nitroApp.hooks.hook('nuxt-security:routeRules', async (routeRules) => {
     const { siteUrlTyped: siteUrl } = useSiteUrl()
 

package/server/utils/timezone.ts

@@ -1,7 +1,6 @@
 import type { H3Event } from 'h3'
 
-// TODO: rename to `getTimezone` (https://github.com/nuxt/cli/issues/266)
-export const getTimezoneServer = async (event: H3Event) => {
+export const getTimezone = async (event: H3Event) => {
   const timezoneBySsr = event.context.$timezone
 
   if (timezoneBySsr) return timezoneBySsr

package/shared/utils/constants.ts

@@ -113,14 +113,6 @@ export const VIO_GET_CSP = ({ siteUrl }: { siteUrl: URL }) =>
         : {}),
       'connect-src': [
         "'self'", // e.g. `/_nuxt/builds/meta/`, `/_payload.json`, `/privacy-policy/_payload.json`
-        // ...(process.env.NODE_ENV === 'development'
-        //   ? [
-        //       'http://localhost:3000/_nuxt/', // hot reload
-        //       'https://localhost:3000/_nuxt/', // hot reload
-        //       'ws://localhost:3000/_nuxt/', // hot reload
-        //       'wss://localhost:3000/_nuxt/', // hot reload
-        //     ] // TODO: generalize for different ports
-        //   : []),
       ],
       'img-src': [
         "'self'", // e.g. favicon
@@ -131,7 +123,7 @@ export const VIO_GET_CSP = ({ siteUrl }: { siteUrl: URL }) =>
         `${siteUrl}_nuxt/`, // bundle
       ],
       'style-src': [
-        "'unsafe-inline'", // TODO: replace with "'nonce-{{nonce}}'" once Sweetalert supports it
+        "'nonce-{{nonce}}'",
         "'self'", // TODO: `${siteUrl}_nuxt/`, // bundle
       ], // TODO: use `style-src-elem` once Playwright WebKit supports it
     },

package/shared/utils/dateTime.ts

@@ -0,0 +1,118 @@
+/**
+ * Calculates the duration between two dates in terms of years, months, weeks, days, hours, and minutes.
+ *
+ * This utility is useful for displaying human-readable differences between two timestamps.
+ * The returned object represents the absolute difference, regardless of the order of `from` and `to`.
+ *
+ * @param {Date} from - The starting date of the interval.
+ * @param {Date} to - The ending date of the interval.
+ * @returns {{ years: number, months: number, weeks: number, days: number, hours: number, minutes: number }}
+ * An object representing the time difference between the two dates:
+ * - `years`: Number of full years
+ * - `months`: Remaining full months after accounting for years
+ * - `weeks`: Remaining full weeks after accounting for months
+ * - `days`: Remaining days after accounting for weeks
+ * - `hours`: Remaining hours
+ * - `minutes`: Remaining minutes
+ *
+ * @example
+ * getDuration(new Date('2020-01-01'), new Date('2023-04-10'))
+ * // returns: { years: 3, months: 3, weeks: 1, days: 2, hours: 0, minutes: 0 }
+ */
+export const getDuration = (
+  from: Date,
+  to: Date,
+): {
+  days: number
+  hours: number
+  minutes: number
+  months: number
+  weeks: number
+  years: number
+} => {
+  const start = from > to ? to : from
+  const end = from > to ? from : to
+
+  let years = end.getUTCFullYear() - start.getUTCFullYear()
+  let months = end.getUTCMonth() - start.getUTCMonth()
+  let days = end.getUTCDate() - start.getUTCDate()
+  let hours = end.getUTCHours() - start.getUTCHours()
+  let minutes = end.getUTCMinutes() - start.getUTCMinutes()
+
+  if (minutes < 0) {
+    minutes += 60
+    hours--
+  }
+
+  if (hours < 0) {
+    hours += 24
+    days--
+  }
+
+  if (days < 0) {
+    const prevMonth = new Date(
+      Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), 0),
+    )
+    days += prevMonth.getUTCDate()
+    months--
+  }
+
+  if (months < 0) {
+    months += 12
+    years--
+  }
+
+  const weeks = Math.floor(days / 7)
+  days = days % 7
+
+  return {
+    days,
+    hours,
+    minutes,
+    months,
+    weeks,
+    years,
+  }
+}
+
+/**
+ * Default date-time formatting options used for displaying timestamps in a concise and readable format.
+ *
+ * Format includes:
+ * - Day (numeric, e.g., "15")
+ * - Month (short name, e.g., "Jul")
+ * - Year (numeric, e.g., "2025")
+ * - Hour and minute (numeric, 12/24-hour based on locale, e.g., "6:00 PM")
+ * - Time zone name (short, e.g., "UTC", "PST")
+ *
+ * These options are intended to be used with `Intl.DateTimeFormat`.
+ */
+export const dateTimeFormatOptions: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  month: 'short',
+  timeZoneName: 'short',
+  year: 'numeric',
+}
+
+/**
+ * Returns a date-time formatter function for use in emails which don't support targeted locales yet.
+ *
+ * The formatter uses the specified locale and a fixed UTC time zone.
+ *
+ * @param {string} locale - A BCP 47 language tag (e.g., "en-US", "fr-FR") used to format the date/time.
+ * @returns {Intl.DateTimeFormat} A formatter instance that formats dates in the specified locale and UTC time zone.
+ *
+ * @example
+ * const format = getEmailDateTimeFormatter('en-US')
+ * format.format(new Date('2025-07-15T18:00:00Z'))
+ * // → "Jul 15, 2025, 6:00 PM UTC"
+ */
+export const getEmailDateTimeFormatter = (
+  locale: string,
+): Intl.DateTimeFormat =>
+  Intl.DateTimeFormat(locale, {
+    ...dateTimeFormatOptions,
+    timeZone: 'UTC',
+  })

package/shared/utils/networking.ts

@@ -103,9 +103,7 @@ export const getServiceHref = ({
 
   if (stagingHost) {
     return `https://${nameSubdomainString}${stagingHost}`
-    // TODO: remove disable below (https://github.com/nuxt/nuxt/issues/25323)
-    // eslint-disable-next-line nuxt/prefer-import-meta
-  } else if (isSsr && process.server) {
+  } else if (isSsr && import.meta.server) {
     return `http://${name}${portString}`
   } else {
     return `https://${nameSubdomainString}${getRootHost(host)}`

package/shared/utils/modal.ts

@@ -1,16 +0,0 @@
-import Swal from 'sweetalert2'
-
-export const showToast = ({ title }: { title: string }) =>
-  Swal.fire({
-    didOpen: (toast) => {
-      toast.addEventListener('mouseenter', Swal.stopTimer)
-      toast.addEventListener('mouseleave', Swal.resumeTimer)
-    },
-    icon: 'success',
-    position: 'bottom-right',
-    showConfirmButton: false,
-    timer: 3000,
-    timerProgressBar: true,
-    title,
-    toast: true,
-  })