create-nuxt-base 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.1.0](https://github.com/lenneTech/nuxt-base-starter/compare/v2.0.0...v2.1.0) (2026-01-24)
+
+
+### Features
+
+* **tests, i18n:** add test infrastructure and error translation integration ([f8aff01](https://github.com/lenneTech/nuxt-base-starter/commit/f8aff01b5c763ea54cee270e10a1a29e2bece867))
+
 ## [2.0.0](https://github.com/lenneTech/nuxt-base-starter/compare/v1.2.0...v2.0.0) (2026-01-24)
 
 

package/nuxt-base-template/.github/workflows/test.yml

@@ -0,0 +1,90 @@
+name: Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  unit-tests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Run unit tests with coverage
+        run: npm run test:unit:coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 7
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linter
+        run: npm run lint
+
+      - name: Check formatting
+        run: npm run format:check
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [unit-tests, lint]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: .output/
+          retention-days: 7

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

@@ -2,11 +2,6 @@
 // ============================================================================
 // Imports
 // ============================================================================
-import type { FormSubmitEvent } from '@nuxt/ui';
-import type { InferOutput } from 'valibot';
-
-import * as v from 'valibot';
-
 import ModalBackupCodes from '~/components/Modal/ModalBackupCodes.vue';
 
 // ============================================================================
@@ -39,21 +34,10 @@ const passkeyLoading = ref<boolean>(false);
 const newPasskeyName = ref<string>('');
 const showAddPasskey = ref<boolean>(false);
 
-// Form states for UForm (required for proper data binding)
-const enable2FAForm = reactive({ password: '' });
-const disable2FAForm = reactive({ password: '' });
-const totpForm = reactive({ code: '' });
-
-const passwordSchema = v.object({
-  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(1, 'Passwort ist erforderlich')),
-});
-
-const totpSchema = v.object({
-  code: v.pipe(v.string('Code ist erforderlich'), v.length(6, 'Code muss 6 Ziffern haben')),
-});
-
-type PasswordSchema = InferOutput<typeof passwordSchema>;
-type TotpSchema = InferOutput<typeof totpSchema>;
+// Form states - using reactive for direct v-model binding
+const enable2FAPassword = ref('');
+const disable2FAPassword = ref('');
+const totpCode = ref('');
 
 // ============================================================================
 // Lifecycle Hooks
@@ -130,12 +114,21 @@ async function deletePasskey(id: string): Promise<void> {
   }
 }
 
-async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+async function disable2FA(): Promise<void> {
+  if (!disable2FAPassword.value) {
+    toast.add({
+      color: 'error',
+      description: 'Passwort ist erforderlich',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.disable({
-      password: payload.data.password,
+      password: disable2FAPassword.value,
     });
 
     if (error) {
@@ -159,18 +152,27 @@ async function disable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<voi
     });
 
     show2FADisable.value = false;
-    disable2FAForm.password = '';
+    disable2FAPassword.value = '';
   } finally {
     loading.value = false;
   }
 }
 
-async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void> {
+async function enable2FA(): Promise<void> {
+  if (!enable2FAPassword.value) {
+    toast.add({
+      color: 'error',
+      description: 'Passwort ist erforderlich',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { data, error } = await authClient.twoFactor.enable({
-      password: payload.data.password,
+      password: enable2FAPassword.value,
     });
 
     if (error) {
@@ -185,7 +187,7 @@ async function enable2FA(payload: FormSubmitEvent<PasswordSchema>): Promise<void
     totpUri.value = data?.totpURI ?? '';
     backupCodes.value = data?.backupCodes ?? [];
     showTotpSetup.value = true;
-    enable2FAForm.password = '';
+    enable2FAPassword.value = '';
   } finally {
     loading.value = false;
   }
@@ -218,12 +220,21 @@ async function openBackupCodesModal(codes: string[] = []): Promise<void> {
   await modal.open();
 }
 
-async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
+async function verifyTotp(): Promise<void> {
+  if (!totpCode.value || totpCode.value.length !== 6) {
+    toast.add({
+      color: 'error',
+      description: 'Code muss 6 Ziffern haben',
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     const { error } = await authClient.twoFactor.verifyTotp({
-      code: payload.data.code,
+      code: totpCode.value,
     });
 
     if (error) {
@@ -247,7 +258,7 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
     });
 
     showTotpSetup.value = false;
-    totpForm.code = '';
+    totpCode.value = '';
     await openBackupCodesModal(backupCodes.value);
   } finally {
     loading.value = false;
@@ -288,12 +299,12 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </div>
 
         <template v-if="!is2FAEnabled && !showTotpSetup">
-          <UForm :schema="passwordSchema" :state="enable2FAForm" class="space-y-4" @submit="enable2FA">
-            <UFormField label="Passwort bestätigen" name="password">
-              <UInput v-model="enable2FAForm.password" type="password" placeholder="Dein Passwort" />
+          <form class="space-y-4" @submit.prevent="enable2FA">
+            <UFormField label="Passwort bestätigen" name="password" class="w-full">
+              <UInput v-model="enable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
             </UFormField>
             <UButton type="submit" :loading="loading"> 2FA aktivieren </UButton>
-          </UForm>
+          </form>
         </template>
 
         <template v-if="showTotpSetup">
@@ -304,15 +315,15 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
               <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" />
             </div>
 
-            <UForm :schema="totpSchema" :state="totpForm" class="space-y-4" @submit="verifyTotp">
-              <UFormField label="Verifizierungscode" name="code">
-                <UInput v-model="totpForm.code" placeholder="000000" class="text-center font-mono" />
+            <form class="space-y-4" @submit.prevent="verifyTotp">
+              <UFormField label="Verifizierungscode" name="code" class="w-full">
+                <UInput v-model="totpCode" placeholder="000000" class="w-full text-center font-mono" />
               </UFormField>
               <div class="flex gap-2">
                 <UButton type="submit" :loading="loading"> Verifizieren </UButton>
                 <UButton variant="outline" color="neutral" @click="showTotpSetup = false"> Abbrechen </UButton>
               </div>
-            </UForm>
+            </form>
           </div>
         </template>
 
@@ -324,16 +335,16 @@ async function verifyTotp(payload: FormSubmitEvent<TotpSchema>): Promise<void> {
         </template>
 
         <template v-if="show2FADisable">
-          <UForm :schema="passwordSchema" :state="disable2FAForm" class="space-y-4" @submit="disable2FA">
+          <form class="space-y-4" @submit.prevent="disable2FA">
             <UAlert color="warning" icon="i-lucide-alert-triangle"> 2FA zu deaktivieren verringert die Sicherheit deines Kontos. </UAlert>
-            <UFormField label="Passwort bestätigen" name="password">
-              <UInput v-model="disable2FAForm.password" type="password" placeholder="Dein Passwort" />
+            <UFormField label="Passwort bestätigen" name="password" class="w-full">
+              <UInput v-model="disable2FAPassword" type="password" placeholder="Dein Passwort" class="w-full" />
             </UFormField>
             <div class="flex gap-2">
               <UButton type="submit" color="error" :loading="loading"> 2FA deaktivieren </UButton>
               <UButton variant="outline" color="neutral" @click="show2FADisable = false"> Abbrechen </UButton>
             </div>
-          </UForm>
+          </form>
         </template>
       </div>
     </UCard>

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

@@ -12,6 +12,7 @@ import * as v from 'valibot';
 // ============================================================================
 const toast = useToast();
 const { signIn, setUser, isLoading, validateSession, authenticateWithPasskey } = useLtAuth();
+const { translateError } = useLtErrorTranslation();
 
 // ============================================================================
 // Page Meta
@@ -114,10 +115,11 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     // Check for error in response
     if ('error' in result && result.error) {
+      const errorMessage = (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen';
       toast.add({
         color: 'error',
-        description: (result.error as { message?: string }).message || 'Anmeldung fehlgeschlagen',
-        title: 'Fehler',
+        description: translateError(errorMessage),
+        title: 'Anmeldung fehlgeschlagen',
       });
       return;
     }

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

@@ -2,9 +2,6 @@
 // ============================================================================
 // Imports
 // ============================================================================
-import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
-import type { InferOutput } from 'valibot';
-
 import * as v from 'valibot';
 
 // ============================================================================
@@ -27,36 +24,13 @@ const loading = ref<boolean>(false);
 const showPasskeyPrompt = ref<boolean>(false);
 const passkeyLoading = ref<boolean>(false);
 
-const fields: AuthFormField[] = [
-  {
-    label: 'Name',
-    name: 'name',
-    placeholder: 'Name eingeben',
-    required: true,
-    type: 'text',
-  },
-  {
-    label: 'E-Mail',
-    name: 'email',
-    placeholder: 'E-Mail eingeben',
-    required: true,
-    type: 'email',
-  },
-  {
-    label: 'Passwort',
-    name: 'password',
-    placeholder: 'Passwort eingeben',
-    required: true,
-    type: 'password',
-  },
-  {
-    label: 'Passwort bestätigen',
-    name: 'confirmPassword',
-    placeholder: 'Passwort wiederholen',
-    required: true,
-    type: 'password',
-  },
-];
+// Form state - using refs for direct v-model binding
+const formState = reactive({
+  name: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+});
 
 const schema = v.pipe(
   v.object({
@@ -71,20 +45,30 @@ const schema = v.pipe(
   ),
 );
 
-type Schema = InferOutput<typeof schema>;
-
 // ============================================================================
 // Functions
 // ============================================================================
-async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+async function onSubmit(): Promise<void> {
+  // Validate
+  const result = v.safeParse(schema, formState);
+  if (!result.success) {
+    const firstError = result.issues[0];
+    toast.add({
+      color: 'error',
+      description: firstError.message,
+      title: 'Validierungsfehler',
+    });
+    return;
+  }
+
   loading.value = true;
 
   try {
     // Step 1: Sign up
     const signUpResult = await signUp.email({
-      email: payload.data.email,
-      name: payload.data.name,
-      password: payload.data.password,
+      email: formState.email,
+      name: formState.name,
+      password: formState.password,
     });
 
     const signUpError = 'error' in signUpResult ? signUpResult.error : null;
@@ -100,8 +84,8 @@ async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
 
     // Step 2: Sign in to create session (required for passkey registration)
     const signInResult = await signIn.email({
-      email: payload.data.email,
-      password: payload.data.password,
+      email: formState.email,
+      password: formState.password,
     });
 
     const signInError = 'error' in signInResult ? signInResult.error : null;
@@ -168,25 +152,65 @@ async function skipPasskey(): Promise<void> {
 <template>
   <UPageCard class="w-md" variant="naked">
     <template v-if="!showPasskeyPrompt">
-      <UAuthForm
-        :schema="schema"
-        title="Registrieren"
-        icon="i-lucide-user-plus"
-        :fields="fields"
-        :loading="loading"
-        :submit="{
-          label: 'Konto erstellen',
-          block: true,
-        }"
-        @submit="onSubmit"
-      >
-        <template #footer>
-          <p class="text-center text-sm text-muted">
-            Bereits ein Konto?
-            <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
-          </p>
-        </template>
-      </UAuthForm>
+      <div class="flex flex-col items-center gap-4">
+        <UIcon name="i-lucide-user-plus" class="size-12 text-primary" />
+        <h1 class="text-2xl font-semibold">Registrieren</h1>
+      </div>
+
+      <form class="mt-6 flex flex-col gap-4" @submit.prevent="onSubmit">
+        <UFormField label="Name" name="name" required class="w-full">
+          <UInput
+            v-model="formState.name"
+            name="name"
+            type="text"
+            placeholder="Name eingeben"
+            autocomplete="name"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="E-Mail" name="email" required class="w-full">
+          <UInput
+            v-model="formState.email"
+            name="email"
+            type="email"
+            placeholder="E-Mail eingeben"
+            autocomplete="email"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort" name="password" required class="w-full">
+          <UInput
+            v-model="formState.password"
+            name="password"
+            type="password"
+            placeholder="Passwort eingeben"
+            autocomplete="new-password"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Passwort bestätigen" name="confirmPassword" required class="w-full">
+          <UInput
+            v-model="formState.confirmPassword"
+            name="confirmPassword"
+            type="password"
+            placeholder="Passwort wiederholen"
+            autocomplete="new-password"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UButton type="submit" block :loading="loading">
+          Konto erstellen
+        </UButton>
+      </form>
+
+      <p class="mt-4 text-center text-sm text-muted">
+        Bereits ein Konto?
+        <ULink to="/auth/login" class="text-primary font-medium">Anmelden</ULink>
+      </p>
     </template>
 
     <template v-else>

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

@@ -73,6 +73,10 @@ export default defineNuxtConfig({
   ltExtensions: {
     auth: {
       enabled: true,
+      // baseURL is used in production mode for cross-origin API requests
+      // In dev mode, Nuxt proxy is used (baseURL is ignored, requests go through /api/iam)
+      // In production, requests go directly to baseURL + basePath (e.g., https://api.example.com/iam)
+      baseURL: process.env.API_URL || 'http://localhost:3000',
       basePath: '/iam',
       loginPath: '/auth/login',
       twoFactorRedirectPath: '/auth/2fa',
@@ -184,11 +188,19 @@ export default defineNuxtConfig({
     plugins: [tailwindcss()],
     server: {
       proxy: {
+        // IAM proxy via /api prefix (nuxt-extensions adds /api in dev mode)
+        // Must be before /api to match more specifically
+        '/api/iam': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+        // API proxy - no rewrite, backend expects /api/... paths
         '/api': {
           target: 'http://localhost:3000',
           changeOrigin: true,
-          rewrite: (path: string) => path.replace(/^\/api/, ''),
         },
+        // IAM proxy for direct BetterAuth endpoints (SSR mode)
         '/iam': {
           target: 'http://localhost:3000',
           changeOrigin: true,