mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.

Server stats:

8.4K
active users

#vue_3

0 posts0 participants0 posts today
Habr<p>Vue Teleport: как работает</p><p>Привет, Хабр! Сегодня разберём один из недооценённых, но крайне полезных инструментов во Vue 3 — &lt;Teleport&gt; . Это встроенный механизм, который позволяет рендерить часть шаблона вне текущего DOM‑контекста. Он нужен при реализации модалок, тултипов и других компонентов, которые должны «выпрыгивать» из дерева компонентов, но при этом сохранять реактивность, фокус и доступность. Без этих костылей, z-index: 9999 и appendChild .</p><p><a href="https://habr.com/ru/companies/otus/articles/922610/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/otus/art</span><span class="invisible">icles/922610/</span></a></p><p><a href="https://zhub.link/tags/vuejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vuejs</span></a> <a href="https://zhub.link/tags/Vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_3</span></a> <a href="https://zhub.link/tags/Vue_Teleport" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_Teleport</span></a> <a href="https://zhub.link/tags/Virtual_DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Virtual_DOM</span></a> <a href="https://zhub.link/tags/useFocusTrap" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>useFocusTrap</span></a> <a href="https://zhub.link/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a></p>
Habr<p>Композиционные хуки во Vue 3: коротко</p><p>Привет, Хабр! В этой статье рассмотрим, что такое композиционные хуки во Vue 3, зачем они нужны и как их использовать.</p><p><a href="https://habr.com/ru/companies/otus/articles/922582/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/otus/art</span><span class="invisible">icles/922582/</span></a></p><p><a href="https://zhub.link/tags/vuejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vuejs</span></a> <a href="https://zhub.link/tags/Vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_3</span></a> <a href="https://zhub.link/tags/Composition_API" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Composition_API</span></a> <a href="https://zhub.link/tags/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5_%D1%85%D1%83%D0%BA%D0%B8" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>композиционные_хуки</span></a> <a href="https://zhub.link/tags/%D1%85%D1%83%D0%BA%D0%B8_Vue" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>хуки_Vue</span></a> <a href="https://zhub.link/tags/useFetch" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>useFetch</span></a> <a href="https://zhub.link/tags/useMouse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>useMouse</span></a></p>
Habr<p>Vue 3: Почему ref() — это новая ссылка, а reactive() — обёртка?</p><p>Если вы работаете с Vue 3, вы точно сталкивались с ref() и reactive() . Обе функции из Composition API делают значения реактивными — но делают это по-разному. И хотя документация Vue чётко указывает, что использовать в каком случае, она редко объясняет, почему это важно и что может пойти не так , если использовать не тот инструмент. Вот ссылки на официальную документацию — на всякий случай:</p><p><a href="https://habr.com/ru/articles/920186/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/920186/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue_3</span></a> <a href="https://zhub.link/tags/composition_api" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>composition_api</span></a></p>
Habr<p>Как я создал клон Pinterest с использованием Vue 3 и FastAPI</p><p>GitHub : Ссылка на репозиторий Live Preview : Посмотреть проект Привет, друзья! В этой статье я расскажу, как создал клон Pinterest с использованием современных технологий — Vue 3 для фронтенда и FastAPI для бэкенда. Это многофункциональное полнофункциональное приложение, практически полностью повторяющее Pinterest. Особенностью проекта является кеширование вкладок с помощью Vue Router и KeepAlive , что значительно улучшает пользовательский опыт. Этот проект стал отличной возможностью прокачать навыки в разработке production-уровня fullstack-приложений с поддержкой функционала в реальном времени .</p><p><a href="https://habr.com/ru/articles/903690/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/903690/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/Vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_3</span></a> <a href="https://zhub.link/tags/FastAPI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FastAPI</span></a> <a href="https://zhub.link/tags/restapi" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>restapi</span></a> <a href="https://zhub.link/tags/websockets" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>websockets</span></a> <a href="https://zhub.link/tags/celery" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>celery</span></a> <a href="https://zhub.link/tags/redis" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>redis</span></a> <a href="https://zhub.link/tags/postgresql" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>postgresql</span></a> <a href="https://zhub.link/tags/JWT_authentication" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JWT_authentication</span></a> <a href="https://zhub.link/tags/nginx" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nginx</span></a> <a href="https://zhub.link/tags/docker" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>docker</span></a></p>
Habr<p>Vue 3 под капотом и тонкости Composition API: Reactivity, Provide/Inject, Suspense</p><p>Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать &lt;Suspense&gt; для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах. Приступаем к деталям!</p><p><a href="https://habr.com/ru/articles/870986/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/870986/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/vue" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue</span></a> <a href="https://zhub.link/tags/vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue_3</span></a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a> <a href="https://zhub.link/tags/composition_api" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>composition_api</span></a> <a href="https://zhub.link/tags/%D1%80%D0%B5%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D1%8C" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>реактивность</span></a> <a href="https://zhub.link/tags/proxy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>proxy</span></a> <a href="https://zhub.link/tags/customRef" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>customRef</span></a> <a href="https://zhub.link/tags/suspense" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>suspense</span></a> <a href="https://zhub.link/tags/%D0%B2%D0%B5%D0%B1%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>вебразработка</span></a> <a href="https://zhub.link/tags/provideinject" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>provideinject</span></a></p>
Habr<p>Валидация кастомных компонентов в ElementPlus</p><p>你好! Меня зовут Дмитрий, я фронтенд-разработчик в компании fuse8. Сегодня мы рассмотрим, как можно проводить валидацию кастомных компонентов в формах из UI-библиотеки ElementPlus. Если вы работали с формами в ElementPlus, то наверняка знаете, что библиотека предоставляет простой интерфейс для валидации. Но что делать, если в форме используется кастомный компонент и необходимо применить правило валидации, которое передали в форму? С этим и разберёмся.</p><p><a href="https://habr.com/ru/articles/867148/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/867148/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue_3</span></a> <a href="https://zhub.link/tags/ElementPlus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ElementPlus</span></a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a></p>
Habr<p>Глобальное использование axios в Vue 3 с помощью provide/inject (composition API)</p><p>В этой статье мы рассмотрим интересный и удобный способ глобального использования Axios в приложении Vue 3 и composition api. Реализуем прослойку для работы с api используя типизированные запросы и удобное глобальное использование благодаря provide/inject и composition api. Узнать скорее</p><p><a href="https://habr.com/ru/articles/810685/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/810685/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue_3</span></a> <a href="https://zhub.link/tags/axios" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>axios</span></a> <a href="https://zhub.link/tags/api" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>api</span></a> <a href="https://zhub.link/tags/%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>архитектура</span></a> <a href="https://zhub.link/tags/%D0%B2%D0%B5%D0%B1%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>вебразработка</span></a></p>
Habr<p>Реализация многооконного приложения на Vue 3</p><p>В наше время чуть ли не каждое приложение использует браузерный клиент. Это просто в написании, это кроссплатформенно, это легко в использовании. Браузерные решения уже активно используются и в промышленной сфере: аналитиками, операторами. WEB-приложения для управления промышленными платформами могут быть настолько функциональны, что вся их мощь не укладывается в один монитор, а ведь на рабочем месте может быть ни один, и ни два монитора, а даже больше пяти. Но что же делать, если окна приложений ещё и должны являться частью одной системы и предоставлять возможности удобного взаимодействия между друг другом? Эту проблему я бы и хотел осветить. Меня зовут Дмитрий Дербин – frontend-разработчик компании «Криптонит». В данном материале я поделюсь некоторой теоретической базой по теме и краткими наработками для реализации на Vue 3 на примере простого сайта с погодой.</p><p><a href="https://habr.com/ru/companies/kryptonite/articles/810147/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/kryptoni</span><span class="invisible">te/articles/810147/</span></a></p><p><a href="https://zhub.link/tags/vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vue_3</span></a> <a href="https://zhub.link/tags/%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D0%BE%D0%BA%D0%BE%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D1%8C" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>многооконность</span></a> <a href="https://zhub.link/tags/shared_state" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shared_state</span></a> <a href="https://zhub.link/tags/multiwindow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>multiwindow</span></a> <a href="https://zhub.link/tags/localstorage" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>localstorage</span></a> <a href="https://zhub.link/tags/broadcast_channel" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>broadcast_channel</span></a> <a href="https://zhub.link/tags/spa" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>spa</span></a> <a href="https://zhub.link/tags/store" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>store</span></a></p>
Habr<p>GridStack + Vue 3 composition api</p><p>Мир всем, на связи ShADAMoV ! Сегодня, я бы хотел поведать вам о своём опыте взаимодействия с библиотекой GridStack. Расскажу о странностях и сложностях, с которыми столкнулся в ходе её интеграции во Vue 3 проект. Прежде чем приступим, дисклеймер: автор данной статьи не претендует на истину в последней инстанции и так же не рассказывает про саму технологию, а лишь делится опытом взаимодействия с ней. Прежде чем читать дальше, настоятельно рекомендую прочесть документацию по данной библиотеке от автора (это займет не больше 10 минут). Итак, погнали!</p><p><a href="https://habr.com/ru/articles/783286/" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/783286/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/Gridstack" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Gridstack</span></a> <a href="https://zhub.link/tags/Composition_api" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Composition_api</span></a> <a href="https://zhub.link/tags/Vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_3</span></a></p>