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

Contacts: @RuslanMakarov
Download Telegram
November 18, 2024
FilePond

Подсказали красивый file uploader компонент

15K+ звезд, много плагинов,, правда, довольно увесистый - 100Кб+

На JS. Подключается монтированием к элементу.

<script setup lang="ts">
import * as FilePond from "filepond";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import { onMounted, ref, useTemplateRef } from "vue";
import "filepond/dist/filepond.min.css";

const fileInput = useTemplateRef("fileInput");

FilePond.registerPlugin(FilePondPluginFileValidateType);

onMounted(() => {
FilePond.setOptions({
acceptedFileTypes: ["image/*", "application/pdf"],
server: "api/upload/",
});
FilePond.create(fileInput.value);
});
</script>

<template>
<div class="analysis-view">
<h2>Analysis upload</h2>
<p></p>
<input
ref="fileInput"
type="file"
class="filepond"
name="filepond"
multiple
data-allow-reorder="true"
data-max-file-size="3MB"
data-max-files="3"
/>
</div>
</template>


Вот, кстати, один из вариантов использовать динамические импорты/роуты - в мобильной версии drag-n-drop не нужен, поэтому можно обойтись более простым file input и сэкономить на бандле.

#lib
November 19, 2024
Довольно свежие Vue сниппеты для VS Code, среди большого количества хлама.

Vue 3 VS Code Snippets

#vscode #tip
November 20, 2024
November 20, 2024
November 21, 2024
В команде Nuxt-а при выводе Nitro на внешний рынок внезапно осознали, что автоимпорты - плохо. И попытались их сделать опциональными. Но вход - рубль, выход - два.

Дело настолько деликатное, что ветку даже закрыли для просмотра посторонними.

Автоимпорты имеют существенные проблемы:
- не весь тулинг (IDE, Volar etc) их понимает, не всегда будут подсказки;
- код с ними выглядит гораздо менее явным, чем с обычными импортами в IDE;
- полная нечитабельность на площадках типа GitHub;

#goodpractices #nuxt
November 21, 2024
November 21, 2024
November 22, 2024
November 22, 2024
November 23, 2024
November 24, 2024
Для реализации своих tooltip-ов и "выпадашек", наверное, самым оптимальный вариантом является использование современной и минималистичной библиотеки Floating UI

Их Vue адаптер мне не подошел. Вот простой вариант своего тултипа на их чистом js пакете.

В данном случае содержимое тултипа является ребенком элемента, на котором его надо показать. Возможны другие варианты реализации, включая кастомную директиву.

Обертывать в Tooltip компонент то, на чем его надо показать, имхо, извращение.

<script setup lang="ts">
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { onMounted, ref, useTemplateRef } from "vue";

const popover = useTemplateRef("popover");

onMounted(() => {
popover.value.showPopover();
computePosition(popover.value.parentElement, popover.value, {
placement: "left",
middleware: [flip(), shift({ padding: 5 }), offset(10)],
}).then(({ x, y }) => {
Object.assign(popover.value.style, {
left: `${x}px`,
top: `${y}px`,
});
});
});
</script>

<template>
<div
ref="popover"
class="popover"
popover
role="tooltip"
>
<div class="tooltip-body">Hello</div>
</div>
</template>

<style scoped>
.popover {
position: fixed;
width: max-content;
top: 0;
left: 0;
margin: 0;
padding: 1em;
text-align: left;
border: 1px solid var(--bbl-c-border);
border-radius: 5px;
max-width: 400px;
box-shadow:
0 14px 44px rgba(0, 0, 0, 0.12),
0 3px 9px rgba(0, 0, 0, 0.12);
border-color: #bbb;
}
</style>

#lib #tooltip #dropdown
November 25, 2024
November 25, 2024
Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n
November 26, 2024
Вышел vue-router 4.5.0

Из примечательного - по инициативе Эвана на router-link появился prop view-transition, который задействует нативный View Transitions API для перехода между роутами.

<template>
<RouterLink to="/some-page" view-transition>
Go to some page
</RouterLink>
</template>


Анимацию которого можно кастомизировать CSS стилями

Может быть быстрее вьюшного <Transition> и уж точно удобней в записи (по сравнению с конструкцией с router-view ). Но не такой функциональный, для простых переходов.

#router #animation #css
November 26, 2024
Неожиданно вышел Vite 6.0

Больших и даже просто значимых изменений практически нет. Предполагается, что это последний мажорный стабильный релиз перед заносом в Vite Rolldown-a и прочей Voidzero-шной машинерии.

#vite
November 27, 2024
November 27, 2024
Вышел отчет State of Frontend 2024

Кроме того, что JQuery еще использует пятая часть опрошенных (а основная часть jq разрабов просто игнорирует подобные опросы), особо ничего интересного

#stats #survey
November 27, 2024
November 28, 2024