create-nuxt-base 2.1.3 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.2.0](https://github.com/lenneTech/nuxt-base-starter/compare/v2.1.4...v2.2.0) (2026-02-04)
+
+
+### Features
+
+* improve registration and login with email verification, terms checkbox, and TS fixes ([dee6b95](https://github.com/lenneTech/nuxt-base-starter/commit/dee6b95b29890bdccf09570192f869397694b61f))
+
+### [2.1.4](https://github.com/lenneTech/nuxt-base-starter/compare/v2.1.3...v2.1.4) (2026-01-26)
+
+
+### Bug Fixes
+
+* generate QR code locally as SVG for password manager compatibility ([f4256e9](https://github.com/lenneTech/nuxt-base-starter/commit/f4256e94baf839b800cd5420c49ad9ed14a50f01))
+
 ### [2.1.3](https://github.com/lenneTech/nuxt-base-starter/compare/v2.1.2...v2.1.3) (2026-01-26)
 
 

package/nuxt-base-template/app/layouts/default.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 
-const { isAuthenticated, signOut, user } = useLtAuth();
+const { isAuthenticated, signOut, user, validateSession } = useLtAuth();
+
+onMounted(() => {
+  validateSession();
+});
 
 async function handleLogout() {
   await signOut();

package/nuxt-base-template/app/pages/app/settings/security.vue

@@ -5,6 +5,7 @@
 import type { FormSubmitEvent } from '@nuxt/ui';
 import type { InferOutput } from 'valibot';
 
+import QRCode from 'qrcode';
 import * as v from 'valibot';
 
 import ModalBackupCodes from '~/components/Modal/ModalBackupCodes.vue';
@@ -31,6 +32,7 @@ const authClient = useLtAuthClient();
 // ============================================================================
 const loading = ref<boolean>(false);
 const totpUri = ref<string>('');
+const qrCodeSvg = ref<string>('');
 const backupCodes = ref<string[]>([]);
 const showTotpSetup = ref<boolean>(false);
 const show2FADisable = ref<boolean>(false);
@@ -184,6 +186,17 @@ async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void
 
     totpUri.value = data?.totpURI ?? '';
     backupCodes.value = data?.backupCodes ?? [];
+
+    // Generate QR code as SVG for better password manager compatibility
+    if (totpUri.value) {
+      qrCodeSvg.value = await QRCode.toString(totpUri.value, {
+        type: 'svg',
+        width: 200,
+        margin: 2,
+        errorCorrectionLevel: 'M',
+      });
+    }
+
     showTotpSetup.value = true;
     enable2FAForm.password = '';
   } finally {
@@ -209,6 +222,13 @@ async function loadPasskeys(): Promise<void> {
   }
 }
 
+function resetTotpSetup(): void {
+  showTotpSetup.value = false;
+  totpForm.code = '';
+  totpUri.value = '';
+  qrCodeSvg.value = '';
+}
+
 async function openBackupCodesModal(codes: string[] = []): Promise<void> {
   const modal = overlay.create(ModalBackupCodes, {
     props: {
@@ -246,8 +266,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
       title: 'Erfolg',
     });
 
-    showTotpSetup.value = false;
-    totpForm.code = '';
+    resetTotpSetup();
     await openBackupCodesModal(backupCodes.value);
   } finally {
     loading.value = false;
@@ -301,7 +320,8 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
             <p class="text-sm text-muted">Scanne den QR-Code mit deiner Authenticator-App (z.B. Google Authenticator, Authy) und gib den Code ein.</p>
 
             <div class="flex justify-center">
-              <img v-if="totpUri" :src="`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(totpUri)}`" alt="TOTP QR Code" class="rounded-lg" />
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <div v-if="qrCodeSvg" class="rounded-lg bg-white p-2" v-html="qrCodeSvg" />
             </div>
 
             <UForm :schema="totpSchema" :state="totpForm" class="space-y-4" @submit="verifyTotp">
@@ -310,7 +330,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
               </UFormField>
               <div class="flex gap-2">
                 <UButton type="submit" :loading="loading"> Verifizieren </UButton>
-                <UButton variant="outline" color="neutral" @click="showTotpSetup = false"> Abbrechen </UButton>
+                <UButton variant="outline" color="neutral" @click="resetTotpSetup"> Abbrechen </UButton>
               </div>
             </UForm>
           </div>
@@ -325,7 +345,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
 
         <template v-if="show2FADisable">
           <UForm :schema="passwordSchema" :state="disable2FAForm" class="space-y-4" @submit="disable2FA">
-            <UAlert color="warning" icon="i-lucide-alert-triangle"> 2FA zu deaktivieren verringert die Sicherheit deines Kontos. </UAlert>
+            <UAlert color="warning" icon="i-lucide-alert-triangle" description="2FA zu deaktivieren verringert die Sicherheit deines Kontos." />
             <UFormField label="Passwort bestätigen" name="password">
               <UInput v-model="disable2FAForm.password" type="password" placeholder="Dein Passwort" />
             </UFormField>
@@ -361,7 +381,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
                   <p class="text-xs text-muted">Erstellt am {{ new Date(passkey.createdAt).toLocaleDateString('de-DE') }}</p>
                 </div>
               </div>
-              <UButton variant="ghost" color="error" icon="i-lucide-trash-2" size="sm" :loading="passkeyLoading" @click="deletePasskey(passkey.id)" />
+              <UButton variant="outline" color="error" icon="i-lucide-trash" size="sm" :loading="passkeyLoading" @click="deletePasskey(passkey.id)">Löschen</UButton>
             </div>
           </div>
         </template>

package/nuxt-base-template/app/pages/auth/forgot-password.vue

@@ -7,8 +7,8 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-// Auth client from @lenne.tech/nuxt-extensions (auto-imported as ltAuthClient)
-const authClient = ltAuthClient;
+// Auth client from @lenne.tech/nuxt-extensions
+const authClient = useLtAuthClient();
 
 // ============================================================================
 // Composables

package/nuxt-base-template/app/pages/auth/login.vue

@@ -7,11 +7,30 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
+// ============================================================================
+// Types
+// ============================================================================
+interface SignInResponse {
+  data?: {
+    redirect?: boolean;
+    requiresTwoFactor?: boolean;
+    token?: string | null;
+    twoFactorRedirect?: boolean;
+    url?: string;
+    user?: Record<string, unknown>;
+  } | null;
+  error?: {
+    code?: string;
+    message?: string;
+    status?: number;
+  } | null;
+}
+
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signIn, setUser, isLoading, validateSession, authenticateWithPasskey } = useLtAuth();
+const { signIn, setUser, validateSession, authenticateWithPasskey } = useLtAuth();
 const { translateError } = useLtErrorTranslation();
 
 // ============================================================================
@@ -108,14 +127,26 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
   loading.value = true;
 
   try {
-    const result = await signIn.email({
+    const result = (await signIn.email({
       email: payload.data.email,
       password: payload.data.password,
-    });
+    })) as SignInResponse;
 
     // Check for error in response
-    if ('error' in result && result.error) {
-      const errorMessage = (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen';
+    if (result.error) {
+      const errorMessage = result.error.message || 'Anmeldung fehlgeschlagen';
+
+      // Check if email verification is required → redirect to verify-email page
+      if (errorMessage.includes('LTNS_0023') || errorMessage.toLowerCase().includes('email verification required')) {
+        toast.add({
+          color: 'warning',
+          description: 'Bitte bestätige zuerst deine E-Mail-Adresse.',
+          title: 'E-Mail nicht verifiziert',
+        });
+        await navigateTo({ path: '/auth/verify-email', query: { email: payload.data.email } });
+        return;
+      }
+
       toast.add({
         color: 'error',
         description: translateError(errorMessage),
@@ -126,8 +157,8 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     // Check if 2FA is required
     // Better-Auth native uses 'twoFactorRedirect', nest-server REST API uses 'requiresTwoFactor'
-    const resultData = 'data' in result ? result.data : result;
-    const requires2FA = resultData && (('twoFactorRedirect' in resultData && resultData.twoFactorRedirect) || ('requiresTwoFactor' in resultData && resultData.requiresTwoFactor));
+    const resultData = result.data as Record<string, unknown> | null | undefined;
+    const requires2FA = resultData && (resultData.twoFactorRedirect || resultData.requiresTwoFactor || resultData.redirect);
     if (requires2FA) {
       // Redirect to 2FA page
       await navigateTo('/auth/2fa');
@@ -135,7 +166,7 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
     }
 
     // Check if login was successful (user data in response)
-    const userData = 'user' in result ? result.user : 'data' in result ? result.data?.user : null;
+    const userData = result.data?.user;
     if (userData) {
       // Auth state is already stored by useLtAuth
       // Navigate to app

package/nuxt-base-template/app/pages/auth/register.vue

@@ -7,11 +7,26 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
+// ============================================================================
+// Types
+// ============================================================================
+interface AuthResponse {
+  data?: {
+    token?: string | null;
+    user?: Record<string, unknown>;
+  } | null;
+  error?: {
+    code?: string;
+    message?: string;
+    status?: number;
+  } | null;
+}
+
 // ============================================================================
 // Composables
 // ============================================================================
 const toast = useToast();
-const { signUp, signIn, registerPasskey } = useLtAuth();
+const { signUp, signIn, registerPasskey, features, clearUser } = useLtAuth();
 const { translateError } = useLtErrorTranslation();
 
 // ============================================================================
@@ -28,7 +43,9 @@ const loading = ref<boolean>(false);
 const showPasskeyPrompt = ref<boolean>(false);
 const passkeyLoading = ref<boolean>(false);
 
-const fields: AuthFormField[] = [
+const requireTerms = computed(() => features.value.signUpChecks === true);
+
+const baseFields: AuthFormField[] = [
   {
     label: 'Name',
     name: 'name',
@@ -59,12 +76,41 @@ const fields: AuthFormField[] = [
   },
 ];
 
-const schema = v.pipe(
+const fields = computed<AuthFormField[]>(() => {
+  if (!requireTerms.value) {
+    return baseFields;
+  }
+  return [
+    ...baseFields,
+    {
+      label: '',
+      name: 'termsAccepted',
+      required: true,
+      type: 'checkbox',
+    },
+  ];
+});
+
+const baseSchema = v.pipe(
+  v.object({
+    confirmPassword: v.pipe(v.string('Passwortbestätigung ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
+    email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
+    name: v.pipe(v.string('Name ist erforderlich'), v.minLength(2, 'Mindestens 2 Zeichen erforderlich')),
+    password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
+  }),
+  v.forward(
+    v.partialCheck([['password'], ['confirmPassword']], (input) => input.password === input.confirmPassword, 'Passwörter stimmen nicht überein'),
+    ['confirmPassword'],
+  ),
+);
+
+const termsSchema = v.pipe(
   v.object({
     confirmPassword: v.pipe(v.string('Passwortbestätigung ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
     email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
     name: v.pipe(v.string('Name ist erforderlich'), v.minLength(2, 'Mindestens 2 Zeichen erforderlich')),
     password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(8, 'Mindestens 8 Zeichen erforderlich')),
+    termsAccepted: v.pipe(v.optional(v.boolean(), false), v.literal(true, 'Bitte akzeptiere die AGB und Datenschutzerklärung')),
   }),
   v.forward(
     v.partialCheck([['password'], ['confirmPassword']], (input) => input.password === input.confirmPassword, 'Passwörter stimmen nicht überein'),
@@ -72,7 +118,9 @@ const schema = v.pipe(
   ),
 );
 
-type Schema = InferOutput<typeof schema>;
+const schema = computed(() => requireTerms.value ? termsSchema : baseSchema);
+
+type Schema = InferOutput<typeof baseSchema> | InferOutput<typeof termsSchema>;
 
 // ============================================================================
 // Functions
@@ -82,16 +130,15 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
   try {
     // Step 1: Sign up
-    const signUpResult = await signUp.email({
+    const signUpResult = (await signUp.email({
       email: payload.data.email,
       name: payload.data.name,
       password: payload.data.password,
-    });
+      ...(requireTerms.value ? { termsAndPrivacyAccepted: true } : {}),
+    })) as AuthResponse;
 
-    const signUpError = 'error' in signUpResult ? signUpResult.error : null;
-
-    if (signUpError) {
-      const errorMessage = signUpError.message || 'Registrierung fehlgeschlagen';
+    if (signUpResult.error) {
+      const errorMessage = signUpResult.error.message || 'Registrierung fehlgeschlagen';
       toast.add({
         color: 'error',
         description: translateError(errorMessage),
@@ -100,13 +147,27 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
       return;
     }
 
+    // If email verification is enabled, clear auth state and redirect to verify-email page
+    // The backend revokes the session, but we also clear the frontend state to prevent
+    // manual navigation to protected routes
+    if (features.value.emailVerification) {
+      clearUser();
+      toast.add({
+        color: 'success',
+        description: 'Bitte überprüfe dein Postfach und bestätige deine E-Mail-Adresse.',
+        title: 'Konto erstellt!',
+      });
+      await navigateTo({ path: '/auth/verify-email', query: { email: payload.data.email, fromRegister: 'true' } });
+      return;
+    }
+
     // Step 2: Sign in to create session (required for passkey registration)
-    const signInResult = await signIn.email({
+    const signInResult = (await signIn.email({
       email: payload.data.email,
       password: payload.data.password,
-    });
+    })) as AuthResponse;
 
-    const signInError = 'error' in signInResult ? signInResult.error : null;
+    const signInError = signInResult.error;
 
     if (signInError) {
       // Sign-up was successful but sign-in failed - still show success and redirect
@@ -182,6 +243,19 @@ async function skipPasskey(): Promise<void> {
         }"
         @submit="onSubmit"
       >
+        <template v-if="requireTerms" #termsAccepted-field="{ state: formState }">
+          <UCheckbox v-model="formState.termsAccepted">
+            <template #label>
+              <span class="text-sm">
+                Ich akzeptiere die
+                <ULink to="/legal/terms" class="text-primary font-medium" target="_blank">AGB</ULink>
+                und
+                <ULink to="/legal/privacy" class="text-primary font-medium" target="_blank">Datenschutzerklärung</ULink>
+              </span>
+            </template>
+          </UCheckbox>
+        </template>
+
         <template #footer>
           <p class="text-center text-sm text-muted">
             Bereits ein Konto?

package/nuxt-base-template/app/pages/auth/reset-password.vue

@@ -7,8 +7,8 @@ import type { InferOutput } from 'valibot';
 
 import * as v from 'valibot';
 
-// Auth client from @lenne.tech/nuxt-extensions (auto-imported as ltAuthClient)
-const authClient = ltAuthClient;
+// Auth client from @lenne.tech/nuxt-extensions
+const authClient = useLtAuthClient();
 
 // ============================================================================
 // Composables

package/nuxt-base-template/app/pages/auth/verify-email.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+// ============================================================================
+// Composables
+// ============================================================================
+const route = useRoute();
+const toast = useToast();
+const runtimeConfig = useRuntimeConfig();
+const apiBase = import.meta.dev ? '/api/iam' : `${runtimeConfig.public.apiUrl || 'http://localhost:3000'}/iam`;
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const email = computed(() => (route.query.email as string) || '');
+const token = computed(() => (route.query.token as string) || '');
+
+const verifying = ref(false);
+const verified = ref(false);
+const verifyError = ref('');
+const resending = ref(false);
+const resendCooldown = ref(0);
+const cooldownSeconds = ref(60);
+let cooldownInterval: ReturnType<typeof setInterval> | null = null;
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function verifyEmailWithToken(verificationToken: string): Promise<void> {
+  verifying.value = true;
+  verifyError.value = '';
+
+  try {
+    const result = await $fetch<{ status: boolean }>(`${apiBase}/verify-email`, {
+      params: { token: verificationToken },
+      redirect: 'manual',
+    });
+
+    if (!result?.status) {
+      verifyError.value = 'Verifizierung fehlgeschlagen';
+      return;
+    }
+
+    verified.value = true;
+    toast.add({
+      color: 'success',
+      description: 'Deine E-Mail-Adresse wurde erfolgreich verifiziert.',
+      title: 'E-Mail bestätigt',
+    });
+  } catch {
+    verifyError.value = 'Die Verifizierung ist fehlgeschlagen. Der Link ist möglicherweise abgelaufen.';
+  } finally {
+    verifying.value = false;
+  }
+}
+
+async function resendVerificationEmail(): Promise<void> {
+  if (!email.value || resendCooldown.value > 0) return;
+
+  resending.value = true;
+
+  try {
+    await $fetch(`${apiBase}/send-verification-email`, {
+      body: {
+        callbackURL: '/auth/verify-email',
+        email: email.value,
+      },
+      method: 'POST',
+    });
+
+    toast.add({
+      color: 'success',
+      description: 'Eine neue Bestätigungs-E-Mail wurde gesendet.',
+      title: 'E-Mail gesendet',
+    });
+
+    startCooldown(cooldownSeconds.value);
+  } catch {
+    toast.add({
+      color: 'error',
+      description: 'Die E-Mail konnte nicht gesendet werden. Bitte versuche es später erneut.',
+      title: 'Fehler',
+    });
+  } finally {
+    resending.value = false;
+  }
+}
+
+function startCooldown(seconds: number): void {
+  resendCooldown.value = seconds;
+  if (cooldownInterval) clearInterval(cooldownInterval);
+  cooldownInterval = setInterval(() => {
+    resendCooldown.value--;
+    if (resendCooldown.value <= 0) {
+      if (cooldownInterval) clearInterval(cooldownInterval);
+      cooldownInterval = null;
+    }
+  }, 1000);
+}
+
+// ============================================================================
+// Lifecycle
+// ============================================================================
+onMounted(async () => {
+  // Fetch dynamic cooldown configuration from backend
+  try {
+    const features = await $fetch<Record<string, boolean | number | string[]>>(`${apiBase}/features`);
+    if (typeof features?.resendCooldownSeconds === 'number') {
+      cooldownSeconds.value = features.resendCooldownSeconds;
+    }
+  } catch {
+    // Use default cooldown if features endpoint is unavailable
+  }
+
+  if (token.value) {
+    await verifyEmailWithToken(token.value);
+  } else if (route.query.fromRegister === 'true') {
+    // Email was just sent during registration, start initial cooldown
+    startCooldown(cooldownSeconds.value);
+  }
+});
+
+onUnmounted(() => {
+  if (cooldownInterval) clearInterval(cooldownInterval);
+});
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <!-- Verifying state: Token verification in progress -->
+    <template v-if="verifying">
+      <div class="flex flex-col items-center gap-6 py-4">
+        <UIcon name="i-lucide-loader-circle" class="size-16 animate-spin text-primary" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">E-Mail wird verifiziert...</h2>
+          <p class="mt-2 text-sm text-muted">Bitte warte einen Moment.</p>
+        </div>
+      </div>
+    </template>
+
+    <!-- Success state: Email verified -->
+    <template v-else-if="verified">
+      <div class="flex flex-col items-center gap-6 py-4">
+        <UIcon name="i-lucide-check-circle" class="size-16 text-success" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">E-Mail bestätigt</h2>
+          <p class="mt-2 text-sm text-muted">Deine E-Mail-Adresse wurde erfolgreich verifiziert. Du kannst dich jetzt anmelden.</p>
+        </div>
+        <UButton block to="/auth/login">Jetzt anmelden</UButton>
+      </div>
+    </template>
+
+    <!-- Error state: Verification failed -->
+    <template v-else-if="verifyError">
+      <div class="flex flex-col items-center gap-6 py-4">
+        <UIcon name="i-lucide-x-circle" class="size-16 text-error" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">Verifizierung fehlgeschlagen</h2>
+          <p class="mt-2 text-sm text-muted">{{ verifyError }}</p>
+        </div>
+
+        <div class="flex w-full flex-col gap-3">
+          <UButton v-if="email" block :color="resendCooldown > 0 ? 'neutral' : 'primary'" :disabled="resendCooldown > 0" :loading="resending" :variant="resendCooldown > 0 ? 'outline' : 'solid'" @click="resendVerificationEmail">
+            {{ resendCooldown > 0 ? `Neue E-Mail senden (${resendCooldown}s)` : 'Neue E-Mail senden' }}
+          </UButton>
+          <UButton block variant="outline" color="neutral" to="/auth/login">Zurück zur Anmeldung</UButton>
+        </div>
+      </div>
+    </template>
+
+    <!-- Pending state: Waiting for verification (from register page) -->
+    <template v-else>
+      <div class="flex flex-col items-center gap-6 py-4">
+        <UIcon name="i-lucide-mail-check" class="size-16 text-primary" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">E-Mail bestätigen</h2>
+          <p class="mt-2 text-sm text-muted">
+            Wir haben eine Bestätigungs-E-Mail an
+            <strong v-if="email">{{ email }}</strong>
+            <span v-else>deine E-Mail-Adresse</span>
+            gesendet.
+          </p>
+          <p class="mt-2 text-sm text-muted">Bitte klicke auf den Link in der E-Mail, um dein Konto zu aktivieren.</p>
+        </div>
+
+        <UAlert color="neutral" icon="i-lucide-info" title="Keine E-Mail erhalten?" variant="subtle">
+          <template #description>
+            <ul class="mt-1 list-inside list-disc text-sm">
+              <li>Prüfe deinen Spam-Ordner</li>
+              <li>Stelle sicher, dass die E-Mail-Adresse korrekt ist</li>
+            </ul>
+          </template>
+        </UAlert>
+
+        <div class="flex w-full flex-col gap-3">
+          <UButton v-if="email" block :color="resendCooldown > 0 ? 'neutral' : 'primary'" :disabled="resendCooldown > 0" :loading="resending" :variant="resendCooldown > 0 ? 'subtle' : 'outline'" @click="resendVerificationEmail">
+            {{ resendCooldown > 0 ? `Bestätigungs-E-Mail erneut senden (${resendCooldown}s)` : 'Bestätigungs-E-Mail erneut senden' }}
+          </UButton>
+          <UButton block variant="outline" color="neutral" to="/auth/login">Zurück zur Anmeldung</UButton>
+        </div>
+      </div>
+    </template>
+  </UPageCard>
+</template>

package/nuxt-base-template/nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
   // ============================================================================
   // Bug Reporting (Linear Integration via @lenne.tech/bug.lt)
   // ============================================================================
+  // @ts-expect-error bug.lt module config - module temporarily disabled
   bug: {
     enabled: process.env.APP_ENV !== 'production',
     linearApiKey: process.env.LINEAR_API_KEY,
@@ -60,6 +61,16 @@ export default defineNuxtConfig({
     provider: 'ipx',
   },
 
+  // ============================================================================
+  // Icon Configuration
+  // ============================================================================
+  icon: {
+    // Ensure dynamically rendered icons (e.g., inside v-for) are included in the bundle
+    clientBundle: {
+      icons: ['lucide:trash', 'lucide:key', 'lucide:copy'],
+    },
+  },
+
   // ============================================================================
   // Auto-imports
   // ============================================================================

package/nuxt-base-template/package-lock.json

@@ -10,17 +10,19 @@
         "@better-auth/passkey": "1.4.10",
         "@hey-api/client-fetch": "0.13.1",
         "@lenne.tech/bug.lt": "latest",
-        "@lenne.tech/nuxt-extensions": "1.1.0",
+        "@lenne.tech/nuxt-extensions": "1.2.7",
         "@nuxt/image": "2.0.0",
         "@nuxt/ui": "4.3.0",
         "@pinia/nuxt": "0.11.3",
         "@vueuse/nuxt": "14.1.0",
         "better-auth": "1.4.10",
+        "qrcode": "1.5.4",
         "tus-js-client": "4.3.1",
         "valibot": "1.2.0"
       },
       "devDependencies": {
         "@hey-api/openapi-ts": "0.90.3",
+        "@iconify-json/lucide": "1.2.88",
         "@nuxt/devtools": "3.1.1",
         "@nuxt/test-utils": "3.23.0",
         "@nuxtjs/color-mode": "4.0.0",
@@ -30,6 +32,7 @@
         "@tailwindcss/typography": "0.5.19",
         "@tailwindcss/vite": "4.1.18",
         "@types/node": "25.0.6",
+        "@types/qrcode": "1.5.6",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vue/test-utils": "^2.4.6",
         "dayjs-nuxt": "2.1.11",
@@ -1328,6 +1331,16 @@
         "typescript": ">=5.5.3"
       }
     },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.2.88",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.88.tgz",
+      "integrity": "sha512-QBJq+VSj3yHXoMgf+1I4guUhXA+tpxzAt46LJdTSFN6UKy254GstTh+P/a6GD4Bvyi1fCAfi5hS/yCmu0w3mNw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/collections": {
       "version": "1.0.638",
       "license": "MIT",
@@ -2337,12 +2350,12 @@
       }
     },
     "node_modules/@lenne.tech/nuxt-extensions": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@lenne.tech/nuxt-extensions/-/nuxt-extensions-1.1.0.tgz",
-      "integrity": "sha512-P2PHOejJCql8Cksqym+ZceDv6lqzQvcFavfrjdZyDcNBSy8Ee9xE7AMPRrVmnVcZAqF422A+fjpGVQLt+w42pw==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@lenne.tech/nuxt-extensions/-/nuxt-extensions-1.2.7.tgz",
+      "integrity": "sha512-NgReTI9b/7GDiBFBkMyxbNlcyIbGK4MOibEar8E0HLs+GScpVXON0vBvZ9f4JDAhrI9MvGXDjH17hRqq8NwXvw==",
       "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "4.2.2"
+        "@nuxt/kit": "4.3.0"
       },
       "peerDependencies": {
         "@better-auth/passkey": ">=1.0.0",
@@ -2367,12 +2380,12 @@
       }
     },
     "node_modules/@lenne.tech/nuxt-extensions/node_modules/@nuxt/kit": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.2.tgz",
-      "integrity": "sha512-ZAgYBrPz/yhVgDznBNdQj2vhmOp31haJbO0I0iah/P9atw+OHH7NJLUZ3PK+LOz/0fblKTN1XJVSi8YQ1TQ0KA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.0.tgz",
+      "integrity": "sha512-cD/0UU9RQmlnTbmyJTDyzN8f6CzpziDLv3tFQCnwl0Aoxt3KmFu4k/XA4Sogxqj7jJ/3cdX1kL+Lnsh34sxcQQ==",
       "license": "MIT",
       "dependencies": {
-        "c12": "^3.3.2",
+        "c12": "^3.3.3",
         "consola": "^3.4.2",
         "defu": "^6.1.4",
         "destr": "^2.0.5",
@@ -2389,8 +2402,8 @@
         "scule": "^1.3.0",
         "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
-        "ufo": "^1.6.1",
-        "unctx": "^2.4.1",
+        "ufo": "^1.6.3",
+        "unctx": "^2.5.0",
         "untyped": "^2.0.0"
       },
       "engines": {
@@ -7185,6 +7198,16 @@
       "version": "7.0.3",
       "license": "MIT"
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "license": "MIT"
@@ -8556,6 +8579,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelize": {
       "version": "1.0.1",
       "dev": true,
@@ -9341,6 +9373,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.6.0",
       "dev": true,
@@ -9445,6 +9486,12 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "license": "MIT",
@@ -9981,6 +10028,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/fontaine": {
       "version": "0.7.0",
       "license": "MIT",
@@ -11580,6 +11640,18 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
@@ -13573,6 +13645,42 @@
         }
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "license": "BlueOak-1.0.0"
@@ -13656,6 +13764,15 @@
       "version": "1.0.1",
       "license": "MIT"
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "license": "MIT",
@@ -13784,6 +13901,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "funding": [
@@ -14526,6 +14652,90 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "funding": [
@@ -14722,6 +14932,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "license": "MIT"
@@ -15118,6 +15334,12 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "license": "MIT"
@@ -17617,6 +17839,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",

package/nuxt-base-template/package.json

@@ -46,17 +46,19 @@
     "@better-auth/passkey": "1.4.10",
     "@hey-api/client-fetch": "0.13.1",
     "@lenne.tech/bug.lt": "latest",
-    "@lenne.tech/nuxt-extensions": "1.1.0",
+    "@lenne.tech/nuxt-extensions": "1.2.7",
     "@nuxt/image": "2.0.0",
     "@nuxt/ui": "4.3.0",
     "@pinia/nuxt": "0.11.3",
     "@vueuse/nuxt": "14.1.0",
     "better-auth": "1.4.10",
+    "qrcode": "1.5.4",
     "tus-js-client": "4.3.1",
     "valibot": "1.2.0"
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "0.90.3",
+    "@iconify-json/lucide": "1.2.88",
     "@nuxt/devtools": "3.1.1",
     "@nuxt/test-utils": "3.23.0",
     "@nuxtjs/color-mode": "4.0.0",
@@ -66,6 +68,7 @@
     "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.1.18",
     "@types/node": "25.0.6",
+    "@types/qrcode": "1.5.6",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "^2.4.6",
     "dayjs-nuxt": "2.1.11",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "license": "MIT",
   "author": "lenne.Tech GmbH",