✅ Как вручную отрисовать окно подтверждения во Vue3?

Написали для вас статью, в которой вы узнаете как вручную отрисовать и поместить компонент диалогового окна в дом дерево.

Если используете react или angular тоже почитайте, реализация на этих фреймворках будет плюс-минус такая же.

#vue #js #promise #compositionAPI

✅ Vue 3.3

Эван Ю 11 мая опубликовал у себя в блоге анонс новой версии вью.

Typescript:

- Добавили дженерики для всего компонента. Штука очень полезная, надеюсь работать будет как надо.
- Наконец убрали грязь в defineEmits, теперь не придется каждый раз писать много ненужных букав.
(e: 'foo', id: number): void => foo: [id: number]
- Добавили типизацию для слотов через defineSlots

Экспериментальное:
- Деструктуризация для пропсов (сомнительная штука, проблема в том, что добавляет новый вариант описания пропсов, а чем больше вариантов, тем больше каши)
- defineModel, по сути сахар для объявления двухстороннего связывания v-model. Он сам регистрирует пропс и мутирует значение. По RFCS можно увидеть, что будут и типы и свойства пропса. Это интересно. Это мы пробуем.

Из мелкого и незначительного:
- Улучшили скорость сборки в 10 раз
- Тесты теперь быстрее из-за перехода на vitest
- Улучшили скорость создания типов

В 2023 году обновления по vue будут чаще, но меньшими по объему.

#vue #js #news

✅ Preline UI

Набор компонентов с использованием Tailwind CSS. Простенько, но красиво.

Tailwind, конечно, сомнительная вещица, поддерживать такой код не из приятных, но чего-чего, а дизайн получается красивым.

Есть инструкции по установке с разными фреймворками

Страничка на productHunt
Ссылка на либу

#lib #js #css #tailwind #vue #react

✅ 100 вещей о Nuxt 3

В конце этого года будет прекращена поддержка vue 2 и nuxt 2.

Автор расписал список вещей, которые нужно знать о nuxt 3. Уверен, что кто работает с данным фреймворком большую часть этого знает, но пункты расписаны довольно подробно и интересно. Все, кто работает с vue и nuxt - рекомендую

Статья на английском

#js #vue #nuxt

✅ Vue 3.4

31 декабря закончилась поддержка vue 2. Press 🫡

В новом релизе существенно переработали парсер шаблонов. Теперь этот зверь работает в 2 раза быстрей.

Изменения:
- x2 к скорости парсинга шаблонов
- Рефакторинг системы реактивности (оптимизировали повторные вычисления). В релизе наглядный пример с watchEffect
- Стабилизировали defineModel. В версии 3.3 был выпущен в качестве эксперемента
- Добавили новые сокращения:

Было: <img :id="id" :src="src" :alt="alt">
Стало: <img :id :src :alt>

- и т.д.

Эти сокращения выглядят сомнительно, при этом они сами пишут, что у них были опасения насчет данного нововведения, не получилось бы каши. Будем наблюдать.

Ссылка на релиз

#js #vue #news #newVersion

✅ Nuxt 3.10

Изменения:
- Новый useId для генерации ID для SSR
- Возможность расширения router.options в модулях
- Экспериментальная поддержка nodejs на стороне клиента
- Улучшили реактивность cookie
- Теперь можно менять метаданные роута в модулях и хуках
- и т.д.

Ссылка на релиз

#js #ts #vue #news

✅ Vite 5.1

Несколько недель назад Vite преодолел планку в 10 млн установок в неделю.

Изменения:
- Экспериментальная поддержка Vite Runtime API
- Стабилизировали работу css?url
- В build.assetsInlineLimit добавили колбеки
- Улучшен HMR для циклического импорта
- Повысили производительность
- и т.д.

Тест производительности:
Тест проводился на загрузке 10к модулей на apple m1 max
Vite 4.0 - 8 секунд
Vite 4.3 - 6.35 секунд
Vite 5.1 - 5.35 секунд

Ссылка на релиз

#js #vue #react #news

🖼️ Куда будет двигаться Vue в 2024 году. Выступление Evan You

1. Будут ли добавлены новые макросы* Vue?

Команда осторожно рассматривает вопросы о новых макросах во ​​Vue.
В настоящее время нет планов по их добавлению.

2. Как дела с Vue Vapor мод?

Vapor мод позволяет работать с non-virtual DOM. Этот мод увеличивает производительность.
Большая часть Vapor уже написана. Работа кипит.

3. Какие самые большие заблуждения относительно Vue.js?

Главные заблуждения - это плохая поддержка JSX и TypeScript, а также убеждение, что Vue подходит только для простых приложений.
Но все больше и больше крупных и известных брендов начинают использовать Vue для своих веб-приложений.

