create-nuxt-base 0.3.16 → 0.3.17

package/nuxt-base-template/package.json

@@ -9,64 +9,59 @@
   "scripts": {
     "init": "npm install",
     "reinit": "npx rimraf package-lock.json && npx nuxt cleanup && npx rimraf node_modules && npm cache clean --force && npm i",
+    "clean": "npx rimraf .nuxt .output",
+    "dev": "nuxt dev",
     "build": "nuxt build",
-    "app:build": "npm run build",
-    "build:develop": "nuxt build",
-    "build:test": "nuxt build",
+    "build:develop": "npx cross-env NODE_ENV=development nuxt build",
+    "build:test": "npx cross-env NODE_ENV=test nuxt build",
+    "build:prod": "npx cross-env NODE_ENV=production nuxt build",
     "start": "nuxt dev",
     "start:develop": "node .output/server/index.mjs",
     "start:test": "node .output/server/index.mjs",
     "start:prod": "node .output/server/index.mjs",
     "start:tunnel": "nuxt dev --tunnel",
     "start:extern": "npx cross-env HOST=0.0.0.0 nuxt dev",
-    "generate-types": "npx rimraf app/base && npx cross-env GENERATE_TYPES=1 nuxt dev",
-    "dev": "nuxt dev",
     "generate": "nuxt generate",
+    "generate-types": "openapi-ts",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "app:e2e": "playwright test",
-    "test": "echo 'No test specified' && exit 0",
+    "test": "npm run test:e2e",
+    "test:e2e": "playwright test",
     "lint": "eslint 'app/**/*.{ts,js,vue}'",
-    "lint:fix": "eslint 'app/**/*.{ts,js,vue}' --fix"
+    "lint:fix": "eslint 'app/**/*.{ts,js,vue}' --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "npm run lint && npm run format:check",
+    "fix": "npm run lint:fix && npm run format"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "1.9.0",
-    "@iconify-json/bi": "1.2.6",
+    "@hey-api/client-fetch": "0.13.1",
     "@lenne.tech/bug.lt": "latest",
-    "@lenne.tech/nuxt-base": "latest",
     "@nuxt/image": "1.11.0",
-    "@vee-validate/yup": "4.15.1",
-    "@vueuse/core": "13.9.0",
-    "@vueuse/integrations": "13.9.0",
+    "@nuxt/ui": "4.0.1",
+    "@pinia/nuxt": "0.11.2",
     "@vueuse/nuxt": "13.9.0",
-    "ios-pwa-splash": "1.0.0",
-    "rimraf": "6.0.1",
-    "tailwind-merge": "3.3.1",
-    "tailwindcss": "4.1.13",
-    "vee-validate": "4.15.1"
+    "valibot": "1.1.0"
   },
   "devDependencies": {
-    "@lenne.tech/eslint-config-vue": "2.1.3",
-    "@nuxt/devtools": "2.6.3",
+    "@hey-api/openapi-ts": "0.85.2",
+    "@lenne.tech/eslint-config-vue": "2.1.4",
+    "@nuxt/devtools": "2.6.5",
     "@nuxt/test-utils": "3.19.2",
     "@nuxtjs/color-mode": "3.5.2",
-    "@nuxtjs/google-fonts": "3.2.0",
     "@nuxtjs/plausible": "2.0.1",
-    "@nuxtjs/seo": "3.1.0",
-    "@nuxtjs/tailwindcss": "6.14.0",
-    "@playwright/test": "1.55.0",
-    "@tailwindcss/forms": "0.5.10",
-    "@tailwindcss/typography": "0.5.16",
-    "@tailwindcss/vite": "4.1.13",
-    "@types/node": "24.3.1",
-    "@vitejs/plugin-vue": "6.0.1",
-    "@vue/test-utils": "2.4.6",
+    "@nuxtjs/seo": "3.2.2",
+    "@playwright/test": "1.56.1",
+    "@tailwindcss/typography": "0.5.19",
+    "@tailwindcss/vite": "4.1.14",
+    "@types/node": "24.8.1",
     "dayjs-nuxt": "2.1.11",
-    "eslint": "9.34.0",
+    "eslint": "9.37.0",
     "jsdom": "26.1.0",
-    "nuxt": "4.1.0",
-    "ts-loader": "9.5.4",
-    "typescript": "5.9.2"
+    "nuxt": "4.1.3",
+    "rimraf": "6.0.1",
+    "tailwindcss": "4.1.14",
+    "typescript": "5.9.3"
   },
   "exports": {
     ".": {

package/nuxt-base-template/tsconfig.json

@@ -2,6 +2,6 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "target": "ES2017"
+    "target": "ES2022"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.3.16",
-  "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, @lenne.tech/nuxt-base, Unit Tests, Cypress etc.",
+  "version": "0.3.17",
+  "description": "Starter to generate a configured environment with VueJS, Nuxt, Tailwind, Eslint, Unit Tests, Playwright etc.",
   "main": "index.js",
   "engines": {
     "node": ">=22",
@@ -21,7 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "cross-spawn": "7.0.6",
-    "fs-extra": "11.3.1"
+    "fs-extra": "11.3.2"
   },
   "devDependencies": {
     "prettier": "3.6.2",

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

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

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

@@ -1,41 +0,0 @@
-export function useFormHelper() {
-  const { close, open } = useModal();
-
-  function onReload(dirty: boolean, event: BeforeUnloadEvent) {
-    if (dirty) {
-      event.preventDefault();
-      event.returnValue = '';
-    }
-  }
-
-  async function onNavigate(dirty: boolean) {
-    if (dirty) {
-      const answer = await openConfirmModal();
-      if (!answer) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  function openConfirmModal() {
-    return new Promise((resolve) => {
-      open({
-        component: 'ModalConfirm', // TODO: Replace with correct component
-        confirm: (confirmed) => {
-          resolve(confirmed);
-          close();
-        },
-        data: {
-          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!',
-        },
-      });
-    });
-  }
-
-  return {
-    onNavigate,
-    onReload,
-  };
-}

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

@@ -1,84 +0,0 @@
-export interface ModalContext<T = object> {
-  closable?: boolean;
-  component: any;
-  confirm?: (confirmed: boolean) => void;
-  data?: T;
-  show: boolean;
-  showInner: boolean;
-  size?: 'auto' | 'lg' | 'md' | 'sm';
-}
-
-interface Modal<T> {
-  closable?: boolean;
-  component: any;
-  confirm?: (confirmed: boolean) => void;
-  data?: T;
-  size?: 'auto' | 'lg' | 'md' | 'sm';
-}
-
-const modalState = <T>() => useState<ModalContext<T> | null>(() => null);
-
-export function useModal<T = object>() {
-  const modal = modalState<T>();
-
-  const open = (modalConfig: Modal<T>) => {
-    let delay = 0;
-    if (modal.value) {
-      delay = 130;
-    }
-
-    const data = Object.assign(modalConfig, { show: false, showInner: false }) as ModalContext<T>;
-    data.size ??= 'md';
-    data.closable ??= true;
-
-    setTimeout(() => {
-      modal.value = data;
-    }, delay);
-
-    // Disable scrolling of background
-    document.body.style.overflowY = 'hidden';
-
-    setTimeout(() => {
-      if (modal.value) {
-        modal.value.show = true;
-      }
-    }, 30 + delay);
-
-    setTimeout(() => {
-      if (modal.value) {
-        modal.value.showInner = true;
-      }
-    }, 100 + delay);
-  };
-
-  const close = (duration?: number) => {
-    let animationDuration = duration;
-
-    if (typeof animationDuration !== 'number') {
-      animationDuration = 100;
-    }
-
-    if (modal.value) {
-      modal.value.showInner = false;
-
-      setTimeout(() => {
-        if (modal.value) {
-          modal.value.show = false;
-        }
-      }, 30 + animationDuration);
-    }
-
-    // Deactivate scrolling of background
-    document.body.style.overflowY = '';
-
-    setTimeout(() => {
-      modal.value = null;
-    }, 130 + animationDuration);
-  };
-
-  return {
-    activeModal: modal,
-    close,
-    open,
-  };
-}

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

@@ -1,29 +0,0 @@
-import { randomUUID } from 'uncrypto';
-
-interface Notification {
-  duration?: number;
-  text?: string;
-  title: string;
-  type: 'error' | 'info' | 'success' | 'warning';
-}
-
-const notificationState = () => useState<Array<Notification & { uuid: string }>>(() => []);
-
-export function useNotification() {
-  const notifications = notificationState();
-  const notify = (message: Notification) => {
-    const data = Object.assign(message, { uuid: randomUUID() });
-    data.duration ??= 5000;
-    notifications.value.push(data);
-  };
-
-  const remove = (uuid: string) => {
-    notifications.value = notifications.value.filter((n) => n.uuid !== uuid);
-  };
-
-  return {
-    notifications,
-    notify,
-    remove,
-  };
-}

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

@@ -1,9 +0,0 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const { currentUserState } = useAuthState();
-
-  if (to.fullPath.startsWith('/app/admin')) {
-    if (!currentUserState?.value?.roles?.includes('admin')) {
-      return navigateTo('/app');
-    }
-  }
-});

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

@@ -1,9 +0,0 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const { accessTokenState } = useAuthState();
-
-  if (to.fullPath.startsWith('/app')) {
-    if (!accessTokenState?.value) {
-      return navigateTo('/auth/login');
-    }
-  }
-});

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

@@ -1,9 +0,0 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const { accessTokenState } = useAuthState();
-
-  if (to.fullPath === '/auth' || to.fullPath === '/auth/register') {
-    if (accessTokenState?.value) {
-      return navigateTo('/cms');
-    }
-  }
-});

