feat!: add modern SASS compiler support

date-io-playground/nuxt.config.ts

@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  compatibilityDate: '2024-08-15',
   // ssr: false,
   sourcemap: true,
   imports: {

date-io-playground/package.json

@@ -23,18 +23,18 @@
     "@types/moment": "^2.13.0",
     "@types/moment-hijri": "^2.1.0",
     "@types/moment-jalaali": "^0.7.6",
-    "@unocss/nuxt": "^0.61.3",
+    "@unocss/nuxt": "^0.62.1",
     "date-fns": "^2.30.0",
     "date-fns-jalali": "^2.19.0-2",
     "dayjs": "^1.11.10",
     "luxon": "^3.4.3",
     "moment": "^2.29.4",
     "moment-hijri": "^2.1.2",
     "moment-jalaali": "0.9.2",
-    "nuxt": "^3.12.3",
-    "sass": "^1.63.6",
-    "typescript": "^5.4.3",
-    "vue-tsc": "^2.0.26",
+    "nuxt": "^3.12.4",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "workspace:*"
   }
 }

docs/package.json

@@ -14,12 +14,14 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.27",
+    "@iconify-json/carbon": "^1.1.37",
     "@types/node": "^20.6.0",
-    "@vite-pwa/assets-generator": "^0.2.2",
-    "@vite-pwa/vitepress": "^0.3.1",
-    "sitemap": "^7.1.1",
-    "unocss": "^0.58.0",
-    "vitepress": "^1.0.1"
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/vitepress": "^0.5.0",
+    "sitemap": "^8.0.0",
+    "unocss": "^0.62.1",
+    "vite-plugin-pwa": "^0.20.1",
+    "vitepress": "^1.3.2",
+    "workbox-window": "^7.1.0"
   }
 }

modern-sass-compiler/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

modern-sass-compiler/assets/custom-vuetify.scss

@@ -0,0 +1,3 @@
+@use 'vuetify/settings' with (
+  $button-font-weight: 700,
+);

modern-sass-compiler/assets/main.scss

@@ -0,0 +1,4 @@
+@use 'vuetify' with (
+  $utilities: false,
+  $color-pack: false,
+);

modern-sass-compiler/assets/settings.scss

@@ -0,0 +1,5 @@
+/* DON'T USE @use here */
+@forward 'vuetify/settings' with (
+  $utilities: false,
+  $button-height: 40px,
+);

modern-sass-compiler/layouts/default.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-sheet
+          class="pa-4 d-flex align-center flex-column"
+          rounded="lg"
+        >
+          <NuxtPage />
+        </v-sheet>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

modern-sass-compiler/nuxt.config.ts

@@ -0,0 +1,69 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2024-08-15',
+  sourcemap: true,
+  imports: {
+    autoImport: true,
+    injectAtEnd: true,
+  },
+  modules: ['@unocss/nuxt', 'vuetify-nuxt-module'],
+  vuetify: {
+    moduleOptions: {
+      ssrClientHints: {
+        reloadOnFirstRequest: false,
+        prefersColorScheme: true,
+        prefersColorSchemeOptions: {
+          useBrowserThemeOnly: false,
+        },
+        viewportSize: true,
+      },
+      styles: { configFile: 'assets/settings.scss' },
+    },
+  },
+  vite: {
+    clearScreen: false,
+    define: {
+      'process.env.DEBUG': false,
+    },
+    build: {
+      target: 'esnext',
+    },
+    vue: {
+      script: {
+        propsDestructure: true,
+      },
+    },
+  },
+  routeRules: {
+    '/no-ssr': { ssr: false },
+  },
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+  },
+  app: {
+    baseURL: '/',
+    head: {
+      meta: [
+        { charset: 'utf-8' },
+      ],
+    },
+  },
+  /*
+  css: ['~/assets/main.scss'],
+*/
+  features: {
+    devLogs: false,
+    inlineStyles: false,
+  },
+  experimental: {
+    payloadExtraction: false,
+    typedPages: false,
+    watcher: 'parcel',
+  },
+  devtools: {
+    enabled: true,
+  },
+})

modern-sass-compiler/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "vuetify-nuxt-modern-sass-playground",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "@iconify-json/mdi": "^1.1.68",
+    "vuetify": "^3.7.0"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@unocss/nuxt": "^0.62.1",
+    "nuxt": "^3.12.4",
+    "sass": "^1.77.8",
+    "sass-embedded": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29",
+    "vuetify-nuxt-module": "workspace:*"
+  }
+}

