Vue-FAQ
931 subscribers
571 photos
91 videos
561 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Если нужно продебажить внутри шаблона SFC, можно внутрь поставить логгирующую функцию или debugger:

<template>
<div v-for="i in 4" :key="i">
{{ log(i) }}
{{ i + 1 }}
</div>
</template>


function log(val) {
console.log(val);
// debugger;
}



#tip
👍10
Apple разрешила использовать отличные от WebKit движки браузеров для iOS в EU

#news #safari #ios
Бывают случаи, когда надо явно перерендерить шаблон - например, он мог быть изменен сторонней нереактивной библиотекой. Самый правильный способ делать это - через key:

<script setup>
import { ref } from 'vue';

const componentKey = ref(0);

const forceRender = () => {
componentKey.value += 1;
};
</script>


<template>
<MyComponent :key="componentKey" />
<button @click="forceRender">Force re-render</button>
</template>


#tip
👌10👍7
Буду иногда кидать интересные математические задачки для разминки ума

#math
🗿6👍2
Сегодня полегче

#math
👍2
Обновился проект Arty-Crafty
Добавились: выбор BaaS, настройка и интеграция с Supabase, настройка Hoppscotch, добавление мобильного нижнего меню.
Текущая версия сайта - https://vuesence.github.io/arty-crafty/
Очередное CMV

#artycrafty #supabase #cmv
🔥21
Как сделать человеко-понятные SEO-friendly ссылки из названия, типа такой?

/category/2-voylochnie-igrushki вместо /category/2

5 строк.

В роутах пишем:
  {
path: "/category/:categoryId",
name: "category",
props: route => ({ categoryId: +(route.params.categoryId as string).split("-")[0] }),
component: ProductCategoryView,
},


И в месте создания ссылки (боковое меню, например) при router.push() добавляем slug названия категории:

@click="router.push(`${category.id}-${slug(category.title)}`)"


функцию slug() разрешаем сгенерить Codeium-u запросом "write slug function for сyrillic letters". На бэкенде ничего менять не надо.

Теперь если пользователь сохранит страницу в браузере, а название категории немного изменится на сайте, он все равно попадёт, куда надо.
categoryId можно поставить и после slug-a, тогда будет как у Ozon-a.
Может кто знает, есть ли готовые библиотеки для визуализации графа релизов и коммитов GitHub проекта? Подскажите.

#github
Вчера не смог заснуть пока не сделал. Демо. Строит таймлайн релизов любого публичного репозитория. Адаптирован к темам VitePress.

Опубликовал npm пакет release-timeline. Документация здесь.

Подключение в компоненте или в VitePress .md:

<script setup>
import { ReleaseTimeline, DefaultOptions as options } from "release-timeline";
import "release-timeline/dist/style.css";

options.github.owner = "vuesence";
options.github.repo = "arty-crafty";
</script>

<ReleaseTimeline :options="options" />


Планируется добавить детали релиза, а также опционально список commits и pull requests к каждому релизу
🔥25
Глобальный прелоадер

Альтернативу много лет создающемуся Suspense несложно сделать самому с помощью одной composable функции в 30 строк.

Он нужен когда в нескольких компонентах могут асинхронно грузится данные, и нужно показывать один общий прелоадер пока все загрузки не закончатся.
🔥6👍4
Небольшой лайфхак, если у вас в строковых переменных содержится какой-то код, и вы хотите, чтобы он синтаксически подсвечивался.

Также есть отдельное расширение для VS Code для этого.

#tip
👍9
Вопрос: при изменении какого CSS свойства на 0.01px визуально видно изменения на экране?

#tip #css
🤔4
История shikiji - библиотеки для синтаксической подсветки фрагментов кода, о которой мы писали несколько раз, - скоропостижно завершилась.

Напомним, Anthony Fu форкнул и портировал пакет shiki.js на ESM. Данная библиотека предназначено для синтаксической подсветки фрагментов кода, аналог highlight.js. Использует hast для токенизации и VS Code Oniguruma, которая написана на C и компилируется в WebAssembly. Данная часть переписана Anthony на ESM, является tree-shakable и работает и в Node.js, и в браузере.

Использование того же движка, что и в VS Code, позволяет работать быстрее распространенных подсветчиков кода, занимать меньше места и быть более функциональна (например, включает препроцессор для TypeScript TwoSlash нотаций). Доступны множество языков (включая вариации Vue и Vue HTML) и все темы VS Code (на данный момент около 5000). VitePress переехал на новую библиотеку для подсветки блоков кода в декабре 2023 года.

На прошлой неделе владельцы shiki сделали Pull request и забрали себе все улучшения, добавленные Anthony. Теперь он работает над shiki, проект shikiji архивирован.

#antfu #shiki #shikiji #vitepress
🔥5🤨3
Один из вариантов решения записывается в одну строчку

#math
👍2
Один из создателей ООП и UML Грэди Буч цитирует создателя Linux Линуса Торвальда

#tip #quote
🤣5
v-html директива может исправлять ваш контент исходя из его HTML валидности. Имейте в виду.

Например, строка

<p><h2>Hello world</h2></p>


будет преобразована в

<p></p>
<h2>Hello world</h2>
<p></p>


#tip
😱16👍2
Release candidate готов (смена репозитория сверху слева)

К версии пакета для Vue 3 проектов и для встраивания в VitePress добавил Web components версию, так что можно запускать на React или простом HTML через <release-timeline />

Просьба потестить. Eсли кто проверит работает ли на Nuxt - буду благодарен

Вижу основное применение в замене changelog проектов в их доках на VitePress. При создании релиза на GitHub генеришь описание, правишь его.

Документация

#releasetimeline #pet
🔥5
Указаны периметры прямоугольников
Справа вверху - квадрат
Найти площадь внешнего прямоугольника

#math
🤔1
Кстати, кто не знает, webp формат реально очень сильно уменьшает размер картинок по сравнению с jpeg при том же визуально качестве. Попробуйте. Плюс, улучшится рейтинг на PageSpeed.

Поддержка браузерами достаточная - 96.41% (все, кроме IE)
Можно использовать jpeg как fallback в тэге <picture>

#tip #webp
👍3🤔3🔥1
3 февраля 2014 года Evan You впервые опубликовал новость о новом JavaScript фреймворке Vue.js.

10 лет спустя:

#vuejs #evanyou
😁14👍5🎉2