diff --git a/next-ui/src/components/apikey/GenerateDialog.vue b/next-ui/src/components/apikey/GenerateDialog.vue
index 18724f26..2673e004 100644
--- a/next-ui/src/components/apikey/GenerateDialog.vue
+++ b/next-ui/src/components/apikey/GenerateDialog.vue
@@ -49,7 +49,7 @@
                     id: 'oWsqnh',
                   })
                 "
-                :rules="['required']"
+                :rules="[rules.required()]"
                 :error-messages="creationError"
                 :disabled="isLoading || !!createdKey"
                 autofocus
@@ -143,8 +143,10 @@ import { useMessagesStore } from '@/stores/messages'
 import type { components } from '@/generated/openapi/komga'
 import { useClipboard } from '@vueuse/core'
 import type { VDialog } from 'vuetify/components'
+import { useRules } from 'vuetify/labs/rules'
 
 const intl = useIntl()
+const rules = useRules()
 const messagesStore = useMessagesStore()
 const { isSupported: clipboardSupported, copy, copied } = useClipboard({ copiedDuring: 3000 })
 
diff --git a/next-ui/src/components/dialog/Confirm.vue b/next-ui/src/components/dialog/Confirm.vue
index b010a7f2..721f23d2 100644
--- a/next-ui/src/components/dialog/Confirm.vue
+++ b/next-ui/src/components/dialog/Confirm.vue
@@ -53,7 +53,7 @@
             />
             <v-checkbox
               v-if="mode === 'checkbox'"
-              :rules="['required']"
+              :rules="[rules.required()]"
               hide-details
               :color="colorEffective"
               :label="
@@ -105,8 +105,10 @@
 <script setup lang="ts">
 import { defineMessage, useIntl } from 'vue-intl'
 import type { DialogConfirmProps } from '@/types/dialog'
+import { useRules } from 'vuetify/labs/rules'
 
 const intl = useIntl()
