From ecaefd55c0254d9cc2a3f459c210018fee749cbe Mon Sep 17 00:00:00 2001 From: J-Sek Date: Fri, 26 Jun 2026 14:18:10 +0200 Subject: [PATCH] fix(templates): resilient CSS layers import - prevents issues when scaffolding Vite+Router - bulletproof - works around Vite/SSR problems resolves #21 --- templates/nuxt/base/nuxt.config.ts | 8 ++++++++ templates/nuxt/base/public/layers.css | 1 + templates/nuxt/tailwind/nuxt.config.ts | 9 ++++++++- .../tailwind/{app/assets/styles => public}/layers.css | 0 templates/nuxt/unocss-vuetify/nuxt.config.ts | 9 ++++++++- .../{app/assets/styles => public}/layers.css | 0 templates/nuxt/unocss-wind4/nuxt.config.ts | 9 ++++++++- .../{app/assets/styles => public}/layers.css | 0 templates/vue/base/index.html | 1 + templates/vue/base/public/layers.css | 1 + templates/vue/tailwind/index.html | 1 + templates/vue/tailwind/{src/styles => public}/layers.css | 0 templates/vue/tailwind/src/plugins/vuetify.ts | 1 - templates/vue/unocss-vuetify/index.html | 1 + .../vue/unocss-vuetify/{src/styles => public}/layers.css | 0 templates/vue/unocss-vuetify/src/plugins/vuetify.ts | 1 - templates/vue/unocss-wind4/index.html | 1 + .../vue/unocss-wind4/{src/styles => public}/layers.css | 0 templates/vue/unocss-wind4/src/plugins/vuetify.ts | 1 - 19 files changed, 38 insertions(+), 6 deletions(-) create mode 100644 templates/nuxt/base/public/layers.css rename templates/nuxt/tailwind/{app/assets/styles => public}/layers.css (100%) rename templates/nuxt/unocss-vuetify/{app/assets/styles => public}/layers.css (100%) rename templates/nuxt/unocss-wind4/{app/assets/styles => public}/layers.css (100%) create mode 100644 templates/vue/base/public/layers.css rename templates/vue/tailwind/{src/styles => public}/layers.css (100%) rename templates/vue/unocss-vuetify/{src/styles => public}/layers.css (100%) rename templates/vue/unocss-wind4/{src/styles => public}/layers.css (100%) diff --git a/templates/nuxt/base/nuxt.config.ts b/templates/nuxt/base/nuxt.config.ts index 4daa65f..58f2068 100644 --- a/templates/nuxt/base/nuxt.config.ts +++ b/templates/nuxt/base/nuxt.config.ts @@ -8,6 +8,14 @@ export default defineNuxtConfig({ 'vuetify-nuxt-module', ], + app: { + head: { + link: [ + { rel: 'stylesheet', href: '/layers.css' }, + ], + }, + }, + vuetify: { moduleOptions: { styles: { configFile: 'assets/styles/settings.scss' }, diff --git a/templates/nuxt/base/public/layers.css b/templates/nuxt/base/public/layers.css new file mode 100644 index 0000000..2d403cb --- /dev/null +++ b/templates/nuxt/base/public/layers.css @@ -0,0 +1 @@ +@layer vuetify-core, vuetify-components, vuetify-overrides, vuetify-utilities, vuetify-final; diff --git a/templates/nuxt/tailwind/nuxt.config.ts b/templates/nuxt/tailwind/nuxt.config.ts index f539cda..9897be2 100644 --- a/templates/nuxt/tailwind/nuxt.config.ts +++ b/templates/nuxt/tailwind/nuxt.config.ts @@ -8,6 +8,14 @@ export default defineNuxtConfig({ 'vuetify-nuxt-module', ], + app: { + head: { + link: [ + { rel: 'stylesheet', href: '/layers.css' }, + ], + }, + }, + postcss: { plugins: { '@tailwindcss/postcss': {}, @@ -15,7 +23,6 @@ export default defineNuxtConfig({ }, css: [ - 'assets/styles/layers.css', 'assets/styles/tailwind.css', ], diff --git a/templates/nuxt/tailwind/app/assets/styles/layers.css b/templates/nuxt/tailwind/public/layers.css similarity index 100% rename from templates/nuxt/tailwind/app/assets/styles/layers.css rename to templates/nuxt/tailwind/public/layers.css diff --git a/templates/nuxt/unocss-vuetify/nuxt.config.ts b/templates/nuxt/unocss-vuetify/nuxt.config.ts index 97d8422..578c5c7 100644 --- a/templates/nuxt/unocss-vuetify/nuxt.config.ts +++ b/templates/nuxt/unocss-vuetify/nuxt.config.ts @@ -11,8 +11,15 @@ export default defineNuxtConfig({ 'vuetify-nuxt-module', ], + app: { + head: { + link: [ + { rel: 'stylesheet', href: '/layers.css' }, + ], + }, + }, + css: [ - 'assets/styles/layers.css', 'assets/styles/main.scss', ], diff --git a/templates/nuxt/unocss-vuetify/app/assets/styles/layers.css b/templates/nuxt/unocss-vuetify/public/layers.css similarity index 100% rename from templates/nuxt/unocss-vuetify/app/assets/styles/layers.css rename to templates/nuxt/unocss-vuetify/public/layers.css diff --git a/templates/nuxt/unocss-wind4/nuxt.config.ts b/templates/nuxt/unocss-wind4/nuxt.config.ts index 8f219b3..7f76408 100644 --- a/templates/nuxt/unocss-wind4/nuxt.config.ts +++ b/templates/nuxt/unocss-wind4/nuxt.config.ts @@ -14,8 +14,15 @@ export default defineNuxtConfig({ 'vuetify-nuxt-module', ], + app: { + head: { + link: [ + { rel: 'stylesheet', href: '/layers.css' }, + ], + }, + }, + css: [ - 'assets/styles/layers.css', 'assets/styles/main.scss', ], diff --git a/templates/nuxt/unocss-wind4/app/assets/styles/layers.css b/templates/nuxt/unocss-wind4/public/layers.css similarity index 100% rename from templates/nuxt/unocss-wind4/app/assets/styles/layers.css rename to templates/nuxt/unocss-wind4/public/layers.css diff --git a/templates/vue/base/index.html b/templates/vue/base/index.html index aaf3eec..f88041d 100644 --- a/templates/vue/base/index.html +++ b/templates/vue/base/index.html @@ -2,6 +2,7 @@ + Welcome to Vuetify 4 diff --git a/templates/vue/base/public/layers.css b/templates/vue/base/public/layers.css new file mode 100644 index 0000000..2d403cb --- /dev/null +++ b/templates/vue/base/public/layers.css @@ -0,0 +1 @@ +@layer vuetify-core, vuetify-components, vuetify-overrides, vuetify-utilities, vuetify-final; diff --git a/templates/vue/tailwind/index.html b/templates/vue/tailwind/index.html index aaf3eec..f88041d 100644 --- a/templates/vue/tailwind/index.html +++ b/templates/vue/tailwind/index.html @@ -2,6 +2,7 @@ + Welcome to Vuetify 4 diff --git a/templates/vue/tailwind/src/styles/layers.css b/templates/vue/tailwind/public/layers.css similarity index 100% rename from templates/vue/tailwind/src/styles/layers.css rename to templates/vue/tailwind/public/layers.css diff --git a/templates/vue/tailwind/src/plugins/vuetify.ts b/templates/vue/tailwind/src/plugins/vuetify.ts index 3616a64..9b636f9 100644 --- a/templates/vue/tailwind/src/plugins/vuetify.ts +++ b/templates/vue/tailwind/src/plugins/vuetify.ts @@ -6,7 +6,6 @@ import { createVuetify } from 'vuetify' import '@mdi/font/css/materialdesignicons.css' -import '../styles/layers.css' import 'vuetify/styles' export default createVuetify({ diff --git a/templates/vue/unocss-vuetify/index.html b/templates/vue/unocss-vuetify/index.html index aaf3eec..f88041d 100644 --- a/templates/vue/unocss-vuetify/index.html +++ b/templates/vue/unocss-vuetify/index.html @@ -2,6 +2,7 @@ + Welcome to Vuetify 4 diff --git a/templates/vue/unocss-vuetify/src/styles/layers.css b/templates/vue/unocss-vuetify/public/layers.css similarity index 100% rename from templates/vue/unocss-vuetify/src/styles/layers.css rename to templates/vue/unocss-vuetify/public/layers.css diff --git a/templates/vue/unocss-vuetify/src/plugins/vuetify.ts b/templates/vue/unocss-vuetify/src/plugins/vuetify.ts index 360e4f7..7067752 100644 --- a/templates/vue/unocss-vuetify/src/plugins/vuetify.ts +++ b/templates/vue/unocss-vuetify/src/plugins/vuetify.ts @@ -8,7 +8,6 @@ import { createVuetify } from 'vuetify' // Styles import '@mdi/font/css/materialdesignicons.css' -import '../styles/layers.css' import 'vuetify/styles' // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides diff --git a/templates/vue/unocss-wind4/index.html b/templates/vue/unocss-wind4/index.html index aaf3eec..f88041d 100644 --- a/templates/vue/unocss-wind4/index.html +++ b/templates/vue/unocss-wind4/index.html @@ -2,6 +2,7 @@ + Welcome to Vuetify 4 diff --git a/templates/vue/unocss-wind4/src/styles/layers.css b/templates/vue/unocss-wind4/public/layers.css similarity index 100% rename from templates/vue/unocss-wind4/src/styles/layers.css rename to templates/vue/unocss-wind4/public/layers.css diff --git a/templates/vue/unocss-wind4/src/plugins/vuetify.ts b/templates/vue/unocss-wind4/src/plugins/vuetify.ts index 0e99ae1..d99bee3 100644 --- a/templates/vue/unocss-wind4/src/plugins/vuetify.ts +++ b/templates/vue/unocss-wind4/src/plugins/vuetify.ts @@ -10,7 +10,6 @@ import { forVuetify } from '../theme/breakpoints' // Styles import '@mdi/font/css/materialdesignicons.css' -import '../styles/layers.css' import 'vuetify/styles' // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides