feat: default rules imports to core for Vuetify 4.2.0+

apps/playground/nuxt.config.ts

@@ -46,7 +46,8 @@ export default defineNuxtConfig({
       },
       styles: { configFile: '~/assets/custom-vuetify.scss', experimental: { cache: true } },
       rulesConfiguration: {
-        fromLabs: true,
+        // `fromLabs` is optional: rules are core from Vuetify 4.2.0, so this
+        // defaults to `false` (imports `useRules`/`createRulesPlugin` from `vuetify`).
         configFile: '~/vuetify.rules.ts',
       },
     },

docs/guide/features/globals/composables.md

@@ -1,6 +1,7 @@
 # Vuetify Composables
 
 Manual imports of Vuetify composables are no longer required; auto-import is enabled by default for:
+
 - [useDate](https://vuetifyjs.com/en/api/use-date/)
 - [useDefaults](https://vuetifyjs.com/en/api/use-defaults/)
 - [useDisplay](https://vuetifyjs.com/en/api/use-display/)
@@ -17,16 +18,17 @@ You can disable auto-import by setting `moduleOptions.importComposables: false`,
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
-      importComposables: ['useDisplay', 'useTheme']
-    }
-  }
-})
+      importComposables: ["useDisplay", "useTheme"],
+    },
+  },
+});
 ```
 
 If you are using other composables that conflict with Vuetify's, you can enable `moduleOptions.prefixComposables: true` to prefix the Vuetify composables with `V`:
+
 - `useDate` => `useVDate`
 - `useDefaults` => `useVDefaults`
 - `useLayout` => `useVLayout`
@@ -43,13 +45,13 @@ You can also pass an array of composable names to prefix only those:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
-      prefixComposables: ['useLayout', 'useTheme']
-    }
-  }
-})
+      prefixComposables: ["useLayout", "useTheme"],
+    },
+  },
+});
 ```
 
 ### useLayout collision with Nuxt
@@ -59,13 +61,14 @@ Nuxt ships its own [`useLayout`](https://nuxt.com/docs/api/composables/use-layou
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
-    'imports:extend'(imports) {
-      const layout = imports.find(i => i.as === 'useLayout' && i.from === '#app/composables/layout')
-      if (layout)
-        layout.as = 'useNuxtLayout'
+    "imports:extend"(imports) {
+      const layout = imports.find(
+        (i) => i.as === "useLayout" && i.from === "#app/composables/layout",
+      );
+      if (layout) layout.as = "useNuxtLayout";
     },
   },
-})
+});
 ```
 
 ### useRules
@@ -78,16 +81,17 @@ You can configure it using `moduleOptions.enableRules` and `moduleOptions.rulesC
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
       enableRules: true, // default true for Vuetify 3.8+
       rulesConfiguration: {
-        fromLabs: true // default true until promotion
-      }
-    }
-  }
-})
+        // `fromLabs` is optional: it defaults to `true` before Vuetify 4.2.0
+        // (rules lived in labs) and `false` from 4.2.0 on (rules are core).
+      },
+    },
+  },
+});
 ```
 
 :::

docs/guide/getting-started/migration.md

@@ -52,24 +52,24 @@ Use `styles: 'none'` instead.
 
 ```ts [Before (0.19.x)]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
       disableVuetifyStyles: true,
     },
   },
-})
+});
 ```
 
 ```ts [After (1.0.0)]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
-      styles: 'none',
+      styles: "none",
     },
   },
-})
+});
 ```
 
 :::
@@ -82,26 +82,26 @@ The `'sass'` shortcut, which loaded Vuetify's raw SASS sources so you could over
 
 ```ts [Before (0.19.x)]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
-      styles: 'sass',
+      styles: "sass",
     },
   },
-})
+});
 ```
 
 ```ts [After (1.0.0)]
 export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
+  modules: ["vuetify-nuxt-module"],
   vuetify: {
     moduleOptions: {
       styles: {
-        configFile: 'assets/settings.scss',
+        configFile: "assets/settings.scss",
       },
     },
   },
-})
+});
 ```
 
 :::
@@ -121,27 +121,27 @@ export default defineNuxtConfig({
   vuetify: {
     moduleOptions: {
       styles: {
-        configFile: 'assets/settings.scss',
+        configFile: "assets/settings.scss",
         experimental: {
           cache: true,
         },
       },
     },
   },
-})
+});
 ```
 
 ```ts [After (1.0.0)]
 export default defineNuxtConfig({
   vuetify: {
     moduleOptions: {
       styles: {
-        configFile: 'assets/settings.scss',
+        configFile: "assets/settings.scss",
         cache: true,
       },
     },
   },
-})
+});
 ```
 
 :::
@@ -173,12 +173,12 @@ export default defineNuxtConfig({
       ssrClientHints: {
         prefersColorScheme: true,
         prefersColorSchemeOptions: {
-          cookieName: 'color-scheme',
+          cookieName: "color-scheme",
         },
       },
     },
   },
-})
+});
 ```
 
 ```ts [After (1.0.0)]
@@ -189,13 +189,13 @@ export default defineNuxtConfig({
         prefersColorScheme: true,
         prefersColorSchemeOptions: {
           cookie: {
-            name: 'color-scheme',
+            name: "color-scheme",
           },
         },
       },
     },
   },
-})
+});
 ```
 
 :::
@@ -211,7 +211,7 @@ export default defineNuxtConfig({
       // disableModernSassCompiler: true, // [!code --] remove
     },
   },
-})
+});
 ```
 
 ## New options
@@ -236,7 +236,7 @@ export default defineNuxtConfig({
       },
     },
   },
-})
+});
 ```
 
 ::: info
@@ -245,20 +245,19 @@ These are only available for **Vuetify 4**. On Vuetify 3, use `configFile` for s
 
 ### `rulesConfiguration.configFile`
 
-The rules configuration gained a `configFile` option, and `fromLabs` is now optional:
+The rules configuration gained a `configFile` option, and `fromLabs` is now optional (it defaults to `true` before Vuetify 4.2.0 and `false` from 4.2.0 on, where rules were promoted from labs to core):
 
 ```ts
 export default defineNuxtConfig({
   vuetify: {
     moduleOptions: {
       enableRules: true,
       rulesConfiguration: {
-        fromLabs: true,
-        configFile: 'rules.config.ts',
+        configFile: "rules.config.ts",
       },
     },
   },
-})
+});
 ```
 
 ### `prefersColorSchemeOptions.cookie` attributes
@@ -273,16 +272,16 @@ export default defineNuxtConfig({
         prefersColorScheme: true,
         prefersColorSchemeOptions: {
           cookie: {
-            name: 'color-scheme',
-            domain: '.example.com',
+            name: "color-scheme",
+            domain: ".example.com",
             secure: true,
-            sameSite: 'lax',
+            sameSite: "lax",
           },
         },
       },
     },
   },
-})
+});
 ```
 
 ## Type-only changes

packages/vuetify-nuxt-module/src/types.ts

@@ -333,9 +333,15 @@ export interface MOptions {
    * Rules configuration.
    *
    * @since v0.19.0
-   * @default true
    */
   rulesConfiguration?: {
+    /**
+     * Whether to import rules from `vuetify/labs/rules` instead of the core
+     * `vuetify` entry. Defaults to `true` before Vuetify 4.2.0 and `false`
+     * from 4.2.0 on, where rules were promoted from labs to core.
+     *
+     * @since v0.19.0
+     */
     fromLabs?: boolean
     configFile?: string
   }

packages/vuetify-nuxt-module/src/utils/config.ts

@@ -45,6 +45,14 @@ export interface VuetifyNuxtContext {
   viteVersion: string
   enableRules?: boolean
   rulesConfiguration?: { fromLabs?: boolean, configFile?: string }
+  /**
+   * Resolved import source for the rules feature: `true` imports from
+   * `vuetify/labs/rules`, `false` from the core `vuetify` entry. Rules were
+   * promoted from labs to core in Vuetify 4.2.0, so this defaults to `false`
+   * from that version on and `true` for older releases (unless `fromLabs`
+   * is set explicitly on `rulesConfiguration`).
+   */
+  rulesFromLabs?: boolean
   stylesConfigFile?: string
 }
 

packages/vuetify-nuxt-module/src/utils/configure-nuxt.ts

@@ -58,7 +58,7 @@ export async function configureNuxt (
   // transpile always vuetify and runtime folder
   nuxt.options.build.transpile.push(configKey, runtimeDir)
   if (ctx.enableRules) {
-    const rulesConfigurationFile = `vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration.mjs`
+    const rulesConfigurationFile = `vuetify/${ctx.rulesFromLabs ? 'labs-' : ''}rules-configuration.mjs`
     nuxt.options.build.transpile.push(`#build/${rulesConfigurationFile}`)
     addTemplate({
       filename: rulesConfigurationFile,
@@ -92,13 +92,13 @@ export async function configureNuxt (
   nuxt.hook('prepare:types', ({ references, nodeReferences }) => {
     references.push({ types: 'vuetify' }, { types: 'vuetify-nuxt-module/custom-configuration' }, { types: 'vuetify-nuxt-module/configuration' }, { path: ctx.resolver.resolve(runtimeDir, 'plugins/types') })
     if (ctx.enableRules) {
-      references.push({ types: `vuetify-nuxt-module/custom-${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration` })
+      references.push({ types: `vuetify-nuxt-module/custom-${ctx.rulesFromLabs ? 'labs-' : ''}rules-configuration` })
     }
 
     if (v4Available) {
       nodeReferences.push({ types: 'vuetify-nuxt-module/custom-configuration' })
       if (ctx.enableRules) {
-        nodeReferences.push({ types: `vuetify-nuxt-module/custom-${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration` })
+        nodeReferences.push({ types: `vuetify-nuxt-module/custom-${ctx.rulesFromLabs ? 'labs-' : ''}rules-configuration` })
       }
     }
   })
@@ -124,7 +124,7 @@ export async function configureNuxt (
 
     addImports(composables.map(name => {
       let from = ctx.vuetifyGte('3.4.0') || name !== 'useDate' ? 'vuetify' : 'vuetify/labs/date'
-      if (name === 'useRules' && ctx.rulesConfiguration?.fromLabs) {
+      if (name === 'useRules' && ctx.rulesFromLabs) {
         from = 'vuetify/labs/rules'
       }
       return {

packages/vuetify-nuxt-module/src/utils/layers.ts

@@ -13,9 +13,7 @@ export const MODULE_DEFAULTS: InlineModuleOptions = {
     importComposables: true,
     includeTransformAssetsUrls: true,
     styles: true,
-    rulesConfiguration: {
-      fromLabs: true,
-    },
+    rulesConfiguration: {},
   },
   vuetifyOptions: {
     labComponents: false,

packages/vuetify-nuxt-module/src/utils/loader.ts

@@ -87,6 +87,9 @@ export async function load (
   ctx.vuetifyOptions = configuration.vuetifyOptions!
   ctx.enableRules = ctx.moduleOptions.enableRules
   ctx.rulesConfiguration = ctx.moduleOptions.rulesConfiguration
+  // `rules` was promoted from labs to core in Vuetify 4.2.0: import from the
+  // core `vuetify` entry from that version on, from labs before it.
+  ctx.rulesFromLabs = ctx.rulesConfiguration?.fromLabs ?? !ctx.vuetifyGte('4.2.0')
   ctx.vuetifyFilesToWatch = Array.from(vuetifyConfigurationFilesToWatch)
   ctx.icons = prepareIcons(ctx.unocss, ctx.logger, vuetifyAppOptions, ctx.resolvePaths)
   ctx.ssrClientHints = prepareSSRClientHints(nuxt.options.app.baseURL ?? '/', ctx)

packages/vuetify-nuxt-module/src/utils/vuetify-nuxt-plugins.ts

@@ -50,8 +50,8 @@ function addVuetifyNuxtPlugin (
       if (ctx.enableRules) {
         rulesImports = [
           '',
-          `import { rulesOptions } from '#build/vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration.mjs'`,
-          `import { createRulesPlugin } from 'vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs/' : ''}rules'`,
+          `import { rulesOptions } from '#build/vuetify/${ctx.rulesFromLabs ? 'labs-' : ''}rules-configuration.mjs'`,
+          `import { createRulesPlugin } from '${ctx.rulesFromLabs ? 'vuetify/labs/rules' : 'vuetify'}'`,
         ].join('\n')
         rulesPlugin = [
           '',