fix(vuetify-nuxt-module): add configurable validation rules with custom file support

AndreyYolkin · AndreyYolkin · commit 251df1f50e20 · 2026-03-04T23:29:52.000+01:00
diff --git a/apps/playground/app/pages/index.vue b/apps/playground/app/pages/index.vue
@@ -11,6 +11,7 @@
   const { isRtl } = useRtl()
   const { width, height, name: displayName } = useDisplay()
   const theme = useTheme()
+  const rules = useRules()
 
   const isDark = computed({
     get: () => theme.global.name.value === 'dark',
@@ -24,6 +25,7 @@
     email: '',
     select: null,
     date: undefined,
+    ruleValue: '',
   })
 
   watch(isRtl, val => {
@@ -184,6 +186,21 @@
         </v-card>
       </v-col>
 
+      <!-- Validation Rules -->
+      <v-col cols="12" md="6">
+        <v-card height="100%" prepend-icon="i-mdi:check-circle-outline" title="Validation Rules">
+          <v-card-text>
+            <div class="text-subtitle-2 mb-2">Input Validation (useRules)</div>
+            <v-text-field
+              v-model="formData.ruleValue"
+              label="Type something (min 3 chars)"
+              :rules="[rules.required('Field is required'), rules.minLength(3, 'At least 3 characters')]"
+              variant="outlined"
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
+
       <!-- SSR Info -->
       <v-col cols="12">
         <v-expansion-panels>
diff --git a/apps/playground/app/vuetify.rules.ts b/apps/playground/app/vuetify.rules.ts
@@ -0,0 +1,3 @@
+export default {
+  required: (v: any) => !!v || 'Field is required (custom)',
+}
diff --git a/apps/playground/nuxt.config.ts b/apps/playground/nuxt.config.ts
@@ -47,6 +47,10 @@ export default defineNuxtConfig({
         viewportSize: true,
       },
       styles: { configFile: '~/assets/custom-vuetify.scss', experimental: { cache: true } },
+      rulesConfiguration: {
+        fromLabs: true,
+        configFile: '~/vuetify.rules.ts',
+      },
     },
   },
   vite: {
diff --git a/packages/vuetify-nuxt-module/src/types.ts b/packages/vuetify-nuxt-module/src/types.ts
@@ -313,7 +313,8 @@ export interface MOptions {
    * @default true
    */
   rulesConfiguration?: {
-    fromLabs: boolean
+    fromLabs?: boolean
+    configFile?: string
   }
   /**
    * Vuetify SSR client hints.
diff --git a/packages/vuetify-nuxt-module/src/utils/config.ts b/packages/vuetify-nuxt-module/src/utils/config.ts
@@ -32,7 +32,7 @@ export interface VuetifyNuxtContext {
   vuetifyGte: (version: string) => boolean
   viteVersion: string
   enableRules?: boolean
-  rulesConfiguration?: { fromLabs: boolean }
+  rulesConfiguration?: { fromLabs?: boolean, configFile?: string }
 }
 
 export async function loadVuetifyConfiguration<U extends ExternalVuetifyOptions> (
diff --git a/packages/vuetify-nuxt-module/src/utils/configure-nuxt.ts b/packages/vuetify-nuxt-module/src/utils/configure-nuxt.ts
@@ -23,7 +23,7 @@ export async function configureNuxt (
   const runtimeDir = ctx.resolver.resolve('./runtime')
 
   // Automatically enable rules if not disabled
-  if (ctx.enableRules !== undefined) {
+  if (ctx.enableRules === undefined) {
     ctx.enableRules = ctx.vuetifyGte('3.8.0')
   }
 
@@ -51,7 +51,20 @@ export async function configureNuxt (
   // transpile always vuetify and runtime folder
   nuxt.options.build.transpile.push(configKey, runtimeDir)
   if (ctx.enableRules) {
-    nuxt.options.build.transpile.push(`#build/vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration.mjs`)
+    const rulesConfigurationFile = `vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration.mjs`
+    nuxt.options.build.transpile.push(`#build/${rulesConfigurationFile}`)
+    addTemplate({
+      filename: rulesConfigurationFile,
+      getContents: async () => {
+        if (ctx.rulesConfiguration?.configFile) {
+          const resolvedPath = await resolvePath(ctx.rulesConfiguration.configFile)
+          return `export { default as rulesOptions } from '${resolvedPath}'`
+        }
+
+        return 'export const rulesOptions = {}'
+      },
+      write: true,
+    })
   }
   // transpile vuetify nuxt plugin
   nuxt.options.build.transpile.push(/\/vuetify-nuxt-plugin\.(client|server)\.mjs$/)
@@ -98,12 +111,18 @@ export async function configureNuxt (
       composables.push('useMask')
     }
 
-    addImports(composables.map(name => ({
-      name,
-      from: ctx.vuetifyGte('3.4.0') || name !== 'useDate' ? 'vuetify' : 'vuetify/labs/date',
-      as: prefixComposables ? name.replace(/^use/, 'useV') : undefined,
-      meta: { docsUrl: name === 'useRules' ? 'https://vuetifyjs.com/en/features/rules/' : `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` },
-    })))
+    addImports(composables.map(name => {
+      let from = ctx.vuetifyGte('3.4.0') || name !== 'useDate' ? 'vuetify' : 'vuetify/labs/date'
+      if (name === 'useRules' && ctx.rulesConfiguration?.fromLabs) {
+        from = 'vuetify/labs/rules'
+      }
+      return {
+        name,
+        from,
+        as: prefixComposables ? name.replace(/^use/, 'useV') : undefined,
+        meta: { docsUrl: name === 'useRules' ? 'https://vuetifyjs.com/en/features/rules/' : `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` },
+      }
+    }))
   }
 
   if (ctx.ssrClientHints.enabled) {
diff --git a/packages/vuetify-nuxt-module/src/utils/vuetify-nuxt-plugins.ts b/packages/vuetify-nuxt-module/src/utils/vuetify-nuxt-plugins.ts
@@ -47,7 +47,7 @@ function addVuetifyNuxtPlugin (
 
       let rulesImports = ''
       let rulesPlugin = ''
-      if (mode === 'client' && ctx.enableRules) {
+      if (ctx.enableRules) {
         rulesImports = [
           '',
           `import { rulesOptions } from '#build/vuetify/${ctx.rulesConfiguration!.fromLabs ? 'labs-' : ''}rules-configuration.mjs'`,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ required: (v: any) => !!v \|\| 'Field is required (custom)',`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export interface VuetifyNuxtContext {`
`32`	`32`	`vuetifyGte: (version: string) => boolean`
`33`	`33`	`viteVersion: string`
`34`	`34`	`enableRules?: boolean`
`35`		`- rulesConfiguration?: { fromLabs: boolean }`
	`35`	`+ rulesConfiguration?: { fromLabs?: boolean, configFile?: string }`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`export async function loadVuetifyConfiguration<U extends ExternalVuetifyOptions> (`