Совет дня: используйте 2 тега <script> в компонентах Single File

В компонентах Vue в формате Single File можно использовать два блока <script>: один с атрибутом setup, другой — без него. Это может быть полезно по нескольким причинам.

Одна из них — экспорт типов или данных, которые жёстко связаны с компонентом, но могут понадобиться и в других частях приложения.

Другая — экспорт ключей для provide/inject в случае тесно связанных между собой компонентов.

👉 Гайды по JavaScript | дать буст

Совет по JavaScript

Используйте navigator.maxTouchPoints, чтобы определить, поддерживает ли устройство сенсорный ввод.

👉 Гайды по JavaScript | дать буст

Фишка для Vue Router

Автоматическая генерация маршрутов с помощью unplugin-vue-router

👉 Гайды по JavaScript | дать буст

Глубокое клонирование в JavaScript? Просто используйте встроенный structuredClone().

Смотрите, как это работает.

👉 Гайды по JavaScript | дать буст

Поговорим про обновление CSS-переменных в Vue.js:

Vue.js построен вокруг реактивности, что делает его отличным выбором для динамического обновления CSS-переменных. В Vue ты можешь легко встроить такую логику в жизненный цикл компонента или привязать её к вычисляемому свойству (computed), чтобы обновления происходили автоматически.

Вот пример, который показывает, как обновить CSS-переменную внутри компонента Vue:
в этом примере по клику на кнопку вызывается метод changeColor, который обновляет CSS-переменную --main-color.

👉 Гайды по JavaScript | дать буст

Совет дня:

Иногда данные на клиенте могут отличаться от данных на сервере. В таких случаях можно игнорировать предупреждения о несоответствии при гидрации с помощью атрибута data-allow-mismatch
(Доступно начиная с версии v3.5)

👉 Гайды по JavaScript | дать буст

Laravel + Vue = Магия

Посмотри, как легко реализовать обновления в реальном времени с Reverb — встроенным решением от Laravel для WebSocket-ов

👉 Гайды по JavaScript | дать буст

JavaScript — асинхронный язык: он умеет обрабатывать несколько операций одновременно, не блокируя главный поток.

Существует два основных способа работы с асинхронностью в JS: promises и async/await.

В этом туториале Генри объясняет, как работает каждый из подходов и в каких случаях стоит использовать тот или иной.

https://freecodecamp.org/news/when-to-use-asyncawait-vs-promises-in-javascript/

👉 Гайды по JavaScript | дать буст

Знаешь, как работает defineExpose() в контексте доступа к компоненту?

✅ defineExpose() делает свойства доступными через template ref компонента, а не через определение компонента, импортированное из .vue-файла.

✅ При использовании defineExpose() экспортируемые свойства не добавляются к самому определению компонента (т.е. к объекту, который ты получаешь при импорте компонента в JavaScript).

Вместо этого эти свойства становятся доступными на экземпляре компонента, когда ты получаешь его через useTemplateRef()

👉 Гайды по JavaScript | дать буст

Чистый приём в JavaScript: деструктуризация с псевдонимами и значениями по умолчанию

👉 Гайды по JavaScript | дать буст

Отображать пользовательские уведомления с Nuxt UI — проще простого благодаря useToast

А ты уже пробовал?

👉 Гайды по JavaScript | дать буст

Вывод кортежей для структурированной логики в TypeScript

Посмотри, как работает пошаговый процесс на практике.

👉 Гайды по JavaScript | дать буст

Типичные сценарии использования defineExpose в Vue:

defineExpose особенно полезен, когда нужно открыть внутренние методы или состояние компонента для родительских компонентов — например, в случае сложных взаимодействий или при создании собственных UI-библиотек. Вот примеры:

✓ Доступ к состоянию компонента для тестирования: Иногда необходимо получить доступ к внутреннему состоянию компонента во время отладки или юнит-тестирования.
✓ Создание переиспользуемых компонентов: При разработке компонентной библиотеки можно сделать некоторые методы или свойства доступными для продвинутых сценариев использования.
✓ Интеграция со сторонними библиотеками: Иногда нужно передать внутренние данные компонента внешним JS-библиотекам, которые работают напрямую с экземпляром компонента.

👉 Гайды по JavaScript | дать буст

Используй продвинутые типы TypeScript для создания чистых, композиционных и безопасных с точки зрения типов структур.

Посмотри, как работает связка template literal + exclude + extract в действии.

👉 Гайды по JavaScript | дать буст

Практические кейсы использования :root CSS-переменных с JavaScript и Vue.js

1. Переключение тем

Динамическое изменение CSS-переменных отлично подходит для переключения тем. Можно хранить несколько тем в виде наборов CSS-переменных и обновлять их в зависимости от предпочтений пользователя. Например, легко реализовать переключение между светлой и тёмной темами или дать более тонкий контроль — над размерами шрифта, цветовой схемой и т.д.

2. Адаптивные изменения в дизайне

CSS-переменные также удобно использовать в адаптивной вёрстке. Можно менять стили в зависимости от ширины экрана или ориентации устройства. Например, при изменении размеров окна можно программно обновлять значения переменных — чтобы подстроить отступы или размер шрифта под мобильные устройства.

В приведённом примере кода размер шрифта динамически адаптируется к ширине экрана, обеспечивая отзывчивый и удобный для пользователя интерфейс.

👉 Гайды по JavaScript | дать буст

Angular httpResource совет

✔️Используй Value Guard при вызове .value()

Это помогает безопасно обрабатывать возвращаемые данные и избежать ошибок, если значение отсутствует или не загружено.

👉 Гайды по JavaScript | дать буст