create-nuxt-base 0.2.10 → 0.3.4

package/nuxt-base-template/postbuild.js

@@ -0,0 +1,12 @@
+import { execSync } from 'child_process';
+import * as path from 'path';
+const tslibPath = path.resolve('.output', 'server', 'node_modules', 'tslib');
+process.chdir(tslibPath);
+const command = 'npm pkg set "exports[.].import.node"="./tslib.es6.mjs"';
+try {
+  execSync(command, { stdio: 'inherit' });
+  console.debug('✅  Successfully ran postinstall script');
+} catch (error) {
+  console.error('❌  Error executing postinstall script: ', error);
+  process.exit(1);
+}

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

@@ -4,4 +4,4 @@
       <NuxtPage />
     </NuxtLayout>
   </div>
-</template>
+</template>

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

@@ -1,4 +1,52 @@
-@tailwind base;
+@import 'tailwindcss';
+
+@config "../../../tailwind.config.js";
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';
+
+@custom-variant dark (&:is(.dark *));
+
+@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);
+
+  --breakpoint-3xl: 2400px;
+}
+
+/*
+  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);
+  }
+}
 
 @layer base {
   body {
@@ -36,9 +84,6 @@
   }
 }
 
-@tailwind components;
-@tailwind utilities;
-
 html,
 body {
   height: 100%;

package/nuxt-base-template/src/components/Transition/TransitionFade.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    startDuration?: number | `${number}`;
-    leaveDuration?: number | `${number}`;
+    leaveDuration?: `${number}` | number;
+    startDuration?: `${number}` | number;
   }>(),
   {
-    startDuration: 100,
     leaveDuration: 100,
-  }
+    startDuration: 100,
+  },
 );
 </script>
 

package/nuxt-base-template/src/components/Transition/TransitionFadeScale.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    startDuration?: number | `${number}`;
-    leaveDuration?: number | `${number}`;
+    leaveDuration?: `${number}` | number;
+    startDuration?: `${number}` | number;
   }>(),
   {
-    startDuration: 100,
     leaveDuration: 100,
-  }
+    startDuration: 100,
+  },
 );
 </script>
 

package/nuxt-base-template/src/composables/use-context-menu.ts

@@ -1,7 +1,7 @@
-const contextMenuState = <T>() => useState<any | null>(() => null);
+const contextMenuState = () => useState<any | null>(() => null);
 
-export function useContextMenu<T = object>() {
-  const menu = contextMenuState<T>();
+export function useContextMenu() {
+  const menu = contextMenuState();
 
   const open = (config: { items: any[] }) => {
     menu.value = Object.assign(config, { show: true });

package/nuxt-base-template/src/composables/use-form-helper.ts

@@ -27,9 +27,7 @@ export function useFormHelper() {
           close();
         },
         data: {
-          text:
-            'Sind  Sie sich sicher, dass Sie den Vorgang abbrechen möchten?\n' +
-            'Es befinden sich ungesicherte Daten auf dieser Seite.',
+          text: 'Sind  Sie sich sicher, dass Sie den Vorgang abbrechen möchten?\n' + 'Es befinden sich ungesicherte Daten auf dieser Seite.',
           title: 'Vorsicht, ungesicherte Daten!',
         },
       });

package/nuxt-base-template/src/composables/use-modal.ts

@@ -1,19 +1,19 @@
 interface Modal<T> {
-  component: any;
-  data?: T;
-  size?: 'sm' | 'md' | 'lg' | 'auto';
   closable?: boolean;
+  component: any;
   confirm?: (confirmed: boolean) => void;
+  data?: T;
+  size?: 'auto' | 'lg' | 'md' | 'sm';
 }
 
 export interface ModalContext<T = object> {
+  closable?: boolean;
   component: any;
+  confirm?: (confirmed: boolean) => void;
   data?: T;
   show: boolean;
   showInner: boolean;
-  size?: 'sm' | 'md' | 'lg' | 'auto';
-  closable?: boolean;
-  confirm?: (confirmed: boolean) => void;
+  size?: 'auto' | 'lg' | 'md' | 'sm';
 }
 
 const modalState = <T>() => useState<ModalContext<T> | null>(() => null);
@@ -78,7 +78,7 @@ export function useModal<T = object>() {
 
   return {
     activeModal: modal,
-    open,
     close,
+    open,
   };
 }

package/nuxt-base-template/src/composables/use-notification.ts

@@ -1,10 +1,10 @@
 import { randomUUID } from 'uncrypto';
 
 interface Notification {
-  title: string;
-  text?: string;
-  type: 'success' | 'error' | 'warning' | 'info';
   duration?: number;
+  text?: string;
+  title: string;
+  type: 'error' | 'info' | 'success' | 'warning';
 }
 
 const notificationState = () => useState<Array<Notification & { uuid: string }>>(() => []);
@@ -22,8 +22,8 @@ export function useNotification() {
   };
 
   return {
+    notifications,
     notify,
     remove,
-    notifications,
   };
 }

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

@@ -1,5 +1,5 @@
-import { useModal } from '~/composables/use-modal';
 import ModalShare from '~/components/ModalShare.vue';
+import { useModal } from '~/composables/use-modal';
 
 export function useShare() {
   const route = useRoute();
@@ -7,12 +7,12 @@ export function useShare() {
   function share(title?: string, text?: string, url?: string) {
     if (window?.navigator?.share) {
       window.navigator.share({
-        url: url ?? route.fullPath,
-        title: title,
         text: text ?? window.location.origin,
+        title: title,
+        url: url ?? route.fullPath,
       });
     } else {
-      useModal().open({ component: ModalShare, size: 'md', data: { link: url ?? window.location.origin, name: window.name } });
+      useModal().open({ component: ModalShare, data: { link: url ?? window.location.origin, name: window.name }, size: 'md' });
     }
   }
 

package/nuxt-base-template/src/composables/use-tw.ts

@@ -0,0 +1 @@
+export const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses;

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

@@ -22,7 +22,7 @@ watch(
     if (current.values().next().value && !debugWord.value.includes(current.values().next().value)) {
       debugWord.value += current.values().next().value;
     }
-  }
+  },
 );
 
 const handleError = () => clearError({ redirect: '/' });

package/nuxt-base-template/src/middleware/admin.global.ts

@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   const { currentUserState } = useAuthState();
 
   if (to.fullPath.startsWith('/app/admin')) {

package/nuxt-base-template/src/middleware/auth.global.ts

@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   const { accessTokenState } = useAuthState();
 
   if (to.fullPath.startsWith('/app')) {

package/nuxt-base-template/src/middleware/logged-in.global.ts

@@ -1,4 +1,4 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   const { accessTokenState } = useAuthState();
 
   if (to.fullPath === '/auth' || to.fullPath === '/auth/register') {

package/nuxt-base-template/src/plugins/form.plugin.ts

@@ -1,12 +1,12 @@
 import { setLocale } from 'yup';
 
-export default defineNuxtPlugin(async (_nuxtApp) => {
+export default defineNuxtPlugin(async () => {
   setLocale({
     // use constant translation keys for messages without values
     mixed: {
-      required: 'Dieses Feld ist erforderlich.',
       default: 'Dieses Feld ist ungültig.',
       notType: 'Dieses Feld ist ungültig.',
+      required: 'Dieses Feld ist erforderlich.',
     },
     string: {
       email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',

package/nuxt-base-template/src/plugins/pwa.plugin.ts

@@ -1,4 +1,4 @@
-export default defineNuxtPlugin(async (_nuxtApp) => {
+export default defineNuxtPlugin(async () => {
   const applicationServerKey = useRuntimeConfig().public.webPushKey as string;
   const permissionState = ref<PermissionState>('prompt');
   const subscription = ref<PushSubscription | null>(null);
@@ -25,7 +25,9 @@ export default defineNuxtPlugin(async (_nuxtApp) => {
         body,
         method: 'POST',
       });
-    } catch (error) {}
+    } catch (e) {
+      console.error(e);
+    }
   }
 
   async function refreshPermissionState() {
@@ -35,8 +37,8 @@ export default defineNuxtPlugin(async (_nuxtApp) => {
         applicationServerKey,
         userVisibleOnly: true,
       });
-    } catch (error) {
-      console.error(error);
+    } catch (e) {
+      console.error(e);
     }
   }
 
@@ -62,7 +64,9 @@ export default defineNuxtPlugin(async (_nuxtApp) => {
           body,
           method: 'DELETE',
         });
-      } catch (error) {}
+      } catch (e) {
+        console.error(e);
+      }
       subscription.value = null;
     }
   }

package/nuxt-base-template/tailwind.config.js

@@ -1,48 +1,11 @@
 /** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
-const typography = require('@tailwindcss/typography');
-const forms = require('@tailwindcss/forms');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  darkMode: 'class',
-  theme: {
-    // fontFamily: {
-    //   montserrat: ['Montserrat'],
-    //   sans: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.sans],
-    //   serif: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.serif],
-    // },
-    extend: {
-      colors: {
-        primary: {
-          DEFAULT: '#57B39A',
-          50: '#f3faf7',
-          100: '#d6f1e7',
-          200: '#ade2d0',
-          300: '#7cccb3',
-          400: '#57b39a',
-          500: '#37957d',
-          600: '#2a7765',
-          700: '#256052',
-          800: '#224d45',
-          900: '#20413a',
-          950: '#0d2621',
-        },
-        background: '#FFFFFF',
-        foreground: '#000000',
-        border: 'hsl(0 0% 0% / 0.5)',
-        hover: 'hsl(0 0% 100% / 0.2)',
-        active: 'hsl(0 0% 100% / 0.2)',
-      },
-      screens: {
-        '3xl': '2400px',
-      },
-    },
-  },
   plugins: [
-    typography,
-    forms,
     iconsPlugin({
       // Select the icon collections you want to use
       collections: getIconCollections(['bi']),

package/package.json

@@ -1,26 +1,30 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.2.10",
+  "version": "0.3.4",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
   "main": "index.js",
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  },
   "bin": {
     "create-nuxt-base": "./index.js"
   },
-  "scripts": {
-    "prettier": "prettier \"*.{js,json,yml,md,html,ts}\" .",
-    "format": "npm run prettier -- --write",
-    "release": "standard-version && git push --follow-tags origin main",
-    "release:minor": "standard-version --release-as minor && git push --follow-tags origin main",
-    "release:major": "standard-version --release-as major && git push --follow-tags origin main"
-  },
   "author": "lenne.Tech GmbH",
   "license": "MIT",
   "dependencies": {
-    "cross-spawn": "7.0.3",
-    "fs-extra": "11.2.0"
+    "cross-spawn": "7.0.6",
+    "fs-extra": "11.3.0"
   },
   "devDependencies": {
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "standard-version": "9.5.0"
+  },
+  "scripts": {
+    "prettier": "prettier \"*.{js,json,yml,md,html,ts}\" .",
+    "format": "pnpm prettier -- --write",
+    "release": "standard-version && git push --follow-tags origin main",
+    "release:minor": "standard-version --release-as minor && git push --follow-tags origin main",
+    "release:major": "standard-version --release-as major && git push --follow-tags origin main"
   }
-}
+}

package/nuxt-base-template/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "@lenne.tech/vue"
-}