Nuxt.js | Vue SSR News

Vue успешно вступает в гонку миноров 3й версии и выпускает свежий 3.5.0, который завтра ваш коллега случайно принесёт в проект, обновив локфайл.

🥲Нам приятно, что в релиз попали улучшения для SSR. Например, добавили много вспомогательных функций для ленивой гидрации, а также data-allow-mismatch для пометки элементов, которым разрешено не совпадать при серверном и клиентском рендере. Кроме того, теперь useId() есть не только в Nuxt, но и в самом Vue. Интересно, будет ли жёсткая борьба между ними? (UPD: нет)

Остальные улучшения такие:

↗️Оптимизация реактивности: Снижено использование памяти на 56% в среднем, а в больших реактивных массивах стало лучше в 10 раз.

💭Reactive Props Destruсture: Всё-таки запихнули ещё немного магии в <script setup>, обязательно прочитайте, как этим пользоваться.

👻Расширение работы с Custom Elements: Добавлены API useHost() и useShadowRoot(). Для староверов прокинули this.$host в Options Api.

👍Новые возможности: useTemplateRef() для динамических референсов и возможность использовать <Teleport> до того, как он отрендерится.

Мы все ждали 4ю версию нашего любимого фреймворка Nuxt, но вот немного нового для 3й версии 👩‍💻

🏘️ Группировка роутов. Теперь можно группировать роуты путем именования директории в круглые скобки, все что в круглых скобках, не будет участвовать в формировании урла.

🏝️ Серверные компоненты (Islands) могут добавлять SEO методанные при рендеринге

🪝 Пользовательские триггеры для префетчинга. Теперь можно отключить префетчинг глобально и включать его точечно, там где это действительно нужно

🗺️ Улучшенная генерация серверных Source Maps (это можно настраивать в nuxt.config)

🎁 Добавлены новые утилиты для авторов модулей. Это этап подготовки к переходу на v4

✨ Улучшены варнинги для dev разработки

🚨 Улучшена типизация для работы с Vue

А также много разного, со всем списком изменений можно ознакомиться в ченджлоге

👉 тут

Начался очередной Nuxt Office Hours. Если у вас было желание задать вопрос в реальном времени, возможно это ваш шанс!💻

https://discord.gg/68TePg2T?event=1272756747626610781

Тут команда Nuxt сколлаборировалась с командой Chrome Aurora и выпустила новый модуль – Nuxt Scripts ☀️

Если вы используете third-party скрипты (например, аналитику) и хотите улучшить:
🔠Надёжность
🔠Метрики Lighthouse
🅱️Безопасность
🔠Удобство использования

– Поставьте бету и попробуйте, и не забудьте завести issue, если попытка оказалась неудачной

EOL уже 30 июня 😵

Вышел последний минор Nuxt 2 (помните был такой)

Изменений наскребли на 3 коммита:
1️⃣Переехали на memfs, чтобы не оставлять потенциальной CVE после EOL
2️⃣Бэкпортировали из Nuxt 3 проверку на доступность sessionStorage
3️⃣Вернули манки-патчинг для функции patchMD4 (чтобы экосистема для 2й версии не рухнула)

Да, это не много, но это честная работа

👩‍💻 Как и было обещано в анонсе, наступает середина июля и выходит Nuxt 4 3.12 (ну что вы, как в первый раз 🤣)

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

1️⃣Добавили базовую поддержку @nuxt/scripts – надстройку для более удобного управления сторонними скриптами. Сам пакет сейчас в предрелизной стадии
2️⃣Стабилизировали 4 экспериментальных функции (заголовок NoSSR, тришейкинг кода в clientOnly, генерация типов для runtimeConfig и полифиллинг vueuse/head). Две из них и так были включены по умолчанию
3️⃣Добавили новую экспериментальную функцию – multiApp support. Подробнее здесь
4️⃣Улучшили DX – в консоль теперь красиво выводятся VNode и ссылки из URL
5️⃣Улучшили типизацию: в tsconfig теперь генерируется значение module: 'preserve' (требуется TS 5.4+), ну и так, по мелочи
6️⃣Даже не забыли про Nuxt Kit и Nuxt Layers. Слои из папки ./layers теперь автоимпортируются, а кит обзавёлся дополнительными обвесами для работы с runtimeConfig и описания совместимости модулей

Ждём пару патч-версий и обновляемся или продолжаем ожидать v4?

Всем привет!

Кто давно ждал русскоязычную документацию по NUXT может присоединиться к переводу документации на русский язык!

https://nuxt-ru.vercel.app/ - сайт развернут тут

Репозитории для перевода:
- сайт: https://github.com/translation-gang/nuxt.com
- документации: https://github.com/translation-gang/nuxt/tree/main/docs

