fix(templates): resilient CSS layers import (#22)

J-Sek · web-flow · commit 50766d5dded6 · 2026-06-29T20:27:25.000+02:00
resolves #21
diff --git 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
@@ -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
@@ -8,14 +8,21 @@ export default defineNuxtConfig({
     'vuetify-nuxt-module',
   ],
 
+  app: {
+    head: {
+      link: [
+        { rel: 'stylesheet', href: '/layers.css' },
+      ],
+    },
+  },
+
   postcss: {
     plugins: {
       '@tailwindcss/postcss': {},
     },
   },
 
   css: [
-    'assets/styles/layers.css',
     'assets/styles/tailwind.css',
   ],
 
diff --git a/templates/nuxt/tailwind/public/layers.css b/templates/nuxt/tailwind/public/layers.css
diff --git 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/public/layers.css b/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
@@ -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/public/layers.css b/templates/nuxt/unocss-wind4/public/layers.css
diff --git a/templates/vue/base/index.html b/templates/vue/base/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="/layers.css">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to Vuetify 4</title>
diff --git a/templates/vue/base/public/layers.css 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
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="/layers.css">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to Vuetify 4</title>
diff --git a/templates/vue/tailwind/public/layers.css b/templates/vue/tailwind/public/layers.css
diff --git 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
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="/layers.css">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to Vuetify 4</title>
diff --git a/templates/vue/unocss-vuetify/public/layers.css b/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
@@ -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
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="/layers.css">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Welcome to Vuetify 4</title>
diff --git a/templates/vue/unocss-wind4/public/layers.css b/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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@layer vuetify-core, vuetify-components, vuetify-overrides, vuetify-utilities, vuetify-final;`