Vue.js
1.22K subscribers
38 photos
2 videos
3 files
78 links
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js
Download Telegram
ما در اصفهان آهن دنبال کسی هستیم که Vuejs رو بلد باشه و با Nuxt هم کار کرده باشه
خوشحال میشیم رزومتو واسمون اینجا 👇🏻بفرستی
https://jobinja.ir/646968
Media is too big
VIEW IN TELEGRAM
گروه IT Gap هر هفته در مورد یک موضوع و تکنولوژی در دیسکورد با هم دیگه صحبت و تبادل اطلاعات میکنن.
هفته گذشته موضوع جلسه درباره Vue.js بوده که پویا پارسا عزیز هم توی این گپ و گفتگو حضور داشت و به سوالات جواب میداد.

شما میتونید فیلم رکورد شده این گفتگو رو دانلود کنید و مشاهده کنید.

لینک دیسکورد و تلگرام این گروه :

https://discord.gg/6gQrAfm7wQ

https://t.me/computer_channell

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #vue_talk
NUXT 3 IS COMING !

خب همونطور که شاید اطلاع داشته باشید Nuxt 3 به صورت بتا و به صورت Private منتشر شد.
ورژن بتا به صورت رسمی در September 2021 (شهریور) منتشر و معرفی میشه.

اما شما میتونید زودتر ورژن جدید Nuxt رو از طریق لینک زیر امتحان کنید + ورژن جدید سایت Nuxt با ظاهر جدید :
https://www.npmjs.com/package/nuxt3

https://preview.nuxtjs.org/
(user&pass: nuxt)

برای اطلاع از اخرین تغییرات هم دیدن این دو فیلم خالی از لطف نیست.

State of Nuxt 3 (Pooya Parsa) :
Video: https://youtu.be/_-wqph-IaAw
Slides: https://shorturl.at/aenAF

Nuxt 3 in action (Sebastien Chopin) :
Video: https://youtu.be/iYUKinrebUE
Slides: https://nuxt.slides.com/atinux/nuxt-3-in-action

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #nuxt #nuxt3
مهمان کوچکی به نام petite-vue

خب petite-vue اصطلاحا یک کتابخانه progressive enhancement هست و فقط ~5.8kb حجم داره!

به شکل خیلی خلاصه بخوام بگم یک چیز شبیه jquery یا alpine.js هست البته با سینتکس Vue که کار برای ما خیلی راحت میکنه.

خب حالا فکر میکنین این کتابخانه کجا استفاده میشه؟
اگر شما پروژه‌ای دارین که میخواین یه بخشی کوچیک از پروژه رو با ویو انجام بدید احتمالا petite-vue کار شما رو راه میندازه. دیگه لازم نیست برای یه پلاگین وردپرس کاربر رو مجبور کنید تا ۶۰ کیلوبایت فایل کتابخونه ویو رو دانلود کنه. درسته که petite-vue همه امکانات ویو رو نداره ولی پر استفاده ترین امکانات رو خیلی کم حجم در اختیارتون قرار میده.

💡نحوه کار این کتابخانه با Vue اصلی متفاوت هست و از virtual DOM استفاده نمیکنه.

برای اطلاعات بیشتر و نحوه استفاده صفحه گیتهاب این پروژه مطالعه کنید:

https://github.com/vuejs/petite-vue

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #petite_vue #learning
کنفرانس Nuxt Nation

24 و 25 شهریور ماه (15-16 September) کنفرانس Nuxt Nation به صورت آنلاین برگزار میشه که شما میتونید به صورت رایگان در این کنفرانس شرکت کنید.

برای ثبت نام رایگان و اطلاعات بیشتر درباره سرفصل سخنرانی ها به سایت این کنفرانس سر بزنید :

https://nuxtnation.com/

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#nuxt #conference #nuxt3
کمتر از 20 ساعت تا انتشار Nuxt 3

https://nuxtjs.org/v3/

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#nuxt #nuxt3
🗓 معرفی کتابخانه های DatePicker شمسی برای Vue.js و Nuxt.js

