create-nuxt-base 0.3.15 → 0.3.17

package/nuxt-base-template/app/assets/css/tailwind.css

@@ -1,98 +1,138 @@
 @import 'tailwindcss';
+@import '@nuxt/ui';
 
-@config "../../../tailwind.config.js";
-
-@plugin '@tailwindcss/typography';
-@plugin '@tailwindcss/forms';
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
+@custom-variant light (&:is(.light *));
 
-@theme {
-  --color-primary-50: #f3faf7;
-  --color-primary-100: #d6f1e7;
-  --color-primary-200: #ade2d0;
-  --color-primary-300: #7cccb3;
-  --color-primary-400: #57b39a;
-  --color-primary-500: #37957d;
-  --color-primary-600: #2a7765;
-  --color-primary-700: #256052;
-  --color-primary-800: #224d45;
-  --color-primary-900: #20413a;
-  --color-primary-950: #0d2621;
-  --color-primary: #57b39a;
-
-  --color-background: #ffffff;
-  --color-foreground: #000000;
-  --color-border: hsl(0 0% 0% / 0.5);
-  --color-hover: hsl(0 0% 100% / 0.2);
-  --color-active: hsl(0 0% 100% / 0.2);
-
+@theme static {
   --breakpoint-3xl: 2400px;
 
-  --button-radius: 24px;
-  --button-padding-y: 3px;
-  --button-padding-x: 16px;
-}
+  /* ============================================================================
+     NuxtUI Color Scales - Customize for your brand
+     Each semantic color requires a scale from 50 to 950
+     ========================================================================= */
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
+  /* Primary Color - Green (NuxtUI Default) */
+  --ui-color-primary-50: #f0fdf4;
+  --ui-color-primary-100: #dcfce7;
+  --ui-color-primary-200: #bbf7d0;
+  --ui-color-primary-300: #86efac;
+  --ui-color-primary-400: #4ade80;
+  --ui-color-primary-500: #22c55e;
+  --ui-color-primary-600: #16a34a;
+  --ui-color-primary-700: #15803d;
+  --ui-color-primary-800: #166534;
+  --ui-color-primary-900: #14532d;
+  --ui-color-primary-950: #052e16;
+
+  /* Secondary Color - Indigo */
+  --ui-color-secondary-50: #eef2ff;
+  --ui-color-secondary-100: #e0e7ff;
+  --ui-color-secondary-200: #c7d2fe;
+  --ui-color-secondary-300: #a5b4fc;
+  --ui-color-secondary-400: #818cf8;
+  --ui-color-secondary-500: #6366f1;
+  --ui-color-secondary-600: #4f46e5;
+  --ui-color-secondary-700: #4338ca;
+  --ui-color-secondary-800: #3730a3;
+  --ui-color-secondary-900: #312e81;
+  --ui-color-secondary-950: #1e1b4b;
+
+  /* Success Color - Emerald */
+  --ui-color-success-50: #ecfdf5;
+  --ui-color-success-100: #d1fae5;
+  --ui-color-success-200: #a7f3d0;
+  --ui-color-success-300: #6ee7b7;
+  --ui-color-success-400: #34d399;
+  --ui-color-success-500: #10b981;
+  --ui-color-success-600: #059669;
+  --ui-color-success-700: #047857;
+  --ui-color-success-800: #065f46;
+  --ui-color-success-900: #064e3b;
+  --ui-color-success-950: #022c22;
+
+  /* Info Color - Blue */
+  --ui-color-info-50: #eff6ff;
+  --ui-color-info-100: #dbeafe;
+  --ui-color-info-200: #bfdbfe;
+  --ui-color-info-300: #93c5fd;
+  --ui-color-info-400: #60a5fa;
+  --ui-color-info-500: #3b82f6;
+  --ui-color-info-600: #2563eb;
+  --ui-color-info-700: #1d4ed8;
+  --ui-color-info-800: #1e40af;
+  --ui-color-info-900: #1e3a8a;
+  --ui-color-info-950: #172554;
+
+  /* Warning Color - Amber */
+  --ui-color-warning-50: #fffbeb;
+  --ui-color-warning-100: #fef3c7;
+  --ui-color-warning-200: #fde68a;
+  --ui-color-warning-300: #fcd34d;
+  --ui-color-warning-400: #fbbf24;
+  --ui-color-warning-500: #f59e0b;
+  --ui-color-warning-600: #d97706;
+  --ui-color-warning-700: #b45309;
+  --ui-color-warning-800: #92400e;
+  --ui-color-warning-900: #78350f;
+  --ui-color-warning-950: #451a03;
+
+  /* Error Color - Red */
+  --ui-color-error-50: #fef2f2;
+  --ui-color-error-100: #fee2e2;
+  --ui-color-error-200: #fecaca;
+  --ui-color-error-300: #fca5a5;
+  --ui-color-error-400: #f87171;
+  --ui-color-error-500: #ef4444;
+  --ui-color-error-600: #dc2626;
+  --ui-color-error-700: #b91c1c;
+  --ui-color-error-800: #991b1b;
+  --ui-color-error-900: #7f1d1d;
+  --ui-color-error-950: #450a0a;
+
+  /* Neutral Color - Slate */
+  --ui-color-neutral-50: #f8fafc;
+  --ui-color-neutral-100: #f1f5f9;
+  --ui-color-neutral-200: #e2e8f0;
+  --ui-color-neutral-300: #cbd5e1;
+  --ui-color-neutral-400: #94a3b8;
+  --ui-color-neutral-500: #64748b;
+  --ui-color-neutral-600: #475569;
+  --ui-color-neutral-700: #334155;
+  --ui-color-neutral-800: #1e293b;
+  --ui-color-neutral-900: #0f172a;
+  --ui-color-neutral-950: #020617;
+
+  /* ============================================================================
+     NuxtUI Semantic Shortcuts
+     ========================================================================= */
+
+  --ui-primary: var(--ui-color-primary-500);
+  --ui-secondary: var(--ui-color-secondary-500);
+  --ui-success: var(--ui-color-success-500);
+  --ui-info: var(--ui-color-info-500);
+  --ui-warning: var(--ui-color-warning-500);
+  --ui-error: var(--ui-color-error-500);
+
+  /* ============================================================================
+     NuxtUI Global Settings
+     ========================================================================= */
 
-@layer base {
-  body {
-    @apply transition-colors duration-300;
-  }
-  h1 {
-    @apply text-[32px] leading-[140%] lg:text-[66px] lg:leading-[140%] font-bold;
-  }
-  h2 {
-    @apply text-[28px] leading-[140%] lg:text-[51px] lg:leading-[140%] font-semibold;
-  }
-  h3 {
-    @apply text-[21px] leading-[140%] lg:text-[39px] lg:leading-[140%] font-bold;
-  }
-  h4 {
-    @apply text-[18px] leading-[140%] lg:text-[30px] lg:leading-[140%] font-bold;
-  }
-  h5 {
-    @apply text-[15px] leading-[140%] lg:text-[23px] lg:leading-[140%] font-bold;
-  }
-  h6 {
-    @apply text-[16px] leading-[140%] lg:text-[18px] lg:leading-[140%] font-bold;
-  }
-  p {
-    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
-  }
-  small {
-    @apply text-[14px] leading-[140%] lg:text-[16px] lg:leading-[140%];
-  }
-  a {
-    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
-  }
-  button {
-    @apply text-[15px] leading-[140%] lg:text-[18px] lg:leading-[140%];
-  }
+  --ui-radius: 0.5rem;
 }
 
-html,
-body {
-  height: 100%;
+.dark {
+  /* Adjust primary color for dark mode */
+  --ui-primary: var(--ui-color-primary-400);
+  --ui-secondary: var(--ui-color-secondary-400);
+  --ui-success: var(--ui-color-success-400);
+  --ui-info: var(--ui-color-info-400);
+  --ui-warning: var(--ui-color-warning-400);
+  --ui-error: var(--ui-color-error-400);
 }
 
-#__nuxt {
-  height: 100%;
+html {
+  @apply scroll-pt-24;
 }

package/nuxt-base-template/app/components/Modal/ModalBase.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+// ============================================================================
+// Props & Emits
+// ============================================================================
+interface Props {
+  description?: string;
+  title?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  description: 'This is a base modal example using Nuxt UI. You can customize this component to fit your needs.',
+  title: 'Modal Example',
+});
+
+const emit = defineEmits<{
+  close: [result?: unknown];
+}>();
+
+// ============================================================================
+// Functions
+// ============================================================================
+function handleCancel(): void {
+  emit('close', false);
+}
+
+function handleConfirm(): void {
+  emit('close', true);
+}
+</script>
+
+<template>
+  <UModal :title="title" :description="description" :close="{ onClick: () => emit('close', false) }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          This modal demonstrates how to use the <code class="px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded text-xs">useOverlay</code> composable to open modals
+          programmatically.
+        </p>
+        <div class="rounded-lg bg-neutral-50 dark:bg-neutral-900 p-4">
+          <h4 class="text-sm font-medium text-neutral-900 dark:text-white mb-2">Key Features:</h4>
+          <ul class="space-y-2 text-sm text-neutral-600 dark:text-neutral-400">
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Programmatic control with useOverlay()</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Return values via emit('close')</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon name="i-lucide-check" class="size-4 mt-0.5 text-success shrink-0" />
+              <span>Fully typed props and emits</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <UButton color="neutral" variant="outline" @click="handleCancel"> Cancel </UButton>
+        <UButton color="primary" @click="handleConfirm"> Confirm </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/nuxt-base-template/app/components/Transition/TransitionSlide.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/components/Transition/TransitionSlideBottom.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/components/Transition/TransitionSlideRevert.vue

@@ -1,5 +1,3 @@
-<script setup lang="ts"></script>
-
 <template>
   <Transition
     enter-active-class="transition ease-out duration-500"

package/nuxt-base-template/app/composables/use-file.ts

@@ -1,8 +1,16 @@
-import { useFetch } from '@vueuse/core';
+interface FileInfo {
+  [key: string]: unknown;
+  filename: string;
+  id: string;
+  mimetype: string;
+  size: number;
+  url?: string;
+}
 
 export function useFile() {
   const { isValidMongoID } = useHelper();
-  async function getFileInfo(id: string | undefined): Promise<any> {
+
+  async function getFileInfo(id: string | undefined): Promise<FileInfo | null | string> {
     const config = useRuntimeConfig();
 
     if (!id) {
@@ -13,7 +21,15 @@ export function useFile() {
       return id;
     }
 
-    return useFetch<File>(config.public.apiUrl + '/files/info/' + id, { method: 'GET' });
+    try {
+      const response = await $fetch<FileInfo>(config.public.host + '/files/info/' + id, {
+        method: 'GET',
+      });
+      return response;
+    } catch (error) {
+      console.error('Error fetching file info:', error);
+      return null;
+    }
   }
 
   return { getFileInfo };

package/nuxt-base-template/app/composables/use-share.ts

@@ -1,18 +1,34 @@
-import ModalShare from '~/components/ModalShare.vue';
-import { useModal } from '~/composables/use-modal';
-
 export function useShare() {
   const route = useRoute();
 
-  function share(title?: string, text?: string, url?: string) {
+  async function share(title?: string, text?: string, url?: string) {
+    if (!process.client) {
+      return;
+    }
+
     if (window?.navigator?.share) {
-      window.navigator.share({
-        text: text ?? window.location.origin,
-        title: title,
-        url: url ?? route.fullPath,
-      });
+      try {
+        await window.navigator.share({
+          text: text ?? window.location.origin,
+          title: title,
+          url: url ?? route.fullPath,
+        });
+      } catch (error) {
+        console.error('Error sharing:', error);
+      }
     } else {
-      useModal().open({ component: ModalShare, data: { link: url ?? window.location.origin, name: window.name }, size: 'md' });
+      // Fallback: Copy to clipboard
+      try {
+        await navigator.clipboard.writeText(url ?? window.location.origin);
+        const toast = useToast();
+        toast.add({
+          color: 'success',
+          description: 'Der Link wurde in die Zwischenablage kopiert.',
+          title: 'Link kopiert',
+        });
+      } catch (error) {
+        console.error('Error copying to clipboard:', error);
+      }
     }
   }
 

package/nuxt-base-template/app/error.vue

@@ -1,49 +1,13 @@
 <script setup lang="ts">
-const props = defineProps({
-  error: Object,
-});
+import type { NuxtError } from '#app';
 
-console.error(props.error);
-const debugWord = ref<string>('');
-const { current } = useMagicKeys();
-
-watch(
-  () => current.values(),
-  () => {
-    if (current.values().next().value === 'escape') {
-      debugWord.value = '';
-      return;
-    }
-
-    if (debugWord.value === 'debug') {
-      return;
-    }
-
-    if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
-      debugWord.value += current.values().next().value;
-    }
-  },
-);
-
-const handleError = () => clearError({ redirect: '/' });
+defineProps<{
+  error: NuxtError;
+}>();
 </script>
 
 <template>
-  <NuxtLayout>
-    <div class="w-full min-h-screen flex flex-col justify-center items-center">
-      <div class="w-full flex flex-col items-center mb-20">
-        <h1 class="text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400">Oops!</h1>
-        <h2 v-if="error?.statusCode" class="text-3xl text-gray-600">
-          {{ error?.statusCode }}
-        </h2>
-      </div>
-
-      <pre v-if="debugWord === 'debug'" class="w-full max-w-3xl mb-5 mx-auto bg-black/80 text-white font-mono p-2 rounded-lg overflow-x-scroll">
-      {{ { error } }}
-    </pre
-      >
-
-      <BaseButton color="primary" appearance="outline" @click="handleError"> Zurück zur Startseite </BaseButton>
-    </div>
-  </NuxtLayout>
+  <UApp>
+    <UError :error="error" />
+  </UApp>
 </template>

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

@@ -1,8 +1,80 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui';
+
+const headerItems = computed<NavigationMenuItem[]>(() => [
+  {
+    label: 'Docs',
+    to: '#',
+  },
+  {
+    label: 'Components',
+    to: '#',
+  },
+  {
+    label: 'Figma',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Releases',
+    target: '_blank',
+    to: '#',
+  },
+]);
+
+const footerItems: NavigationMenuItem[] = [
+  {
+    label: 'Figma Kit',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Playground',
+    target: '_blank',
+    to: '#',
+  },
+  {
+    label: 'Releases',
+    target: '_blank',
+    to: '#',
+  },
+];
+</script>
 
 <template>
-  <div>
-    <NuxtLoadingIndicator />
-    <slot></slot>
+  <div class="flex flex-col min-h-screen">
+    <UHeader>
+      <template #title>
+        <UIcon name="i-lucide-code" class="text-primary" />
+      </template>
+
+      <UNavigationMenu :items="headerItems" />
+
+      <template #right>
+        <UColorModeButton />
+
+        <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+          <UButton color="neutral" variant="ghost" to="https://github.com/lenneTech/nuxt-base-starter" target="_blank" icon="i-simple-icons-github" aria-label="GitHub" />
+        </UTooltip>
+      </template>
+    </UHeader>
+    <UMain>
+      <slot></slot>
+    </UMain>
+    <USeparator icon="i-simple-icons-nuxtdotjs" type="dashed" class="h-px" />
+
+    <UFooter>
+      <template #left>
+        <p class="text-muted text-sm">Copyright © {{ new Date().getFullYear() }}</p>
+      </template>
+
+      <UNavigationMenu :items="footerItems" variant="link" />
+
+      <template #right>
+        <UButton icon="i-simple-icons-discord" color="neutral" variant="ghost" to="#" target="_blank" aria-label="Discord" />
+        <UButton icon="i-simple-icons-x" color="neutral" variant="ghost" to="#" target="_blank" aria-label="X" />
+        <UButton icon="i-simple-icons-github" color="neutral" variant="ghost" to="#" target="_blank" aria-label="GitHub" />
+      </template>
+    </UFooter>
   </div>
 </template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="min-h-screen flex justify-center items-center">
+    <slot></slot>
+  </div>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const fields: AuthFormField[] = [
+  {
+    label: 'Email',
+    name: 'email',
+    placeholder: 'Enter your email',
+    required: true,
+    type: 'email',
+  },
+];
+
+const schema = v.object({
+  email: v.pipe(v.string('Email is required'), v.email('Has to be a valid email address')),
+});
+
+type Schema = InferOutput<typeof schema>;
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  console.debug('Forgot password request for:', payload.data.email);
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <UAuthForm
+      :schema="schema"
+      title="Forgot password"
+      icon="i-heroicons-lock-closed"
+      :fields="fields"
+      loadingAuto
+      :submit="{
+        label: 'Continue',
+        block: true,
+      }"
+      @submit="onSubmit"
+    >
+      <template #footer>
+        Back to
+        <ULink to="/auth/login" class="text-primary font-medium" tabindex="-1">Sign In</ULink>
+      </template>
+    </UAuthForm>
+  </UPageCard>
+</template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// ============================================================================
+// Imports
+// ============================================================================
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import type { InferOutput } from 'valibot';
+
+import * as v from 'valibot';
+
+// ============================================================================
+// Page Meta
+// ============================================================================
+definePageMeta({
+  layout: 'slim',
+});
+
+// ============================================================================
+// Variables
+// ============================================================================
+const fields: AuthFormField[] = [
+  {
+    label: 'Email',
+    name: 'email',
+    placeholder: 'Enter your email',
+    required: true,
+    type: 'email',
+  },
+  {
+    label: 'Password',
+    name: 'password',
+    placeholder: 'Enter your password',
+    required: true,
+    type: 'password',
+  },
+];
+
+const schema = v.object({
+  email: v.pipe(v.string('Email is required'), v.email('Has to be a valid email address')),
+  password: v.pipe(v.string('Password is required'), v.minLength(5, 'Must be at least 5 characters')),
+});
+
+type Schema = InferOutput<typeof schema>;
+
+// ============================================================================
+// Functions
+// ============================================================================
+async function onSubmit(payload: FormSubmitEvent<Schema>): Promise<void> {
+  console.debug('Login request for:', payload.data.email);
+}
+</script>
+
+<template>
+  <UPageCard class="w-md" variant="naked">
+    <UAuthForm
+      :schema="schema"
+      title="Login"
+      icon="i-lucide-user"
+      :fields="fields"
+      loadingAuto
+      :submit="{
+        label: 'Log In',
+        block: true,
+      }"
+      @submit="onSubmit"
+    >
+      <template #password-hint>
+        <ULink to="/auth/forgot-password" class="text-primary font-medium" tabindex="-1">Forgot your password? </ULink>
+      </template>
+    </UAuthForm>
+  </UPageCard>
+</template>