Ждем ваши PR.

Команда которая переводила https://ru.vuejs.org/ уже в деле!

можно ссылку на трансляцию докинуть
https://youtube.com/live/7SWzCjDPtoQ

Андрей (@squozb) расскажет свой первый доклад на митапе MskVue.js! 🥳

Изучаем пределы Nuxt: как Nuxt Kit меняет правила игры

Ваше приложение выросло и стандартных 4 папочек вам уже не хватает? Переживаете за переиспользуемость кода? Ждёте Nuxt Auth, боясь написать свою реализацию? Просто хочется копнуть поглубже в исходники накста?
Окей, вас услышали. Давайте разберёмся, что такое модули, как они работают в наксте и как можно написать свой модуль и расширить фреймворк в любую сторону при помощи Nuxt Kit.

⏰️ Дата и время: 23 мая 2024, 19:00

📍 Место: Мск, БЦ Фактория, кампус Школы 21, ул. Вятская 27с42

регистрация на митап

🚀 Появилась предварительная дата релиза Nuxt 4й версии — 14 июня, но это не точно 😅

а если вам уже сейчас не ймется попробовать изменения Nuxt 4, то это можно сделать уже сейчас 😉

https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4

👩‍💻Во Vue 3.5 хотят перевести props destructure в стабильный статус. Предлагают включить их по дефолту, но оставить возможность вернуться к старому поведению.

Как минимум, будьте в курсе, как максимум, можете перейти по ссылке и вставить свои 5 центов.

Коллеги, всем привет!

С сегодняшнего дня доступен официальный перевод документации Vue js на русский язык!

https://ru.vuejs.org/

⚡️Прекрасное видео показывающее на минимальном приложении насколько просто можно работать с WebSocket в Nuxt и Nitro

✅К просмотру рекомендую!

https://www.youtube.com/watch?v=OfY7JcrqkPg

#article

«A step by step guide to adding site search to your Nuxt ecommerce»

https://blog.meilisearch.com/nuxt-ecommerce-search-guide/

🎉 Вчера во время трансляции Vue.js Amsterdam релизнули Nitro

Из интересного:
📖 Появилась новая документация
🧦 Добавлена эксперементальная поддержка WebSockets API
🗄️ Добавлена эксперементальная поддержка работы с базами данных
🏃‍♂️ Добавлена эксперементальная фича Nitro Tasks (любопытная штука, нужно подумать, как заиспользовать у себя 🧐)
☑️ Добавлена универсальная поддержка ESM импорта WASM модулей

Ну что, ждем скорый релиз Nuxt 😅

https://github.com/unjs/nitro/releases/tag/v2.9.0

Сегодня прям день релизов, еще сегодня релизнули nuxt-security

Ребята исправили чуть багов и добавили несколько новых фичей, но уже обещают новый релиз, с поддержкой девтулзов 💪🏼

https://github.com/Baroshem/nuxt-security/releases/tag/v1.2.0

Так же сегодня вышла новая, минорная, версия @nuxt/ui

там прям много интересного, пофиксили кучу всего, самое главное пофиксили варнинги по ошибкам гидрации, при использовании под капотом headlessui 🎉

https://github.com/nuxt/ui/releases/tag/v2.14.0

Вышла новая версия Nuxt

Пофиксили всякого, и чуть подкрутили доку 😉

https://github.com/nuxt/nuxt/releases/tag/v3.10.3

Nuxt 3.10.0

🔄 Experimental Shared asyncData for Prerendering: Automates deduplication and caching of useAsyncData and useFetch calls during site prerendering to minimize redundant data fetching.

🔒 SSR-Safe Unique ID Creation: Introduces useId composable for generating unique IDs that are safe for server-side rendering, enhancing app accessibility.

🧩 Extended app/router.options: Allows module authors to inject custom router.options files, enabling customizations like scrollBehavior modifications or runtime route augmentations.

💻 Experimental Client-Side Node.js Support: Offers polyfilling for key Node.js built-ins on the client side, aiding in the use of libraries that lack proper browser support.

🍪 Improved Cookie Reactivity: Adds the option to use CookieStore for reactive useCookie updates upon cookie changes, along with a refreshCookie composable for manual cookie value refreshes.

https://github.com/nuxt/nuxt/releases/tag/v3.10.0

Вышел очередной релиз Nuxt3

📖 Немного дописали доку, например как добавить eslint
💅 Отрефакторили island-component
🩹 Ну и кудаже без фиксов, например захардкодили сортировку в разделе pages/*, с локалью en-US, чтоб всегда был предсказуемый результат

Конечно же, подробно можно почитать 👉 тут