یکی از پر استفاده و پرکاربرد ترین کامپوننت هایی که داخل هر پروژه ای ممکن هست استفاده بشه Date & Time Picker هست. توی این پست سعی میکنیم تمام کامپوننت های DatePicker که از تاریخ شمسی پشتیبانی میکنن رو به شما معرفی کنیم.

🔸 Vue Persian Date Time Picker
https://talkhabi.github.io/vue-persian-datetime-picker/#/

🔸 Vue Emrooz
https://emroozjs.netlify.app/

🔸 Vue Persian Datepicker
https://alireza-ab.ir/datepicker

🔸 Vue Awesome Datepicker
https://github.com/MohammadS3dd/vue-awesome-datepicker

🔸 Vue3 Persian Datepicker
https://mohammadoftadeh.github.io/vue3-persian-datepicker/

🔸 Vue2 Persian Datepicker
https://dyonir.github.io/vue2-persian-datepicker/

🔸Vue Persian Date
https://github.com/pourghasemi/PersianDatePicker

اگر شما هم Datepicker میشناسید که در لیست بالا نیست به ما معرفی کنید تا در لیست بالا اضافه کنیم.

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#datepicker #persian #persian_datepicker
احتمالا اسم وبسایت Vue Mastery شنیده باشید که در زمینه آموزش و دوره های آنلاین مرتبط با Vue.js فعالیت داره .

اگه قصد یادگیری Vue یا Nuxt یا کتابخانه های مرتبط با Vue رو دارید این فرصت رو از دست ندید !

چرا؟ چون Vue Mastery از تاریخ 26 تا 29 آذر (17 تا 20 December) کلیه آموزش های خودش رو به صورت رایگان برای همه در دسترس گذاشته !!

https://www.vuemastery.com/free-weekend


با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال vuejs و nuxtjs در ایران
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vuemastery #vue #nuxt #learning
افزایش پرفورمنس وب اپلیکیشن‌های ویو با دایرکتیو v-momo
این دایرکتیو (directive) جدید که از نسخه ۳.۲ به ویو اضافه شده از رندرهای اضافی کامپوننت‌ها و المنت‌های HTML و تمامی subtree‌های اون‌ها در ویو جلوگیری می‌کنه.

شما باید این دایرکتیو رو با یک آرایه با طول ثابت مقداردهی کنید و هر موقع که هر کدوم از آیتم‌های داخل این آرایه تغییر کنه، کامپوننت یا المنت مربوطه هم دوباره رندر میشه اما اگر ثابت بمونه، اون کامپوننت و یا المنت و subtreeهای داخلش دوباره رندر نمیشن

در واقع قدرت واقعی این دایرکتیو اونجایی مشخص میشه که شما یک لیست بزرگ یا حجم زیادی از کامپوننت‌هایی دارید که با یک تغییر، همشون دوباره رندر میشن و خب این اصلا جالب نیست.

نحوه استفاده از این دایرکتیو خیلی ساده هست:
<div v-memo="[valueA, valueB]">
...
</div>

برای اطلاعات کامل‌تر و همینطور نحوه استفاده از این دایرکتیو در کنار v-for به لینک زیر مراجعه کنید:
https://v3.vuejs.org/api/directives.html

#نویسنده : #محمد_صالح_فدایی

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #v_memo #tips
استفاده از watch برای مشاهده تغییرات دو (یا چند) property در option API

با کمک یک computed property، که یک آبجکت شامل متغیرهای مورد نظرتون رو برمی‌گردونه، می‌تونید از یک watch برای مشاهده تغییرات در دو (یا چند) متغیر استفاده کنید.
استفاده از این روش علاوه بر مزیت ذکر شده، خوانایی کدهاتون رو هم افزایش میده.

پی نوشت: در composition API، بدون کمک گرفتن از computed می‌تونید تغییرات چندین property رو به صورت همزمان مشاهده کنید.