package/nuxt-base-template/app/plugins/auth.server.ts

@@ -1,72 +0,0 @@
-import { callWithNuxt, defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from 'nuxt/app';
-import { ofetch } from 'ofetch';
-
-export default defineNuxtPlugin({
-  dependsOn: ['cookies', 'graphql-meta'], // from nuxt-base
-  name: 'auth-server',
-  async setup() {
-    const _nuxt = useNuxtApp();
-    const config = await callWithNuxt(_nuxt, useRuntimeConfig);
-    const { accessTokenState, currentUserState, refreshTokenState } = await callWithNuxt(_nuxt, useAuthState);
-    const { clearSession, getDecodedAccessToken, isTokenExpired, setCurrentUser, setTokens } = await callWithNuxt(_nuxt, useAuth);
-    const payload = accessTokenState.value ? getDecodedAccessToken(accessTokenState.value) : null;
-
-    if (!accessTokenState.value || !refreshTokenState.value || currentUserState.value) {
-      return;
-    }
-
-    let token = accessTokenState.value;
-    if (isTokenExpired(accessTokenState.value)) {
-      const refreshTokenResult = await ofetch(config.public.gqlHost, {
-        body: JSON.stringify({
-          query: 'mutation refreshToken {refreshToken {token, refreshToken}}',
-          variables: {},
-        }),
-        headers: {
-          Authorization: `Bearer ${refreshTokenState.value}`,
-        },
-        method: 'POST',
-      }).catch((err) => {
-        console.error('2.auth.server.ts::refreshToken::catch', err.data);
-        clearSession();
-        navigateTo('/auth');
-      });
-
-      const data = refreshTokenResult?.data?.refreshToken;
-      if (data) {
-        setTokens(data.token, data.refreshToken);
-        token = data?.token;
-      } else {
-        clearSession();
-        await navigateTo('/auth');
-      }
-    }
-
-    if (token && payload?.id) {
-      const userResult = await ofetch(config.public.gqlHost, {
-        body: JSON.stringify({
-          query: 'query getUser($id: String!){' + 'getUser(id: $id){' + 'id ' + 'firstName ' + 'lastName ' + 'email ' + 'roles ' + '}}',
-          variables: {
-            id: payload.id,
-          },
-        }),
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        method: 'POST',
-      }).catch((err) => {
-        console.error('2.auth.server.ts::getUser::catch', err);
-      });
-
-      if (userResult?.errors) {
-        clearSession();
-        navigateTo('/auth');
-        return;
-      }
-
-      if (userResult?.data) {
-        setCurrentUser(userResult?.data?.getUser);
-      }
-    }
-  },
-});

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

@@ -1,21 +0,0 @@
-import { setLocale } from 'yup';
-
-export default defineNuxtPlugin(async () => {
-  setLocale({
-    // use constant translation keys for messages without values
-    mixed: {
-      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.',
-    },
-  });
-
-  // Custom validation rules
-  // https://github.com/jquense/yup?tab=readme-ov-file#addmethodschematype-schema-name-string-method--schema-void
-  // addMethod(string, 'plz', () => {
-  //     return
-  // });
-});

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

@@ -1,114 +0,0 @@
-export default defineNuxtPlugin(async () => {
-  const applicationServerKey = useRuntimeConfig().public.webPushKey as string;
-  const permissionState = ref<PermissionState>('prompt');
-  const subscription = ref<null | PushSubscription>(null);
-
-  if (process.client) {
-    const iosPWASplash = (await import('ios-pwa-splash')).default;
-    iosPWASplash('/notification.png', '#FFFFFF');
-  }
-
-  async function subscribe() {
-    const sw = await navigator.serviceWorker.ready;
-    const push = await sw.pushManager.subscribe({
-      applicationServerKey,
-      userVisibleOnly: true,
-    });
-    await refreshSubscription();
-    await refreshPermissionState();
-    const body = {
-      payload: push,
-    };
-    try {
-      await useAuthFetch('/web-push/subscribe', {
-        baseURL: process.env.API_URL,
-        body,
-        method: 'POST',
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async function refreshPermissionState() {
-    try {
-      const sw = await navigator.serviceWorker.ready;
-      permissionState.value = await sw.pushManager.permissionState({
-        applicationServerKey,
-        userVisibleOnly: true,
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async function refreshSubscription() {
-    try {
-      const sw = await navigator.serviceWorker.ready;
-      subscription.value = await sw.pushManager.getSubscription();
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async function unsubscribe() {
-    if (subscription.value) {
-      await subscription.value.unsubscribe();
-      const body = {
-        payload: subscription.value,
-      };
-      await refreshPermissionState();
-      try {
-        await useAuthFetch('/web-push/', {
-          baseURL: process.env.API_URL,
-          body,
-          method: 'DELETE',
-        });
-      } catch (e) {
-        console.error(e);
-      }
-      subscription.value = null;
-    }
-  }
-
-  const route = useRoute();
-  const pwa = ref(false);
-  const isPwa = computed(() => route.query.standalone === 'true' || pwa.value);
-
-  if (process.client) {
-    if (window && window.matchMedia && document && window.matchMedia('(display-mode: standalone)').matches) {
-      if (navigator && navigator.serviceWorker) {
-        await refreshSubscription();
-        await refreshPermissionState();
-      }
-      pwa.value = true;
-      document.body.classList.add('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
-    } else {
-      pwa.value = false;
-      document.body.classList.remove('select-none', 'overscroll-y-none', 'no-scrollbar', 'bg-rm-gray-1');
-    }
-  }
-
-  useHead({
-    htmlAttrs: { class: isPwa.value ? 'pwa' : '' },
-    meta: [
-      {
-        content: 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no',
-        hid: 'viewport',
-        name: 'viewport',
-      },
-    ],
-  });
-
-  return {
-    provide: {
-      pwa: {
-        isPwa: () => isPwa.value,
-        permissionState,
-        subscribe,
-        subscription,
-        unsubscribe,
-      },
-    },
-  };
-});

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

@@ -1,21 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-  plugins: [
-    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}`)}`;
-        });
-      });
-    }),
-  ],
-};