4. Что по новому функционалу?

Vapor — наиболее значительная инновация, которая сейчас разрабатывается в экосистеме Vue.
Кроме того, в ядро ​​Vue были внесены улучшения, в том числе:
- Рефакторинг системы реактивности
- Ускоренный анализатор и улучшенная производительность сборки однофайловых компонентов (SFC).
- Стабилизация defineModel
- Новые сокращения `<img :id :src :alt>`
- Улучшена обработка ошибок гидратации.

5. Планируется ли удаление Option API в будущих версиях Vue?

Нет. Мы не планируем удалять option API.
Поддержка обоих подходов вполне осуществима.

6. Будет ли Vue 3 продолжать поддерживать Webpack или полностью перейдет на Vite?

Мы не планируем отказываться от Webpack;
Поддержка будет предоставляться как для Webpack, так и для Vite.

Примечание автора:
Макрос - идея/предложение, которое еще не утверждено во вью. Они в основном нацелены на новый функционал и синтаксический сахар.

Ссылка на статью

#js #vite #vue

🔥 Дайджест #2

CSS
🇺🇸 CSS :has() Интерактивное руководство
🇺🇸 Анимация перехода. Изменение размера
🇺🇸 Выходим за рамки пикселей и rem
🇺🇸 Коллекция css toggle/switch

Vue
🇺🇸 Пишем чистые компоненты Vue
🇺🇸 defineModel во Vue 3.4
🇺🇸 Релиз NuxtHub - фулстек фреймворк

React
🇺🇸 Тренды React 2024
🇺🇸 React будет компилироваться
🇺🇸 Как избежать ошибок гидратации с useSyncExternalStore
🇺🇸 Next.js формы с server actions
🇺🇸 Параметры поиска с серверными компонентами React
🇺🇸 Next.js vs Remix
🇺🇸 HTMX vs React

Инструменты и ресурсы
🇺🇸 Функциональный UI kit для Figma
🇺🇸 Huemint - генератор цветовых палитр с AI
🇺🇸 Composable функции для рисования геометрии во Vue 3

Разное
🇺🇸 Рендеринг писем со Svelte
🇺🇸 Использование localStorage в наши дни
🇺🇸 СSS и SVG в console.log
🇺🇸 Раздутый JavaScript в 2024 - Статья на хабр 😇
🇺🇸 Chrome DevTools: +400% скорости вкладки "Производительность" с помощью perf-ception
🇺🇸 Релиз Bun v1.0.30

🇺🇸 Mario Kart 3D - игрушка на js

#js #weekly #react #vue

✅ Vercel AI SDK

Библиотека для создания интерфейсов ИИ чат ботов с поддержкой React, Svelte, Vue и Solid. Из коробки доступны самые популярные ИИ

Ссылка на репозиторий
Ссылка на сайт

#js #vue #react #solid #svelte #ai

✅ Генерация VUE UI

Open Source версия библиотеки v0 для реакта. Позволяет генерировать компоненты для vue, есть поддержка shadcn/vue, tailwindCSS.

Единственный нюанс - нужно сгенерировать ключ от OpenAI

Ссылка на vuev0
Ссылка на v0 react

#js #vue #ai #react

✅ Astro 4.5

- Добавили dev Audit UI - теперь выявить проблемы производительности станет легче
- Изменили View Transition: перерендер островов и перезапуск скриптов
- Shiki 1.0 - библиотека для подсветки кода, как в VS Code
- Добавили настройки подключения CDN для разных ресурсов
- В статус эксперимента добавили: JSON схемы для Data Collections и Новый алгоритм обнаружения скриптов

Ссылка на релиз

#js #vue #react #lib

✅ Nuxt 3.11

- Улучшили логирование. Добавили вывод данных в консоль во время выполнения SSR функций.
- usePreviewMode
- Улучшили очистку кеша
- Добавили Middleware routeRules
- Добавили функцию clear для очистки useAsyncData и useFetch
- Заработал телепорт на стороне сервера
- улучшили производительность
- и т.д.

Ссылка на релиз

#js #nuxt #vue

✅ 🖼️ VitePress 1.0

Вчера релизнулся VitePress. Это библиотека для генерации статических сайтов (ssg) на vue. Основное применение - документация и блоги.

Что с VuePress?
Оригинальный vuePress вообще был на vue 2 и webpack, потом к ним добавили vite и vue 3. Но поддерживать сразу две похожие библиотеки нет смысла. Поэтому команда сосредоточится на vitepress. Так что это, грубо говоря, современная замена.

Ссылка на релиз
Ссылка на Vitepress

#vue #news #js #vite