feat(front): integrate VeeValidate for form validation and add InputField and FormButton components

front/components/Field/FormButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button @click="() => emit('click', form)" :disabled="!isValid">
+    <slot />
+  </Button>
+</template>
+<script setup lang="ts">
+import { Button } from '~/components/ui/button'
+import { useFormContext } from 'vee-validate'
+const form = useFormContext()
+
+const isValid = ref(false)
+watch(
+  () => form?.values,
+  async () => {
+    const { valid } = await form?.validate()
+    isValid.value = valid
+  },
+  { deep: true }
+)
+
+const emit = defineEmits<{
+  (e: 'click', form: ReturnType<typeof useFormContext>): void
+}>()
+</script>

front/components/Field/InputField.vue

@@ -0,0 +1,16 @@
+<template>
+  <Field :name="props.name" v-slot="{ field }">
+    <div class="flex flex-col gap-2">
+      <Label v-if="props.label">{{ props.label }}</Label>
+      <Input v-bind="field" :placeholder="props.placeholder" />
+    </div>
+  </Field>
+</template>
+<script setup lang="ts">
+import { Input } from '~/components/ui/input'
+const props = defineProps<{
+  name: string
+  label?: string
+  placeholder?: string
+}>()
+</script>

front/nuxt.config.ts

@@ -93,6 +93,7 @@ export default defineNuxtConfig({
     'motion-v/nuxt',
     "nuxt-lucide-icons",
     "shadcn-nuxt",
+    '@vee-validate/nuxt',
   ],
   serwist: {},
   vite: {

front/package.json

@@ -12,7 +12,11 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.3",
     "@tailwindcss/vite": "^4.1.3",
+    "@tiptap/pm": "^2.11.7",
+    "@tiptap/starter-kit": "^2.11.7",
+    "@tiptap/vue-3": "^2.11.7",
     "@types/lodash-es": "^4.17.12",
+    "@vee-validate/nuxt": "^4.15.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",