create-nuxt-base 0.3.16 → 1.0.2

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const loading = ref<boolean>(false);
+const passkeyLoading = ref<boolean>(false);
+
+const fields: AuthFormField[] = [
+  {
+    label: 'E-Mail',
+    name: 'email',
+    placeholder: 'E-Mail eingeben',
+    required: true,
+    type: 'email',
+  },
+  {
+    label: 'Passwort',
+    name: 'password',
+    placeholder: 'Passwort eingeben',
+    required: true,
+    type: 'password',
+  },
+];
+
+const schema = v.object({
+  email: v.pipe(v.string('E-Mail ist erforderlich'), v.email('Bitte eine gültige E-Mail eingeben')),
+  password: v.pipe(v.string('Passwort ist erforderlich'), v.minLength(5, 'Mindestens 5 Zeichen erforderlich')),
+});
+
+type Schema = InferOutput<typeof schema>;
+
+async function onPasskeyLogin(): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.signIn.passkey();
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey-Anmeldung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    await navigateTo('/app');
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.signIn.email({
+      email: payload.data.email,
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Anmeldung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    await navigateTo('/app');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <UAuthForm
+      :schema="schema"
+      title="Anmelden"
+      icon="i-lucide-user"
+      :fields="fields"
+      :loading="loading"
+      :submit="{
+        label: 'Anmelden',
+        block: true,
+      }"
+      @submit="onSubmit"
+    >
+      <template #password-hint>
+        <ULink to="/auth/forgot-password" class="text-primary font-medium" tabindex="-1">Passwort vergessen?</ULink>
+      </template>
+
+      <template #footer>
+        <div class="flex flex-col gap-4">
+          <USeparator label="oder" />
+
+          <UButton block color="neutral" variant="outline" icon="i-lucide-key" :loading="passkeyLoading" @click="onPasskeyLogin"> Mit Passkey anmelden </UButton>
+
+          <p class="text-center text-sm text-muted">
+            Noch kein Konto?
+            <ULink to="/auth/register" class="text-primary font-medium">Registrieren</ULink>
+          </p>
+        </div>
+      </template>
+    </UAuthForm>
+  </UPageCard>
+</template>

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+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',
+  },
+];
+
+const schema = 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'],
+  ),
+);
+
+type Schema = InferOutput<typeof schema>;
+
+async function addPasskey(): Promise<void> {
+  passkeyLoading.value = true;
+
+  try {
+    const { error } = await authClient.passkey.addPasskey({
+      name: 'Mein Gerät',
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passkey konnte nicht hinzugefügt werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Passkey wurde erfolgreich hinzugefügt',
+      title: 'Erfolg',
+    });
+
+    await navigateTo('/app');
+  } finally {
+    passkeyLoading.value = false;
+  }
+}
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.signUp.email({
+      email: payload.data.email,
+      name: payload.data.name,
+      password: payload.data.password,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Registrierung fehlgeschlagen',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    toast.add({
+      color: 'success',
+      description: 'Dein Konto wurde erfolgreich erstellt',
+      title: 'Willkommen!',
+    });
+
+    showPasskeyPrompt.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function skipPasskey(): Promise<void> {
+  await navigateTo('/app');
+}
+</script>
+
+<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>
+    </template>
+
+    <template v-else>
+      <div class="flex flex-col items-center gap-6">
+        <UIcon name="i-lucide-key" class="size-16 text-primary" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">Passkey hinzufügen?</h2>
+          <p class="mt-2 text-sm text-muted">Mit einem Passkey kannst du dich schnell und sicher ohne Passwort anmelden.</p>
+        </div>
+
+        <div class="flex w-full flex-col gap-3">
+          <UButton block :loading="passkeyLoading" @click="addPasskey"> Passkey hinzufügen </UButton>
+          <UButton block variant="outline" color="neutral" @click="skipPasskey"> Später einrichten </UButton>
+        </div>
+      </div>
+    </template>
+  </UPageCard>
+</template>

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+import { authClient } from '~/lib/auth-client';
+
+// ============================================================================
+// Composables
+// ============================================================================
+const route = useRoute();
+const toast = useToast();
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const token = computed<string>(() => {
+  const queryToken = route.query.token;
+  return typeof queryToken === 'string' ? queryToken : '';
+});
+
+const isTokenValid = computed<boolean>(() => token.value.length > 0);
+const loading = ref<boolean>(false);
+const resetSuccess = ref<boolean>(false);
+
+const fields: AuthFormField[] = [
+  {
+    label: 'Neues Passwort',
+    name: 'password',
+    placeholder: 'Neues Passwort eingeben',
+    required: true,
+    type: 'password',
+  },
+  {
+    label: 'Passwort bestätigen',
+    name: 'confirmPassword',
+    placeholder: 'Passwort wiederholen',
+    required: true,
+    type: 'password',
+  },
+];
+
+const schema = v.pipe(
+  v.object({
+    confirmPassword: v.pipe(v.string('Passwortbestätigung ist erforderlich'), v.minLength(8, 'Mindestens 8 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'],
+  ),
+);
+
+type Schema = InferOutput<typeof schema>;
+
+// ============================================================================
+// Lifecycle Hooks
+// ============================================================================
+onMounted(() => {
+  if (!isTokenValid.value) {
+    toast.add({
+      color: 'error',
+      description: 'Der Link zum Zurücksetzen des Passworts ist ungültig oder fehlt.',
+      title: 'Ungültiger Link',
+    });
+  }
+});
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  loading.value = true;
+
+  try {
+    const { error } = await authClient.resetPassword({
+      newPassword: payload.data.password,
+      token: token.value,
+    });
+
+    if (error) {
+      toast.add({
+        color: 'error',
+        description: error.message || 'Passwort konnte nicht zurückgesetzt werden',
+        title: 'Fehler',
+      });
+      return;
+    }
+
+    resetSuccess.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <template v-if="resetSuccess">
+      <div class="flex flex-col items-center gap-6">
+        <UIcon name="i-lucide-check-circle" class="size-16 text-success" />
+        <div class="text-center">
+          <h2 class="text-xl font-semibold">Passwort zurückgesetzt</h2>
+          <p class="mt-2 text-sm text-muted">Dein Passwort wurde erfolgreich geändert. Du kannst dich jetzt mit deinem neuen Passwort anmelden.</p>
+        </div>
+
+        <UButton to="/auth/login" block> Zur Anmeldung </UButton>
+      </div>
+    </template>
+
+    <template v-else>
+      <UAlert
+        v-if="!isTokenValid"
+        color="error"
+        description="Der Link zum Zurücksetzen des Passworts ist ungültig oder fehlt. Bitte fordere einen neuen Link an."
+        icon="i-lucide-alert-triangle"
+        title="Ungültiger Link"
+        class="mb-4"
+      />
+
+      <UAuthForm
+        :schema="schema"
+        title="Neues Passwort"
+        icon="i-lucide-shield-check"
+        :fields="fields"
+        :loading="loading"
+        :submit="{
+          label: 'Passwort speichern',
+          block: true,
+          disabled: !isTokenValid,
+        }"
+        @submit="onSubmit"
+      >
+        <template #footer>
+          <p class="text-center text-sm text-muted">
+            <ULink to="/auth/forgot-password" class="text-primary font-medium"> Neuen Link anfordern </ULink>
+          </p>
+        </template>
+      </UAuthForm>
+    </template>
+  </UPageCard>
+</template>

package/nuxt-base-template/app/pages/index.vue

@@ -1,5 +1,142 @@
+<script lang="ts" setup>
+// ============================================================================
+// Composables
+// ============================================================================
+const config = useRuntimeConfig();
+
+// ============================================================================
+// Variables
+// ============================================================================
+const features: Array<{
+  color: 'info' | 'primary' | 'secondary' | 'success';
+  description: string;
+  icon: string;
+  title: string;
+}> = [
+  {
+    color: 'primary',
+    description: 'Built with Vue 3 Composition API, TypeScript, and Nuxt 4 for modern development.',
+    icon: 'i-lucide-rocket',
+    title: 'Modern Stack',
+  },
+  {
+    color: 'secondary',
+    description: 'Pre-configured with Nuxt UI components, Tailwind CSS v4, and customizable themes.',
+    icon: 'i-lucide-palette',
+    title: 'UI Components',
+  },
+  {
+    color: 'success',
+    description: 'Built-in support for REST API integration with auto-generated types.',
+    icon: 'i-lucide-database',
+    title: 'API Ready',
+  },
+  {
+    color: 'info',
+    description: 'Form validation with VeeValidate and Valibot and state management with Pinia.',
+    icon: 'i-lucide-check-circle',
+    title: 'Production Ready',
+  },
+];
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+const isDevelopment = computed<boolean>(() => config.public.appEnv !== 'production');
+</script>
+
 <template>
-  <div class="flex h-screen items-center justify-center flex-col">
-    <h1 class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">Lenne Nuxt Starter</h1>
+  <div>
+    <!-- Hero Section -->
+    <div class="relative overflow-hidden">
+      <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
+        <div class="mx-auto max-w-3xl text-center">
+          <div class="mb-8 flex items-center justify-center gap-x-3">
+            <UBadge color="primary" variant="subtle" size="lg"> v4 </UBadge>
+            <UBadge color="neutral" variant="outline" size="lg"> Nuxt Starter Template </UBadge>
+          </div>
+          <h1 class="text-5xl font-bold tracking-tight text-neutral-900 dark:text-white sm:text-6xl lg:text-7xl">
+            Lenne Nuxt
+            <span class="block text-primary mt-2">Base Template</span>
+          </h1>
+          <p class="mt-8 text-lg leading-8 text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            A modern Nuxt 4 starter template with TypeScript, Nuxt UI components, and production-ready tools. Start building your next application with confidence.
+          </p>
+          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+            <UButton to="https://github.com/lenneTech/nuxt-base-starter" target="_blank" size="xl" icon="i-lucide-github" color="primary"> View on GitHub </UButton>
+            <UButton to="https://ui.nuxt.com" target="_blank" size="xl" variant="outline" color="neutral" trailing-icon="i-lucide-arrow-right"> Nuxt UI Docs </UButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Features Section -->
+    <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center mb-16">
+        <h2 class="text-3xl font-bold tracking-tight text-neutral-900 dark:text-white sm:text-4xl">Features</h2>
+        <p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">Everything you need to build modern web applications</p>
+      </div>
+
+      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        <UCard v-for="feature in features" :key="feature.title" class="hover:shadow-lg transition-shadow">
+          <template #header>
+            <div class="flex items-center gap-3">
+              <UBadge :icon="feature.icon" :color="feature.color" size="lg" square class="p-2" />
+              <h3 class="font-semibold text-neutral-900 dark:text-white">
+                {{ feature.title }}
+              </h3>
+            </div>
+          </template>
+          <p class="text-sm text-neutral-600 dark:text-neutral-400">
+            {{ feature.description }}
+          </p>
+        </UCard>
+      </div>
+    </div>
+
+    <!-- Getting Started Section -->
+    <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div class="space-y-8">
+        <UAlert
+          title="Getting Started"
+          description="Run 'npm run dev' to start the development server on port 3001. Check CLAUDE.md for detailed documentation."
+          icon="i-lucide-info"
+          color="primary"
+          variant="subtle"
+        />
+
+        <!-- Dev Examples Link (only in development) -->
+        <UCard v-if="isDevelopment" variant="outline" class="border-2 border-primary/20">
+          <template #header>
+            <div class="flex items-center gap-3">
+              <UBadge color="warning" variant="subtle" icon="i-lucide-flask-conical"> Development Only </UBadge>
+              <h3 class="font-semibold text-neutral-900 dark:text-white">Interactive Examples</h3>
+            </div>
+          </template>
+
+          <div class="space-y-4">
+            <p class="text-sm text-neutral-600 dark:text-neutral-400">
+              Explore interactive examples for all template components and composables. Perfect for learning and as a reference for new projects.
+            </p>
+            <div class="flex items-center gap-3">
+              <UButton to="/docs" icon="i-lucide-sparkles" trailing-icon="i-lucide-arrow-right" color="primary" size="md"> View Examples </UButton>
+              <p class="text-xs text-neutral-500 dark:text-neutral-500">This link is only visible in development mode</p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </div>
+
+    <!-- Footer Section -->
+    <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div class="text-center">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          Built with
+          <ULink to="https://nuxt.com" target="_blank" class="font-medium text-primary"> Nuxt 4 </ULink>
+          and
+          <ULink to="https://ui.nuxt.com" target="_blank" class="font-medium text-primary"> Nuxt UI </ULink>
+        </p>
+      </div>
+    </div>
   </div>
 </template>

package/nuxt-base-template/app/utils/crypto.ts

@@ -0,0 +1,13 @@
+/**
+ * Hashes a string using SHA256
+ * Uses the Web Crypto API which is available in all modern browsers
+ *
+ * @param message - The string to hash
+ * @returns The SHA256 hash as a lowercase hex string (64 characters)
+ */
+export async function sha256(message: string): Promise<string> {
+  const msgBuffer = new TextEncoder().encode(message);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+}

package/nuxt-base-template/docker-entrypoint.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+set -e
+
+# Check if node_modules exists and if package.json has changed
+PACKAGE_HASH_FILE="/app/.package-hash"
+CURRENT_HASH=$(md5sum /app/package.json /app/package-lock.json 2>/dev/null | md5sum | cut -d' ' -f1)
+
+if [ ! -d "/app/node_modules" ] || [ ! -f "$PACKAGE_HASH_FILE" ] || [ "$(cat $PACKAGE_HASH_FILE 2>/dev/null)" != "$CURRENT_HASH" ]; then
+    echo "Installing dependencies..."
+    npm ci
+    echo "$CURRENT_HASH" > "$PACKAGE_HASH_FILE"
+    echo "Dependencies installed successfully."
+else
+    echo "Dependencies are up to date."
+fi
+
+# Prepare Nuxt (generate types, etc.)
+echo "Preparing Nuxt..."
+npx nuxt prepare
+
+exec "$@"

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

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+});