[Feature Request] Validation rules

[kingyue737]

Vuetify v3.8 introduced a new awesome feature Validation Rules into labs. We could also add this feature to the nuxt module.

Wanna take a try, but not sure how to implement.

Maybe we could add a field in the module config to let users decide whether to enable this feature. If enabled, auto import useRules composable and allow users to customize ruleOptions of createRulesPlugin via an extra runtime hook?

[mtdvlpr]

@userquin, this would be awesome!

[userquin]

New version will have support for rules.

In the meantime, cannot just add a plugin?:

// app/plugins/vuetify-rules.client.ts
import type { ValidationRuleBuilderWithoutOptions } from 'vuetify/labs/rules'
import { createRulesPlugin } from 'vuetify/labs/rules'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vuetify:ready', (vuetify) => {
    nuxtApp.vueApp.use(createRulesPlugin({
      aliases: {
        pinCode: <ValidationRuleBuilderWithoutOptions>((err) => {
          return v => (/^\d{4}$/.test(v)) || err || 'Field must contain a 4-digit PIN'
        }),
      },
    }, vuetify.locale))
  })
})

or maybe this?

// app/plugins/vuetify-rules.client.ts
import { defineNuxtPlugin, useNuxtApp } from '#imports'
import { createRulesPlugin } from 'vuetify/labs/rules'

export default defineNuxtPlugin({
  name: 'vuetify-labs-rules-client-plugin',
  dependsOn: ['vuetify:nuxt:client:plugin'],
  setup(nuxtApp) {
    const vuetify = useNuxtApp().$vuetify
    nuxtApp.vueApp.use(createRulesPlugin({
       aliases: {
        pinCode: <ValidationRuleBuilderWithoutOptions>((err) => {
          return v => (/^\d{4}$/.test(v)) || err || 'Field must contain a 4-digit PIN'
        }),
      },
    }, vuetify.locale))
  },
})

[userquin]

@kingyue737 @mtdvlpr check https://github.com/userquin/vuetify-nuxt-module-nuxt-v4