chore: use @vee-validate/nuxt

components/form/FormChipGroup.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 type Item = {
 	title: string
 	value: string

components/form/FormCombobox.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 const props = defineProps({
 	name: {
 		type: String,

components/form/FormRadio.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 const props = defineProps({
 	name: {
 		type: String,

components/form/FormRadioGroup.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 type Item = {
 	title: string
 	value: string

components/form/FormSelectField.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 const props = defineProps({
 	name: {
 		type: String,

components/form/FormSwitch.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-
 const props = defineProps({
 	name: {
 		type: String,

components/form/FormTextField.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useField } from 'vee-validate'
-import { defineProps, toRef } from 'vue'
-
 const props = defineProps({
 	name: {
 		type: String,

components/generator/settings/GeneratorSettingsDataController.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineRule, useForm } from 'vee-validate'
+import { defineRule } from 'vee-validate'
 
 const emit = defineEmits<{
 	(e: 'hasErrors', state: boolean): void

components/generator/settings/GeneratorSettingsDataProcessingForm.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useForm } from 'vee-validate'
-
 const props = defineProps({
 	category: {
 		type: [String as () => DataProcessingCategory],

components/generator/settings/GeneratorSettingsDataProcessingFormBrowserStore.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useForm } from 'vee-validate'
-
 const props = defineProps({
 	modelValue: {
 		type: Object,

nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
 		'@nuxtjs/sitemap',
 		'@vueuse/nuxt',
 		'@nuxt/eslint',
+		'@vee-validate/nuxt',
 		'vuetify-nuxt-module'
 	],
 	css: [
@@ -195,6 +196,18 @@ export default defineNuxtConfig({
 		},
 	},
 
+	// VeeValidate config (see https://vee-validate.logaretm.com/v4/integrations/nuxt)
+	veeValidate: {
+		autoImports: true,
+		// Use different names for components
+		componentNames: {
+			Form: 'VeeForm',
+			Field: 'VeeField',
+			FieldArray: 'VeeFieldArray',
+			ErrorMessage: 'VeeErrorMessage',
+		},
+	},
+
 	// Sitemap module config (see https://nuxtseo.com/sitemap)
 	site: {
 		url: 'https://privacy-policy-generator.web.florist',

package.json

@@ -27,6 +27,7 @@
 		"@nuxtjs/tailwindcss": "^6.12.1",
 		"@types/node": "^22",
 		"@vee-validate/i18n": "^4.13.2",
+		"@vee-validate/nuxt": "^4.13.2",
 		"@vee-validate/rules": "^4.13.2",
 		"@vueuse/nuxt": "^11.1.0",
 		"autoprefixer": "^10.4.20",