⚡️Nuxt 3.2.0

🧑‍💻 Nuxt DevTools
🪄 Улучшения типизации runtimeConfig и useFetch
💪 Обновление Nitropack до v2.2 с поддержкой сессий
🔥 Улучшения Treeshaking'а

Девтулзы для накста ожидаем уже через сутки! 👏

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

Тут ребята выпустили релиз Vuestic UI 1.6.0

Самое интересное:
* Поддержка Tailwind - мы решили не доизобретать свои CCS хелперы, а взять готовые
* Vuestic CLI - позволяет оперативно создать бойлерплейт Vue или Nuxt проекта с Vuestic UI на борту
* Компоненты Skeleton, Stepper
* Перевели документацию на Nuxt 3
Подробнее тут https://github.com/epicmaxco/vuestic-ui/releases/tag/v1.6.0
Документация тут https://vuestic.dev/

#vuejs #основы

Что то я забросил постить всякие интересности и объяснения, лентяй же.

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

Основным применением метода nextTick является обновление DOM после изменения данных в реактивном состоянии. Vue.js следит за изменениями данных и обновляет DOM асинхронно, поэтому изменения не всегда отображаются мгновенно. Если вам нужно выполнить какой-либо код после того, как Vue.js обновил DOM, вы можете использовать nextTick.

Например, если вам нужно получить размеры элемента, который только что был изменен с помощью v-if или v-show, вы можете использовать nextTick для выполнения кода после обновления DOM.

В примере на картинке мы используем nextTick для выполнения метода getElementSize ПОСЛЕ того, как Vue.js обновит DOM в ответ на изменение значения showElement. Это позволяет нам получить размеры элемента после того, как он стал видимым или скрытым.

Карочи, если вам нужно выполнить какой-либо код после обновления DOM в ответ на изменение состояния данных, вы можете использовать метод nextTick.

#vue #основы

Хм, а вы используете readonly в Vue? Оказывается многие про него даже не слышали.

В Vue.js 3 readonly - это функция, которая принимает объект и возвращает его неизменяемую версию. Это значит, что свойства объекта могут быть только прочитаны, но не могут быть изменены.

Использование readonly особенно полезно при работе с состоянием приложения (state), так как предотвращает случайные мутации данных, которые могут привести к неожиданному поведению приложения.

Например, предположим, что у нас есть следующий объект состояния:

const state = reactive({
  count: 0,
  message: "Hello, World!"
});

Если мы хотим создать копию этого объекта, которую нельзя изменить, мы можем использовать readonly следующим образом:

const readonlyState = readonly(state);

Теперь мы можем использовать readonlyState вместо state в нашем приложении, чтобы предотвратить несанкционированные изменения состояния.

// это приведет к ошибке
readonlyState.count = 1;

// это работает
console.log(readonlyState.count); // 0
console.log(readonlyState.message); // "Hello, World!"

Подробнее в доке

Кстати, 18 февраля, был День Рождения канала Душный Вуй, ему стукнул 1 год, так что с прошедшим нас всех, спасибо, что читаете! Без вас ничего бы не получилось! 🎉

https://shiny-button.vercel.app/

Никак не относится к Вую, но просто забавная идея кнопки с отражением юзера)
Она ещё и заляпывается если часто по ней кликать 😅

#vuejs #piniaorm

Немного про Pinia ORM во Vue тут в статье
https://blog.openreplay.com/managing-state-in-vue-with-pinia-orm/

✨ Nuxt 3.3.1

🚀 Улучшения производительности
🧑‍💻 Улучшения DX для разработки локальных модулей
⚗️ Обновление с множеством улучшений Nitro 2.3
♻️ Возможность управления перезагрузкой сервера
💪 Улучшения типизации
🩹 Исправления ошибок

и многое другое!

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

✨ Nuxt 3.3.2

🩹 Большое количество исправления ошибок
💪 Улучшения типизации
📖 Доработка документации

команда Nuxt не только выкатывает новые фичи, но и не забывает фиксить баги!


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

Вышел апдейт на WebStorm, подробно почитать можно туть
https://www.jetbrains.com/ru-ru/webstorm/whatsnew/

Чёт там потихоньку альфы Vue.js 3.3 выходят, кому интересно гляньте, а кому на эту тему есть, что рассказать рассказывайте в комментах)
https://github.com/vuejs/core/blob/main/CHANGELOG.md

#vuejs #histoire

Статейка на тему написания сторизов для компонентов Vue.js с помощью аналога Storybook - Histoire + Typescript
https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/

https://blog.logrocket.com/histoire-component-stories/

Тут кстати поподробнее про этот продукт