+const rules = useRules()
 
 const showDialog = defineModel<boolean>('dialog', { required: false })
 const emit = defineEmits<{
diff --git a/next-ui/src/components/import/readlist/Table.vue b/next-ui/src/components/import/readlist/Table.vue
index 41a8344e..3471298f 100644
--- a/next-ui/src/components/import/readlist/Table.vue
+++ b/next-ui/src/components/import/readlist/Table.vue
@@ -151,7 +151,7 @@
             <v-col>
               <v-text-field
                 v-model="readListName"
-                :rules="['required']"
+                :rules="[rules.required()]"
                 :disabled="finishedState"
                 clearable
                 :label="
@@ -238,6 +238,7 @@ import { useMessagesStore } from '@/stores/messages'
 import type { ErrorCause } from '@/api/komga-client'
 import { commonMessages } from '@/utils/i18n/common-messages'
 import { PageRequest } from '@/types/PageRequest'
+import { useRules } from 'vuetify/labs/rules'
 
 class ReadListEntry {
   index: number
@@ -282,6 +283,7 @@ class ReadListEntry {
 
 const display = useDisplay()
 const intl = useIntl()
+const rules = useRules()
 const messagesStore = useMessagesStore()
 
 const { match, loading = false } = defineProps<{
diff --git a/next-ui/src/components/library/form/StepGeneral.vue b/next-ui/src/components/library/form/StepGeneral.vue
index 0464fa8f..641cb958 100644
--- a/next-ui/src/components/library/form/StepGeneral.vue
+++ b/next-ui/src/components/library/form/StepGeneral.vue
@@ -4,7 +4,7 @@
       <v-col>
         <v-text-field
           v-model="model.name"
-          :rules="['required']"
+          :rules="[rules.required()]"
           :label="
             $formatMessage({
               description: 'Form add/edit library: General - library name',
@@ -21,7 +21,7 @@
       <v-col>
         <v-text-field
           v-model="model.root"
-          :rules="['required']"
+          :rules="[rules.required()]"
           :label="
             $formatMessage({
               description: 'Form add/edit library: General - root directory',
@@ -73,8 +73,10 @@
 import type { components } from '@/generated/openapi/komga'
 import RemoteFileList from '@/components/RemoteFileList.vue'
 import { useDisplay } from 'vuetify'
+import { useRules } from 'vuetify/labs/rules'
 
 const display = useDisplay()
+const rules = useRules()
 
 const id = useId()
 
diff --git a/next-ui/src/components/server/Settings.vue b/next-ui/src/components/server/Settings.vue
index de2df6d4..5153a8bf 100644
--- a/next-ui/src/components/server/Settings.vue
+++ b/next-ui/src/components/server/Settings.vue
@@ -103,7 +103,7 @@
                 })
               "
               :min="1"
-              :rules="['required']"
+              :rules="[rules.required()]"
             ></v-number-input>
           </v-col>
         </v-row>
@@ -136,7 +136,7 @@
                 })
               "
               :min="1"
-              :rules="['required']"
+              :rules="[rules.required()]"
             ></v-number-input>
             <v-checkbox
               v-model="proxyModel.value.renewRememberMeKey"
@@ -215,8 +215,7 @@
               :persistent-placeholder="!!settings?.serverContextPath.configurationSource"
               clearable
               :rules="[
-                [
-                  'pattern',
+                rules.pattern(
                   /^\/[-a-zA-Z0-9_\/]*[a-zA-Z0-9]$/,
                   $formatMessage({
                     description:
@@ -225,7 +224,7 @@
                       'Must start with \'/\', not end with \'/-_\', and contain only \'/-_a-z0-9\'',
                     id: 'Lto2Lg',
                   }),
-                ],
+                ),
               ]"
               ><template
                 v-if="!!settings?.serverContextPath.configurationSource"
@@ -329,8 +328,10 @@ import { ThumbnailSize, thumbnailSizeMessages } from '@/types/ThumbnailSize'
 import { useIntl } from 'vue-intl'
 import type { components } from '@/generated/openapi/komga'
 import { watchImmediate } from '@vueuse/core'
+import { useRules } from 'vuetify/labs/rules'
 
 const intl = useIntl()
+const rules = useRules()
 
 const { settings, loading = false } = defineProps<{
   settings?: components['schemas']['SettingsDto']
diff --git a/next-ui/src/components/user/form/ChangePassword.vue b/next-ui/src/components/user/form/ChangePassword.vue
index e07f94e9..cadb68c3 100644
--- a/next-ui/src/components/user/form/ChangePassword.vue
+++ b/next-ui/src/components/user/form/ChangePassword.vue
@@ -1,7 +1,7 @@
 <template>
   <v-text-field
     v-model="newPassword"
-    :rules="['required']"
+    :rules="[rules.required()]"
     :label="
       $formatMessage({
         description: 'User password change dialog: New Password field label',
@@ -44,6 +44,10 @@
 </template>
 
 <script setup lang="ts">
+import { useRules } from 'vuetify/labs/rules'
+
+const rules = useRules()
+
 const newPassword = defineModel<string>()
 
 const confirmPassword = ref<string>()
diff --git a/next-ui/src/components/user/form/CreateEdit.vue b/next-ui/src/components/user/form/CreateEdit.vue
index 86550332..98733073 100644
--- a/next-ui/src/components/user/form/CreateEdit.vue
+++ b/next-ui/src/components/user/form/CreateEdit.vue
@@ -6,7 +6,7 @@
           <v-text-field
             v-model="user!.email"
             autofocus
-            :rules="['required', 'email']"
+            :rules="[rules.required(), rules.email()]"
             :label="
               $formatMessage({
                 description: 'User creation dialog: Email field',
@@ -21,7 +21,7 @@
         <v-col>
           <v-text-field
             v-model="user.password"
-            :rules="['required']"
+            :rules="[rules.required()]"
             :label="
               $formatMessage({
                 description: 'User creation dialog: Password field',
@@ -184,7 +184,7 @@
             })
           "
           :min="0"
-          :rules="['required']"
+          :rules="[rules.required()]"
         />
       </v-col>
     </v-row>
@@ -264,8 +264,10 @@ import { useIntl } from 'vue-intl'
 import { commonMessages } from '@/utils/i18n/common-messages'
 import { useQuery } from '@pinia/colada'
 import { PageRequest } from '@/types/PageRequest'
+import { useRules } from 'vuetify/labs/rules'
 
 const intl = useIntl()
+const rules = useRules()
 
 type UserExtend = {
   id?: string
diff --git a/next-ui/src/pages/claim.vue b/next-ui/src/pages/claim.vue
index c8aeed4d..c506b34b 100644
--- a/next-ui/src/pages/claim.vue
+++ b/next-ui/src/pages/claim.vue
@@ -45,7 +45,7 @@
               })
             "
             autofocus
-            :rules="['required', 'email']"
+            :rules="[rules.required(), rules.email()]"
           />
         </v-col>
       </v-row>
@@ -61,7 +61,7 @@
                 id: 'U3Uo3q',
               })
             "
-            :rules="['required']"
+            :rules="[rules.required()]"
             autocomplete="off"
             :type="showPassword ? 'text' : 'password'"
             :append-inner-icon="showPassword ? 'i-mdi:eye' : 'i-mdi:eye-off'"
@@ -137,9 +137,11 @@ import { useIntl } from 'vue-intl'
 import { commonMessages } from '@/utils/i18n/common-messages'
 import { useClaimServer, useClaimStatus } from '@/colada/claim'
 import { useLogin } from '@/colada/users'
+import { useRules } from 'vuetify/labs/rules'
 
 const messagesStore = useMessagesStore()
 const intl = useIntl()
+const rules = useRules()
 
 const form = ref()
 const username = ref('')
diff --git a/next-ui/src/pages/login.vue b/next-ui/src/pages/login.vue
index e869e278..0198b823 100644
--- a/next-ui/src/pages/login.vue
+++ b/next-ui/src/pages/login.vue
@@ -35,7 +35,7 @@
               })
             "
             autofocus
-            :rules="['required', 'email']"
+            :rules="[rules.required(), rules.email()]"
           />
         </v-col>
       </v-row>
@@ -52,7 +52,7 @@
               })
             "
             type="password"
-            :rules="['required']"
+            :rules="[rules.required()]"
             :error-messages="loginError"
             @update:model-value="loginError = ''"
           />
@@ -132,10 +132,12 @@ import { commonMessages } from '@/utils/i18n/common-messages'
 import { useAppStore } from '@/stores/app'
 import { useLogin } from '@/colada/users'
 import { useClaimStatus } from '@/colada/claim'
+import { useRules } from 'vuetify/labs/rules'
 
 const messagesStore = useMessagesStore()
 const intl = useIntl()
 const appStore = useAppStore()
+const rules = useRules()
 
 const form = ref()
 const username = ref('')