🌲 دوستان Vue کار حتما کامپوننت های تایپ شده Vue رو یک نگاه بندازید🔥

از ویژگی هاش چندتا براتون مثال میزنم :

1️⃣پشتیبانی از حالت تاریک
2️⃣میانبرهای صفحه کلید
3️⃣آیکون ها

🌐 https://github.com/ManukMinasyan/stellar-ui

#vue #components #github
☕️ @CodeExplore

🌲ویو جی اس( Vue.js ) چیست؟

💎ویو جی اس ( Vue.js ) یک فریمورک جاوا اسکریپت برای ساخت رابط کاربری است. این فریمورک بر پایه HTML، CSS و جاوا اسکریپت ساخته شده و یک مدل برنامه نویسی مبتنی بر کامپوننت و اعلانی را فراهم می کند که به شما کمک می کند تا به طور کارآمد رابط کاربری هر پیچیدگی را توسعه دهید. ویژگی های کلیدی Vue.js عبارتند از:

🟢سادگی: شما می توانید برنامه Vue خود را در 5-6 خط کد بنویسید.
🟢معماری مبتنی بر کامپوننت: Vue.js یک معماری مبتنی بر کامپوننت را دنبال می کند.
🟢قابلیت استفاده مجدد: رویکرد مبتنی بر کامپوننت Vue امکان ایجاد کامپوننت های قابل استفاده مجدد را فراهم می کند.
🟢سرعت بالا: وبسایت های نوشته شده با Vue سرعت بالایی را دارا هستند.
🟢امکانات گسترده: Vue.js امکانات بسیاری را در اختیار توسعه دهنده قرار میدهد، از جمله ساخت کامپوننت ها، پلاگین ها، هلپر ها، ساخت وبسایت های SPA ، دسترسی کامل به route ها و رندرهای مربوطه و...

#vue
☕️ @CodeExplore

🔥اقا خیلی پیش اومده که میگن ترکیب Vue.js با Laravel یه ترکیب خفن میشه و حتما اینارو باهم استفاده کنین، ولی خب دلیلش چیه؟

🟢 راحتی در ترکیب:
‏ - Laravel و Vue.js خیلی راحت با هم کار می‌کنن. Laravel Mix که خودش با Laravel میاد، باعث می‌شه مدیریت و ترکیب کدهای فرانت‌اند و بک‌اند خیلی ساده باشه.

🟢.ساختار مرتب و قابل توسعه:
‏ - Laravel برای بخش سرور و مدیریت داده‌ها خیلی خوبه و کدها رو مرتب نگه می‌داره. Vue.js هم برای ساختن رابط کاربری خیلی عالیه و اجازه می‌ده تا بخش‌های مختلف رابط کاربری رو به قسمت‌های کوچیک تقسیم کنیم که نگهداریش راحت‌تر باشه.

🟢 عملکرد بالا:
‏ - Laravel توی انجام کارهای سنگین سمت سرور خیلی خوب عمل می‌کنه و Vue.js هم رابط کاربری رو سریع و روان می‌کنه. پس وقتی این دوتا رو با هم ترکیب می‌کنی، پروژه‌ات خیلی سریع و کارآمد می‌شه.

چون عکس گذاشتم براش نمیشه زیاد کپشن نوشت پس این پایین براتون بقیشو میزارم👇👇
#vue #laravel
☕️ @CodeExplore

🟢 یادگیری آسون:
- یاد گرفتن Laravel و Vue.js نسبتاً راحت و سریع‌ـه چون مستندات خوبی دارن. این باعث می‌شه که حتی برنامه‌نویس‌های تازه‌کار هم زود بتونن با این دو کار کنن.

🟢 جامعه فعال و پشتیبانی قوی:
- هر دو فریمورک کلی برنامه‌نویس و طرفدار دارن که یعنی همیشه کلی مطلب آموزشی، جواب سوال و راه‌حل برای مشکلاتت پیدا می‌کنی.

🟢رندر سمت سرور (SSR):
- اگه بخوای صفحات وب رو بهینه‌تر کنی تا سریع‌تر لود بشن و برای موتورهای جستجو هم بهتر باشه، ترکیب Laravel و Vue.js خیلی خوب جواب می‌ده. ابزارهایی مثل Nuxt.js که روی Vue.js ساخته شدن، به راحتی با Laravel جور می‌شن.

🟢 پشتیبانی از برنامه‌های تک‌صفحه‌ای (SPA):
- Vue.js برای ساختن برنامه‌های تک‌صفحه‌ای خیلی خوبه و Laravel هم ابزارهای لازم برای ساختن API رو داره که این دوتا با هم یه ترکیب عالی می‌سازن.

به طور کلی، ترکیب Laravel و Vue.js به برنامه‌نویس‌ها این امکان رو می‌ده که یه پروژه قوی، سریع و مقیاس‌پذیر درست کنن و از بهترین ویژگی‌های هر دو فریمورک استفاده کنن

#vue #laravel
☕️ @CodeExplore

👑تا حالا اسم Vuetify رو شنیدی؟؟

