فرم‌سازی در Vue به ساده‌ترین شکل ممکن با Vueform

این پروژه واقعا کاربردیه و کسایی که vue کار میکنند به نظمر حتما باید بشناسند این رو. با این پروژه من یک کرادجنریتور ساختم که توی داشبردهام ازش استفاده میکنم.

خود سایتش یه فرم بیلدر داره که میتونی فرمتون رو بسازید و فقط کانفیگش رو کپی کنید داخل پروژتون همچنین یه دستیار Ai داره که صرفا بهش میگید چی میخواید و تمام.

بریم سراغش

Vueform چیست و چرا بین دولوپرها محبوب شده؟

Vueform یک ابزار حرفه‌ای برای ساخت فرم در اکوسیستم Vue.js است که تمرکز اصلی‌اش روی اینه که ساخت فرم‌های پیچیده رو سریع، استاندارد و بدون دردسر کنه.

در واقع Vueform فقط یه “فرم‌ساز ساده” نیست؛ بیشتر شبیه یک Form Engine کامل هست که هم UI آماده میده، هم validation، هم state management و هم قابلیت توسعه بالا.

سایت رسمی: Vueform

سازگاری با Tailwind و استایل‌دهی مدرن

یکی از نکات مهم Vueform اینه که خیلی خوب با ابزارهای مدرن UI مثل Tailwind CSS سازگاره.

یعنی چی دقیقاً؟

• می‌تونی استایل‌های پیش‌فرض Vueform رو نگه داری

• یا به راحتی override کنی با کلاس‌های Tailwind

• یا حتی فرم رو کامل “headless style” کنی و خودت UI رو از صفر طراحی کنی

این یعنی Vueform تو رو محدود نمی‌کنه؛ برعکس، خودش رو با استایل سیستم تو هماهنگ می‌کنه.

تم‌ها (Themes) و استایل‌های آماده

Vueform چند تا theme از پیش طراحی‌شده داره که باعث میشه بدون حتی یک خط CSS، فرم‌های حرفه‌ای داشته باشی.

ویژگی تم‌ها:

• طراحی آماده (Modern / Clean / Minimal)

• هماهنگ با UI های امروزی

• مناسب dark/light mode

• قابل شخصی‌سازی کامل (colors, spacing, border radius و ...)

در عمل تو می‌تونی:

• با یک theme شروع کنی

• بعدش کم‌کم customize کنی

• یا کلاً سیستم طراحی خودت رو جایگزین کنی

معماری فنی Vueform (چرا حرفه‌ای حساب میشه؟)

Vueform فقط چند input ساده نیست. ساختارش این شکلیه:

1. Schema-based Form

فرم‌ها معمولاً با یک schema تعریف میشن، یعنی:

• ساختار فرم جدا از UI تعریف میشه

• داده‌ها تمیز و قابل مدیریت هستن

• برای فرم‌های بزرگ خیلی بهینه‌تره

2. Reactive State Management

همه input ها reactive هستن (بر پایه Vue reactivity system)، یعنی:

• تغییر یک فیلد = آپدیت فوری state

• بدون نیاز به مدیریت دستی پیچیده

3. Validation Engine داخلی

Vueform خودش یک سیستم validation داره که می‌تونه:

• required fields

• email / number / pattern validation

• conditional rules

• async validation (مثلاً چک کردن یوزرنیم از API)

رو پشتیبانی کنه.

4. Component-based Architecture

هر input در Vueform یک کامپوننت مستقل و قابل reuse هست:

• text input

• select

• checkbox

• date picker

• file upload

و حتی می‌تونی کامپوننت سفارشی خودت رو هم اضافه کنی.

چرا Vueform از فرم‌های معمولی بهتره؟

اگر بخوای با Vue معمولی یا حتی کتابخونه‌های ساده‌تر کار کنی:

• باید validation رو خودت هندل کنی

• state management پیچیده میشه

• UI و logic قاطی میشه

• در پروژه‌های بزرگ خیلی سریع messy میشه

ولی Vueform این‌ها رو جدا می‌کنه:

UI + Logic + Validation = Modular & clean

مناسب چه پروژه‌هایی هست؟

Vueform بیشتر به درد این سناریوها می‌خوره:

• داشبوردهای حرفه‌ای (Admin Panel)

• فرم‌های چندمرحله‌ای (Multi-step forms)

• سیستم‌های ثبت‌نام پیچیده

• فرم‌های سازمانی (Enterprise forms)

• پروژه‌هایی که scalability مهمه

چند نمونه کاربردی از Vueform در عمل

برای اینکه بهتر بفهمیم Vueform چطور کار می‌کنه، چند سناریوی واقعی رو با هم ببینیم.

1) فرم ثبت‌نام ساده (Sign Up Form)

یه فرم معمولی ولی تمیز:

• نام کاربری

• ایمیل

• رمز عبور

• تکرار رمز

در Vueform این مدل فرم‌ها معمولاً با schema ساخته میشن:

{
  type: 'form',
  elements: {
    name: {
      type: 'text',
      label: 'نام کامل',
      rules: ['required']
    },
    email: {
      type: 'text',
      inputType: 'email',
      label: 'ایمیل',
      rules: ['required', 'email']
    },
    password: {
      type: 'text',
      inputType: 'password',
      label: 'رمز عبور',
      rules: ['required', 'min:8']
    }
  }
}

📌 نکته:

دیگه لازم نیست دستی state و validation بنویسی، همه چیز declarative هست.

2) فرم تماس با ما (Contact Form)

این یکی خیلی رایجه:

• نام

• ایمیل

• موضوع

• پیام

Vueform اینجا خیلی به درد می‌خوره چون validation رو خودش هندل می‌کنه:

{
  type: 'form',
  elements: {
    full_name: {
      type: 'text',
      label: 'نام',
      rules: ['required']
    },
    email: {
      type: 'text',
      inputType: 'email',
      label: 'ایمیل',
      rules: ['required', 'email']
    },
    message: {
      type: 'textarea',
      label: 'پیام شما',
      rules: ['required', 'min:20']
    }
  }
}

📌 اینجا Vueform خودش:

• error message ها رو نمایش میده

• validation لحظه‌ای انجام میده

• UI رو مرتب نگه میداره
  

3) فرم چندمرحله‌ای (Multi-Step Form)

این یکی جاییه که Vueform واقعاً می‌درخشه.

مثلاً:

مرحله 1: اطلاعات شخصی

مرحله 2: اطلاعات حساب

مرحله 3: تایید نهایی

Vueform اینو خیلی clean مدیریت می‌کنه:

• step navigation

• حفظ state بین مراحل

• validation در هر مرحله

📌 چیزی که معمولاً تو Vue خام خیلی دردسر داره، اینجا آماده‌ست.

4) فرم آپلود فایل (File Upload Form)

مثلاً برای CV یا مدارک:

• آپلود رزومه PDF

• آپلود تصویر پروفایل

• محدودیت حجم فایل

Vueform اینجا هم built-in support داره:

• drag & drop upload

• progress bar

• file validation (size/type)
  

5) فرم داینامیک (Conditional Form)

یکی از حرفه‌ای‌ترین use case ها:

مثلاً:

👉 اگر کاربر گفت “شرکت هستم”

➡ فیلدهای شرکت نمایش داده بشه

👉 اگر گفت “فریلنسر هستم”

➡ فیلدهای شخصی ساده بمونه

Vueform اینو با conditional logic هندل می‌کنه:

• show/hide fields

• تغییر validation بر اساس شرایط

• فرم کاملاً dynamic