create-nuxt-base 0.3.0 → 0.3.5

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/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-tw.ts

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

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,6 +1,6 @@
 import { setLocale } from 'yup';
 
-export default defineNuxtPlugin(async (_nuxtApp) => {
+export default defineNuxtPlugin(async () => {
   setLocale({
     // use constant translation keys for messages without values
     mixed: {

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,20 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line @typescript-eslint/no-require-imports
-const defaultTheme = require('tailwindcss/defaultTheme');
-// 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');
+const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
 // 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']),
@@ -27,37 +18,4 @@ module.exports = {
       });
     }),
   ],
-  theme: {
-    // fontFamily: {
-    //   montserrat: ['Montserrat'],
-    //   sans: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.sans],
-    //   serif: ['Work Sans', 'Montserrat', ...defaultTheme.fontFamily.serif],
-    // },
-    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: {
-          50: '#f3faf7',
-          100: '#d6f1e7',
-          200: '#ade2d0',
-          300: '#7cccb3',
-          400: '#57b39a',
-          500: '#37957d',
-          600: '#2a7765',
-          700: '#256052',
-          800: '#224d45',
-          900: '#20413a',
-          950: '#0d2621',
-          DEFAULT: '#57B39A',
-        },
-      },
-      screens: {
-        '3xl': '2400px',
-      },
-    },
-  },
 };

package/package.json

@@ -1,26 +1,30 @@
 {
   "name": "create-nuxt-base",
-  "version": "0.3.0",
+  "version": "0.3.5",
   "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"
   }
-}
+}