⚡️‏Vuetify یه کتابخونه رابط کاربری برای Vue.js هست که کمک می‌کنه تا به راحتی و سریع، صفحات وب خوشگل و مدرن بسازیم. این کتابخونه از طراحی متریال گوگل استفاده می‌کنه که باعث میشه همه چیز خیلی مرتب و حرفه‌ای به نظر بیاد.

◀️ویژگی‌ها

🟢طراحی متریال:
بر اساس اصول طراحی گوگل، ظاهری مدرن و شیک داره.

🟢کامپوننت‌های آماده:
بیشتر از 80 تا کامپوننت آماده داره که می‌تونیم تو پروژه‌ها استفاده کنیم؛ مثل دکمه‌ها، فرم‌ها و کارت‌ها.

🟢واکنش‌گرا:
طراحی‌هاش به خوبی توی دستگاه‌های مختلف مثل موبایل و دسکتاپ نشون داده میشه.

🟢پشتیبانی از تم‌ها:
می‌تونیم تم‌های خودمون رو بسازیم و رنگ‌ها و فونت‌ها رو تغییر بدیم.

🟢مستندات جامع:
راهنمای کامل و آموزشی داره که کار باهاش رو خیلی راحت می‌کنه.

🟢ادغام با ابزارهای دیگه:
به خوبی با ابزارهای دیگه مثل Vue Router و Vuex کار می‌کنه.

#vuetify #vue
☕️ @CodeExplore

💎امروز میخام باهم بررسی کنیم که Vuelidate چیه؟؟

⭐️‏Vuelidate یه کتابخونه اعتبارسنجی برای Vue.js هست که به برنامه‌نویس‌ها کمک می‌کنه راحت‌تر و بهتر فرم‌ها رو اعتبارسنجی کنن. این کتابخونه بر اساس ایده‌های اعتبارسنجی پویا ساخته شده و از قابلیت‌های Vue.js به خوبی استفاده می‌کنه. حالا یه توضیح ساده درباره ویژگی‌ها و کاربردهای Vuelidate:

ویژگی‌های Vuelidate
پویا بودن: اعتبارسنجی‌ها خودشون با تغییرات داده‌ها به‌روز می‌شن.
ترکیب‌پذیری: می‌تونی اعتبارسنجی‌های مختلف رو با هم ترکیب کنی و اعتبارسنجی‌های پیچیده‌تر بسازی.
سادگی استفاده: اضافه کردن اعتبارسنجی‌ها به فرم‌ها و داده‌های Vue.js خیلی آسونه.
همکاری با Vuex: راحت می‌تونی Vuelidate رو با Vuex ترکیب کنی و مدیریت اعتبارسنجی‌ها رو در سطح برنامه انجام بدی.

یه مثال کوچیک هم از کاربردش همین پایین براتون میزارم که ببینین چقدر قشنگ میتونین ولیدیشن های مختلفی باهاش انجام بدین و خودتونو از هزارتا شرط خلاص کنین👇👇👇


#vuelidate #validation #vue
☕️ @CodeExplore

ادامه پست بالا👆👆
این کد برای ولیدیشن کردن یه اینپوت پسورده که البته یکی از راه های ولیدیشن کردن با Vuelidate هستش و کلی راه دیگه هم داره

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="password">Password</label>
        <input id="password" v-model="form.password" type="password"/>
        <span v-if="!$v.form.password.$pending && !$v.form.password.required">Password is required</span>
        <span v-if="!$v.form.password.$pending && !$v.form.password.minLength">Password must be at least 6 characters long</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, minLength } from '@vuelidate/validators'

const form = reactive({
  password: ''
})

const rules = {
  form: {
    password: { required, minLength: minLength(6) }
  }
}

const v$ = useVuelidate(rules, form)

const submitForm = () => {
  v$.value.$touch()
  if (!v$.value.$invalid) {
    // فرم معتبر است، عملیات ارسال را اینجا انجام دهید
    console.log('Form submitted', form)
  }
}
</script>

#vuelidate #validation #vue
☕️ @CodeExplore

🌲ویو کارای عزیز
یه سایت خفن براتون اوردم که کلی کامپوننت های عالی برای استفاده داره و مبتی بر معیار ant design هستش و میتونین خیلی خوب و خفن ازش استفاده کنین و حالشو ببرین:

🌕https://antdv.com/components/overview

#site #vue
☕️ @CodeExplore

🌲عزیزای Vue.js کار گل من، بیاین که براتون سایت زیر رو اوردم که باهاش به راحتی Marquee Slider بسازین و حالشو ببرین، دیزاینش خیلی خوشگله و اصن حال میکنین سایتشو نگا کنین:

🌕https://vue-marquee.com/

#site #vue
☕️ @CodeExplore

👑یه منبع خوب با کلی ویدیو و مقاله خفن برای یادگیری Vue.js آوردم براتون که ادعا میکنه خیلی یوزر فرندلی هستش، هستش؟؟

🌲https://learnvue.co/

#vue #site
☕️ @CodeExplore