modern-sass-compiler/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <v-btn>Button</v-btn>
+  </div>
+</template>

modern-sass-compiler/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

modern-sass-compiler/unocss.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig, presetIcons } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetIcons({
+      scale: 1.2,
+    }),
+  ],
+})

modern-sass-compiler/vuetify.config.ts

@@ -0,0 +1,26 @@
+import { md3 } from 'vuetify/blueprints'
+import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration'
+
+export default defineVuetifyConfiguration({
+  ssr: {
+    clientWidth: 100,
+  },
+  blueprint: md3,
+  theme: {
+    defaultTheme: 'light',
+    themes: {
+      light: {
+        dark: false,
+      },
+      dark: {
+        dark: true,
+      },
+    },
+  },
+  date: {
+    adapter: 'vuetify',
+  },
+  icons: {
+    defaultSet: 'unocss-mdi',
+  },
+})

package.json

@@ -2,7 +2,7 @@
   "name": "vuetify-nuxt-module",
   "type": "module",
   "version": "0.16.1",
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@9.7.1",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -65,46 +65,46 @@
     "release": "bumpp && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.3",
+    "@nuxt/kit": "^3.12.4",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "local-pkg": "^0.5.0",
     "pathe": "^1.1.2",
     "perfect-debounce": "^1.0.0",
-    "ufo": "^1.5.3",
-    "unconfig": "^0.3.11",
+    "ufo": "^1.5.4",
+    "unconfig": "^0.5.5",
     "vite-plugin-vuetify": "^2.0.3",
-    "vuetify": "^3.6.12"
+    "vuetify": "^3.7.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
-    "@antfu/ni": "^0.21.10",
+    "@antfu/ni": "^0.22.4",
     "@date-io/luxon": "^2.17.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@iconify-json/carbon": "^1.1.21",
-    "@iconify-json/mdi": "^1.1.55",
-    "@mdi/js": "^7.3.67",
+    "@iconify-json/carbon": "^1.1.37",
+    "@iconify-json/mdi": "^1.1.68",
+    "@mdi/js": "^7.4.47",
     "@nuxt/devtools": "latest",
-    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/module-builder": "^0.8.3",
     "@nuxt/schema": "^3.12.3",
     "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/i18n": "^8.0.0",
     "@parcel/watcher": "^2.3.0",
     "@types/node": "^18",
-    "@unocss/nuxt": "^0.58.4",
+    "@unocss/nuxt": "^0.62.1",
     "bumpp": "^9.2.0",
     "eslint": "^8.54.0",
     "luxon": "^3.4.3",
     "nuxt": "^3.10.2",
-    "publint": "^0.2.5",
-    "rimraf": "^5.0.5",
-    "sass": "^1.63.6",
-    "typescript": "^5.3.3",
+    "publint": "^0.2.10",
+    "rimraf": "^6.0.1",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
     "vite": "^5.0.12",
-    "vitest": "^1.4.0",
-    "vue-tsc": "^2.0.26"
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.0.29"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -114,8 +114,8 @@
     }
   },
   "resolutions": {
-    "@nuxt/kit": "3.12.3",
-    "vite": "5.3.2",
+    "@nuxt/kit": "3.12.4",
+    "vite": "5.4.1",
     "vue": "3.4.31"
   },
   "build": {

playground/nuxt.config.ts

@@ -4,6 +4,7 @@ import LayerModule from './layer-module'
 // import { transformAssetUrls } from "vite-plugin-vuetify";
 
 export default defineNuxtConfig({
+  compatibilityDate: '2024-08-15',
   extends: ['layers/vuetify-layer'],
   // ssr: false,
   sourcemap: true,

playground/package.json

@@ -12,19 +12,19 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@iconify-json/mdi": "^1.1.55",
-    "@mdi/js": "^7.3.67",
+    "@iconify-json/mdi": "^1.1.68",
+    "@mdi/js": "^7.4.47",
     "luxon": "^3.4.3",
-    "vuetify": "^3.6.12"
+    "vuetify": "^3.7.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxtjs/i18n": "^8.2.0",
-    "@unocss/nuxt": "^0.61.3",
-    "nuxt": "^3.12.3",
-    "sass": "^1.63.6",
-    "typescript": "^5.4.3",
-    "vue-tsc": "^2.0.26",
+    "@nuxtjs/i18n": "^8.3.3",
+    "@unocss/nuxt": "^0.62.1",
+    "nuxt": "^3.12.4",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "workspace:*"
   }
 }