نویسنده: #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #tips #watch
جلوگیری از دسترسی به داده‌ها و متدهای داخل کامپوننت با استفاده از expose

به صورت پیشفرض، شما در ویو می‌تونید با استفاده از refs$ یا parent$ یا root$ به instance کامل یک کامپوننت دیگه دسترسی داشته باشین.

اما اگر زمانی ترجیح دادین که امکان دسترسی به پراپرتی‌ها، متدها و... رو در خارج از کامپوننت کنترل و محدود کنید، کافیه که با استفاده از آپشن expose اون مواردی که میخواید قابل دسترسی باشه رو مشخص کنید. این قابلیت رسما از ویو ۳.۲ اضافه شده.

اینکار باعث میشه که encapsulation بهتری داشته باشیم و کامپوننت‌مون قابلیت اطمینان بیشتری داشته باشه.

برای جزئیات بیشتر میتونین لینک زیر رو بخونین:
https://v3.vuejs.org/api/options-data.html#expose

پی‌نوشت: در کل دسترسی مستقیم به instance یک کامپوننت دیگه، bad practice هست و بهتره که اینکار انجام نشه و به جای اون از پترن‌های دقیق‌تر و درست‌تر استفاده کنیم.

مثالی میشناسین که ما در اون مجبور به استفاده از ref$ یا parent$ یا root$ بشیم و هیچ راه دیگه یا پترن خوب جایگزین نداشته باشه؟

نویسنده: #محمد_صالح_فدایی

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://t.me/vue_js
کنفرانس Vue Js Nation

6 و 7 بهمن ماه (26-27 January) کنفرانس Vue Js Nation به صورت آنلاین برگزار میشه که شما میتونید به صورت رایگان در این کنفرانس شرکت کنید.

برای ثبت نام رایگان و اطلاعات بیشتر درباره سخنرانان و سرفصل های سخنرانی به سایت این کنفرانس سر بزنید :

https://vuejsnation.com/

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #conference #nuxt
اجرای دستی همه effectهای وابسته به shallowRef

همونطور که می‌دونین، هر وقت یک ref آپدیت میشه تمامی watchها، computedها و... وابسته به اون دوباره اجرا میشن تا تمامی stateهای مرتبط به صورت دومینو وار آپدیت بشن (به این وابستگی‌ها میگن effects).

اما زمانی که از shallowRef استفاده بشه، هر زمان یکی از propertyهای داخلی آبجکت مربوط بهش تغییر کنه، هیچ افکتی دوباره اجرا نمیشه. دلیل این امر اینه که از shallowRef استفاده شده و propertyهای داخلی reactive نیستن و با تغییرشون هیچ effectی اجرا نمیشه.

اگر بخواید که این effectها دوباره اجرا بشن، باید اون‌ها رو به صورت دستی و توسط triggerRef دوباره اجرا کنید.

پی‌نوشت: triggerRef رو هم میشه با ref استفاده کرده اما نیازی به اینکار نیست و ویو به طور خودکار تمامی effectهای مرتبط رو براتون دوباره اجرا می‌کنه.

Reference:
https://v3.vuejs.org/api/refs-api.html#triggerref

نویسنده #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #tips
متوقف کردن اجرای watch و watchEffect در Composition API

جالبه بدونین که watch و watchEffect یک تابع به عنوان تابع متوقف کننده برمی‌گردونن. تنها کافیه این تابع رو فراخوانی کنید تا watcher مورد استفاده متوقف بشه و بعد هر تغییر اجرا نشه.

Reference:
https://v3.vuejs.org/guide/reactivity-computed-watchers.html#stopping-the-watcher

نویسنده: #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #tips #watch
سلام به همه دوستان عزیز سال نوتون مبارک
امیدوارم امسال سال خوبی باشه براتون و کلی پیشرفت و آرزو های خوب دارم براتون ❤️

