#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/

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

Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации:
https://www.w3.org/TR/css-nesting-1/

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

Тем временем подъехала новая версия Nuxt 3.4.0 🎊🎉

🛠️ Более простая конфигурация Devtools
🎁 Объектный синтаксис при создании плагинов
🪄 Transitions API для переходов между страницами

а так же много всего интересного, команда накста аж целый пост запилила в своем блоге https://nuxt.com/blog/v3-4

на самом деле в релизноутах сильно больше описано всякого, кому интересно обязательно заглядывайте 👀

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

Сегодня конечно не четверг, но держите новый релиз Nuxt!

⚡️Обновили vue до v3.3.0
🙌 Обновили Nitropack до v2.4
⏰ Реализовали конфигурацию под разные environment

На самом деле там ещё много интересного, а я пойду обновлю накст у себя в проекте nuxi upgrade --force 😉


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

В прошлую пятницу вышло большое обновление Nuxt v3.6.0, в этом релизе выкатили много всего

🧩 Дали возможность делать кастомный индикатор загрузки в spa режиме
⚡️ Улучшили производительность
🔥 Улучшили статичные серверные компоненты, теперь они не занимают основной бандл
🎨 Улучшили дедупликацию глобальных стилей
🎬 Подкрутили возможности для анимации страниц
✨ Добавили поддержку провайдеров, для генерации статических ресурсов (пока только для vercel и netlify)
💪 Улучшили поддержку типов
⚗️ Обновили Nitro до v2.5, там кстати много интересного, в том числе экспериментальная поддержка потокового рендеринга
🛠️ Добавили разных утилит для разработчиков модулей

Конечно же, ознакомиться со всем списком изменений можно в changelog

P.S. В ближайший месяц ждем версию 3.7, с еще большим списком улучшений 😉

#vue #vue3
https://habr.com/ru/articles/745012/

Всем дороу!

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

Типа есть вот:

interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'change': [value: Event]
}

И я не могу сделать

interface ISomeNewInput extends IBaseInputEmits {
'update:modelValue': [value: number | string]
'change': [value: number | string]
}

const emit = defineEmits<ISomeNewInput>()

Я вот что не пойму, вот есть у меня интерфейс для эмитов в новом синтаксисе

export interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'focus': [value: Event]
'blur': [value: Event]
'input': [value: Event]
'change': [value: Event]
'keydown': [value: Event]
'keyup': [value: Event]
'request-start': [value: string | object]
'request-done': [value: string | object]
'request-failed': [value: string | object]
}

Я его пытаюсь использовать в defineEmits:

const emit = defineEmits<IBaseInputEmits>()

Почему шторму это не нравится?

Роадмап по Вую тут увидел
https://roadmap.sh/vue