Vue Router позволяет указать, куда и как скролить экран при переходе на роут:

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // всегда прокручивать до верха
    return { top: 0 }
  },
})

const router = createRouter({
  // нативное поведение при навигации с помощью кнопок назад/вперед:
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

const router = createRouter({
  // задержка перед скролом
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  },
})

Другие варианты можно посмотреть в документации

#vuerouter #tip

Нашел четыре плагина для Vite для написания браузерных расширений:

https://github.com/samrum/vite-plugin-web-extension
https://github.com/antfu/vitesse-webext
https://crxjs.dev/vite-plugin/

https://github.com/aklinker1/vite-plugin-web-extension

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

#lib #webextension #vite

Во Vue необязательно использовать только Vue-native компоненты. Можно подключать js решения, если их функционал больше подходит, как, например, слайдер Swiper или таблица Tabulator. У многих есть адаптер для Vue.

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

#tip

При использовании стороннего компонента, получить доступ к его содержимому и изменить при необходимости его логику можно через template ref:

<template>
  <ThirdPartyComponent ref="compRef"/>
</template>

<script setup lang="ts">
const compRef: Ref<typeof ThirdPartyComponent | null> = ref(null);
const input: HTMLInputElement | null = compRef.value?.$el.querySelector('input');
</script>

Если компонент должен освобождать какие-либо ресурсы, то сделать это можно в onUnmounted()

#tip

Почти два месяца назад создал Pull request во VueUse - небольшое добавление и багфикс в useBreakpoints
На днях его приняли.
Мое мнение за это время только усилилось:

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

#vueuse

Что-то пересматривая интервью Маска и других видных деятелей о перспективах искусственного интеллекта, подумалось: создать систему с задействованием ИИ, которая из полуготовых блоков будет создавать готовый магазин, сайт-визитку или лендинг, причем, с достаточно оптимизированным кодом, это намного проще, чем, например, генерить по промптам видео. А такие сайты занимают, наверно, 99% интернета.

Так что желающим только сейчас войти во фронтенд стоит задуматься о наличии мест в отрасли года через два-три.

#ai

Следующие библиотеки помогут, если для вас важна доступность (a11y) приложения:

vue-announcer: Это пакет, который предлагает удобный способ использования динамичных областей в вашем Vue приложении, чтобы пользователи, читающие с экрана, получали информацию о динамическом обновлении определенных частей вашего приложения. Например, индикаторах загрузки, уведомлениях о ходе выполнения и т. д.

a11y-vue-dialog: При создании доступных модалок не обязательно начинать все с нуля. Это библиотека для создания доступных модальных диалогов в приложении Vue.

focus-trap-vue: Помогает справиться с управлением фокусом - отправлять фокус внутрь и наружу при любых обстоятельствах.

vue-skip-to: Помогает с помощью клавиатуры или в программах чтения с экрана переходить к основному содержимому приложения.

vue-dark-mode: Эта библиотека дает пользователям больше возможностей для выбора темы при работе с приложением.

#lib #a11y

У элемента <img> можно установить фон:

.item-image {
    background-color: grey;
}

Он будет показываться, если картинка по какой-то причине не загрузится.
Это полезно когда, например, на фоне картинки есть надписи, и без неё они будут нечитаемыми

#css #tip

Vue transitions используются для анимации, и тригеррятся в следующих случаях:

- Условный рендеринг через v-if
- Условное отображение с помощью v-show
- Переключение динамических компонентов с помощью специального элемента <component>
- Изменение специального key атрибута

Последний вариант позволяет управлять transitions программно:

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
const animationTrigger = ref(0);
</script>

<template>
<Transition name="slide-fade">
  <p v-if="show" :key="animationTrigger">Hi</p>
</Transition>
<button @click="show = !show">Toggle</button>
<button @click="animationTrigger += 1">Re-trigger animation</button>
...

#tip #animation

Development plan:

1. Make it work
2. Make it right
3. Make it fast

#tip

JSDoc комментарии на пропсах позволят IDE показывать более информативные всплывающие подсказки.

defineProps<{
  /** The name of the user. */
  name: string
  /** The age of the user. */
  age: number
}>()

Аналогично комментарии работают на TypeScript интерфейсах, которые в последующем передаются в defineProps<Props>()

P.S. В WebStorm не работает

#tip #jsdoc

Рекомендации по задаванию вопросов во @vuejs_ru и других технических сообществах.

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

1. Перед обращением с вопросом в сообщество - прогугли его (включая ChatGPT и другие AI). Если ты в сообществе задаешь банальный легко гуглящийся вопрос, отношение к тебе сразу становится негативным как к глупому ленивому и самовлюблённому человеку.

2. Учись формулировать вопросы. Если ты загуглил вопрос уровня джун-мидл и не получил ответа на первой странице, скорей всего ты плохо его сформулировал. Искусство гуглить не имеет верхней границы и его надо развививать. В интернете есть статьи и советы о том как правильно составлять запросы поисковикам и AI.

3. Формулировка вопроса должна быть краткой, точной и понятной. Никто не будет изучать 10 запощенных тобой скриншотов и простыню описания что на них происходит. Лаконично опиши, что ты пытаешься сделать, и что не получается. Сфокусируйся на том, чтобы объяснить задачу, которую ты решаешь, а не текущее поведение программы. Объясняй своими словами, не старайся всё завернуть в знакомые умные термины.

4. Формулировка вопроса должна быть полной. Это значит, в ней должна содержаться вся необходимая для решения задачи информация. Из тебя не должны выуживать данные по крупицам.

5. Если ты создашь "песочницу" с проблемным кодом, шансы на быстрое получение ответа и других полезных советов возрастают на порядок. Это не преувеличение, и "на порядок" - это в 10 раз.

6. Для больших блоков кода используй gist или аналоги. Небольшие можно поместить в сообщение с вопросом, но обязательно используй встроенное форматирование:

console.log("use ```");

7. Не отправляй свой вопрос одновременно в несколько групп - это раздражает. Отправь в одну, подожди ответы. Не понравятся - спроси в другой.

8. Задавай вопрос в спокойной манере культурного взрослого человека, без сленга и кривляний.

Когда вы помещаете картинку в блок с заданными размерами, если их соотношения сторон отличается, картинка исказится. Иногда из-за адаптивности подобрать их одинаковыми в принципе невозможно.
В таких случаях поможет object-fit: cover;, который обрежет края, но оставит картинку неискаженной.

.card-image {
    object-fit: cover;
}

Можно, в принципе, повесить на все картинки эти два правила:

img {
    max-width: 100%;
    object-fit: cover;
}

#css #tip

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

Конституция СССР менялась всего три раза, а Конституция США - 27. Как вы думаете, почему?

Внимание, вопрос: Vue сменила три версии, React - 18, Angular - 17. Как вы думаете, почему?

#quiz

Расширение для IDE Volar проапдейтилось до версии v.2.0 и стало называться Vue - Official (название так себе для ссылок, конечно)

Много изменений и много уже зарепортировано проблем
Ушел Takeover mode, теперь расширение работает через TypeScript language service

Расширение TypeScript Vue Plugin (Volar) предлагается удалить

#volar