create-nuxt-base 0.2.10 → 0.3.0

package/nuxt-base-template/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "init": "npm install",
-    "reinit": "rm -rf node_modules && rm -rf package-lock.json && yes | npx nuxt cleanup && npm cache clean --force && npm i",
+    "reinit": "npx rimraf package-lock.json && npx nuxt cleanup && npx rimraf node_modules && npm cache clean --force && npm i",
     "build": "nuxt build",
     "app:build": "npm run build",
     "build:develop": "nuxt build",
@@ -14,17 +14,17 @@
     "start:test": "node .output/server/index.mjs",
     "start:prod": "node .output/server/index.mjs",
     "start:tunnel": "nuxt dev --tunnel",
-    "start:extern": "HOST=0.0.0.0 nuxt dev",
-    "generate-types": "rm -rf ./src/base && GENERATE_TYPES=1 nuxt dev",
+    "start:extern": "npx cross-env HOST=0.0.0.0 nuxt dev",
+    "generate-types": "npx rimraf ./src/base && npx cross-env GENERATE_TYPES=1 nuxt dev",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "app:e2e": "playwright test",
     "test": "echo 'No test specified' && exit 0",
-    "lint": "eslint --ext .ts,.js,.vue .",
-    "lint:fix": "eslint --ext .ts,.js,.vue . --fix",
-    "postbuild": "cd .output/server/node_modules/tslib; npm pkg set 'exports[.].import.node'='./tslib.es6.mjs'"
+    "lint": "eslint '**/*.{ts,js,vue}'",
+    "lint:fix": "eslint '**/*.{ts,js,vue}' --fix",
+    "postbuild": "node postbuild.js"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "1.8.1",
@@ -37,11 +37,12 @@
     "@vueuse/nuxt": "11.1.0",
     "ios-pwa-splash": "1.0.0",
     "pinia": "2.2.4",
+    "rimraf": "6.0.1",
     "tailwind-merge": "2.5.4",
     "vee-validate": "4.14.3"
   },
   "devDependencies": {
-    "@lenne.tech/eslint-config-vue": "0.0.16",
+    "@lenne.tech/eslint-config-vue": "1.0.3",
     "@nuxt/devtools": "1.6.0",
     "@nuxt/test-utils": "3.14.4",
     "@nuxtjs/color-mode": "3.5.1",
@@ -56,7 +57,7 @@
     "@types/node": "22.7.8",
     "@vitejs/plugin-vue": "5.1.4",
     "@vue/test-utils": "2.4.6",
-    "eslint": "8.57.1",
+    "eslint": "9.17.0",
     "jsdom": "24.1.3",
     "nuxt": "3.13.2",
     "ts-loader": "9.5.1",

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/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-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/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/plugins/form.plugin.ts

@@ -4,9 +4,9 @@ export default defineNuxtPlugin(async (_nuxtApp) => {
   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/tailwind.config.js

@@ -1,12 +1,32 @@
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const defaultTheme = require('tailwindcss/defaultTheme');
-const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { getIconCollections, iconsPlugin } = require('@egoist/tailwindcss-icons');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const typography = require('@tailwindcss/typography');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const forms = require('@tailwindcss/forms');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
   darkMode: 'class',
+  plugins: [
+    typography,
+    forms,
+    iconsPlugin({
+      // Select the icon collections you want to use
+      collections: getIconCollections(['bi']),
+    }),
+    plugin(({ addVariant, e }) => {
+      addVariant('pwa', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.pwa .${e(`pwa${separator}${className}`)}`;
+        });
+      });
+    }),
+  ],
   theme: {
     // fontFamily: {
     //   montserrat: ['Montserrat'],
@@ -15,8 +35,12 @@ module.exports = {
     // },
     extend: {
       colors: {
+        active: 'hsl(0 0% 100% / 0.2)',
+        background: '#FFFFFF',
+        border: 'hsl(0 0% 0% / 0.5)',
+        foreground: '#000000',
+        hover: 'hsl(0 0% 100% / 0.2)',
         primary: {
-          DEFAULT: '#57B39A',
           50: '#f3faf7',
           100: '#d6f1e7',
           200: '#ade2d0',
@@ -28,31 +52,12 @@ module.exports = {
           800: '#224d45',
           900: '#20413a',
           950: '#0d2621',
+          DEFAULT: '#57B39A',
         },
-        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']),
-    }),
-    plugin(({ addVariant, e }) => {
-      addVariant('pwa', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.pwa .${e(`pwa${separator}${className}`)}`;
-        });
-      });
-    }),
-  ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
   "main": "index.js",
   "bin": {

package/nuxt-base-template/.eslintrc

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