امسال چهارمین سالی هست که در کنار هم هستیم و من خوشحالم که روز به روز تعداد خانواده Vuejs فارسی بیشتر و بزرگتر میشه. از همه دوستانی که داخل زمینه های مختلف وقت میزارن برای کمک به دوستان و این جامعه کاربری خیلی خیلی سپاسگزارم ❤️


با دوستان خود به اشتراک بگذارید....
بزرگترین جامعه فارسی vuejs و nuxtjs در ایران
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #vue_community #norooz
🔸Reactivity Transform

با اضافه شدن Composition API در Vue 3 هنگامی که شما با Reactivity API کار میکنید برای دسترسی به مقادیر باید حتما .value به متغییر خودتون اضافه کنید تا به مقدارداخل متغییر دسترسی داشته باشید .

در ورژن 3.2.25 به صورت آزمایشی Reactivity Transform اضافه شده که به صورت پیش فرض غیرفعال هست و شما میتونید دستی خودتون اون رو فعال کنید .

اما Reactivity Transform چه کمکی به ما میکنه ؟ خیلی ساده بخوام بگم از این به بعد دیگه نیاز نیست که شما .value رو اضافه کنید و خود vue هنگام کامپایل کردن این کار رو برای شما انجام میده. فقط کافیه هنگام کارکردن با Reactivity API ها به اول آن ها $ اضافه کنید.

البته توابع دیگه ای هم داره که میتونید از طریق لینک زیر و داکیومنت خود Vue بیشتر با اون ها آشنا بشید و نحوه فعال سازی این قابلیت رو نسبت به باندلر خودتون پیدا کنید.

https://vuejs.org/guide/extras/reactivity-transform.html

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #tips
بررسی Vue 3 Core Engine

این هفته ، داخل جلسات تیم فرانت علی بابا درباره ی core vue 3 صحبت شد.

در این ارائه نحوه ی render و compile کردن engine ویو 3 مورد بررسی قرار میگیره و همچنین ماژول reactivity با استفاده از javascript پیاده سازی میشه.

اگر دوست دارید درک عمیق تری از نحوه کار Vue 3 به دست بیارید این ویدیو رو از دست ندید.

https://www.youtube.com/watch?v=f_mV60ZfeLk&t=672s


با تشکر از #محمدرضا_هدایتی بابت این ارائه خوب

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #vue3
سلام به همه دوستان عزیز سال نوتون مبارک
امیدوارم امسال سال خوبی باشه براتون و کلی پیشرفت و آرزو های خوب دارم براتون ❤️

امسال پنجمین سالی هست که در کنار هم هستیم و من خوشحالم که روز به روز تعداد خانواده Vuejs فارسی بیشتر و بزرگتر میشه. از همه دوستانی که داخل زمینه های مختلف وقت میزارن برای کمک به دوستان و این جامعه کاربری خیلی خیلی سپاسگزارم ❤️

به امید روزهای بهتر

با دوستان خود به اشتراک بگذارید....
بزرگترین جامعه فارسی vuejs و  nuxtjs در ایران
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #vue_community #norooz
معمولا ایام عید زمان مناسبی هست برای یادگیری و ارتقا دانش شخصی پس بهتره از این زمان بهترین استفاده رو ببریم.

اگه دوست دارید مثل یک نینجا 🥷 از vue 3 استفاده کنید این کتاب برای شماست .  به صورت کامل و مفصل تمام مواردی که برای توسعه یک وبسایت با Vue 3 نیاز هست رو توضیح داده.

این کتاب به صورت پولی هست و اگه توانایی خرید داشتید بهتره که به روش قانونی تهیه کنید و اگر هم امکانش وجود نداره از همین جا میتونید به صورت کامل دانلود کنید

https://books.ninja-squad.com/vue

با دوستان خود به اشتراک بگذارید....
بزرگترین جامعه فارسی vuejs و  nuxtjs در ایران
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #book
Become_a_Ninja_with_Vue.zip
11.5 MB
با دوستان خود به اشتراک بگذارید....
بزرگترین جامعه فارسی vuejs و  nuxtjs در ایران
لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://telegram.me/vue_js

#vue #book