Understanding Vue 3’s “expose”

https://medium.com/@vuemastery/understanding-vue-3s-expose-16766aca057f?source=rss------vuejs-5
With the release of Vue 3.2 a new composition tool was made available for us, called expose.Continue reading on Medium »

What Vue skills you need for 2022

https://medium.com/vue-mastery/what-vue-skills-you-need-for-2022-316583647a09?source=rss------vuejs-5
We’ve thought about this quite a lot as a team here at Vue Mastery, and this article serves as our suggestions for what to focus on if…Continue reading on Vue Mastery »

How to Persist and Rehydrate Vuex State Between Page Reloads

https://medium.com/@shadrqen/how-to-persist-and-rehydrate-vuex-state-between-page-reloads-f79b2414956a?source=rss------vuejs-5
There are instances in your Vue.js project where you need to share data between components.Continue reading on Medium »

Vue.js ile input içerisinde ki değeri dinamik olarak elde etme

https://medium.com/@EmirEskici/vue-js-ile-input-i%C3%A7erisinde-ki-de%C4%9Feri-dinamik-olarak-elde-etme-777ed0555f49?source=rss------vuejs-5
Öncelikle Hoşgeldiniz…Continue reading on Medium »

Migrating from Angular to Vue: A Dashboard’s Story

https://medium.com/building-lob/migrating-from-angular-to-vue-a-dashboards-story-4be148545793?source=rss------vuejs-5
We recently migrated our user dashboard from AngularJS to Vue and learned valueable lessons along the way.Continue reading on Lob Developers »

How to Create Carousels with Vuetify

https://codingbeauty.medium.com/vuetify-carousel-758d694029cb?source=rss------vuejs-5
Everything you need to know about creating carousels in Vuetify. Use a carousel to display lots of images in the same screen space.Continue reading on Medium »

How to use model directive with two-way computed property in Vue.js?

https://shivanshtiwari02.medium.com/how-to-use-model-directive-with-two-way-computed-property-in-vue-js-205c9abd1fa3?source=rss------vuejs-5
What is the v-model directive in Vue.js?Continue reading on Medium »

Configuring Sonarqube in a Vite project, with Vue, Typescript and Vitest

https://frankorellana.medium.com/configuring-sonarqube-in-a-vite-project-with-vue-typescript-and-vitest-48a302972c24?source=rss------vuejs-5
This will allow us to configure Sonarqube to check code quality and test coverage for our vite project, you can check the full source code…Continue reading on Medium »

Top 7 Advantages of Using Vue.js for Web App Development

https://91social.medium.com/top-7-advantages-of-using-vue-js-for-web-app-development-b3b43795b67a?source=rss------vuejs-5
Vue.js is a progressive JavaScript framework used for building engaging UIs. It is quite different compared to other frameworks as it is…Continue reading on Medium »

Docker: заметки веб-разработчика. Итерация четвертая

https://habr.com/ru/post/657361/?utm_campaign=657361&utm_source=habrahabr&utm_medium=rss
Привет, друзья!

В этой статье я продолжаю (и заканчиваю) делиться с вами заметками о Docker.

Заметки состоят из 4 частей: 2 теоретических и 2 практических.

Если быть более конкретным:


первая часть посвящена Docker, Docker CLI и Dockerfile;
во второй части рассказывается о Docker Compose;
в третьей части мы разрабатываем приложение, состоящее из трех сервисов: клиента на [React](), админки на [Vue]() и сервера на [Express](), и базы данных [PostgreSQL](), взаимодействие с которой осуществляется с помощью [Prisma]().


В этой заключительной части мы "контейнеризуем" наше приложение.

Репозиторий с кодом приложения.

Если вам это интересно, прошу под кат. Читать дальше →

Как работать с i18n в Nuxt.js

https://habr.com/ru/post/658105/?utm_campaign=658105&utm_source=habrahabr&utm_medium=rss
Всем привет!Сегодня хотел поделиться несколькими фишками в работе с i18n.i18n – это фреймворк для интернализации веб-приложении. То есть, при помощи данного фреймворка мы легко можем реализовать мультиязычность в веб-приложениях.Nuxt.js мощный инструмент для разработки веб-приложений. Помимо того, что он из коробки предоставляет много полезных утилит и инструментов, также, есть много дополнительных модулей из community, которые позволяют легко интегрировать разные инструменты в Nuxt.js. Посмотреть на сторонние модули для Nuxt.js можно здесь. Читать далее

История одного CRUD'а

https://habr.com/ru/post/660847/?utm_campaign=660847&utm_source=habrahabr&utm_medium=rss
В 2015 году, когда я пришёл на своё текущее место работы, мне было непривычно от необыкновенной свободы действий. Буквально, на новом месте можно было проявить весь творческий потенциал как DevOps-евангелиста. Мне нравилось выстраивать процессы, автоматизировать рутину, делать разработку удобной. Больше всего я люблю оптимизации, а больше всего ненавижу - рутину.Эта история одной боли и попытке не просто "принять обезболивающее", а реально излечить её. Поэтому готовьтесь переварить лонгрид. Читать это всё...

Vue или React? Кратко о возможном росте технического долга и что лучше для начинающих

https://habr.com/ru/post/661311/?utm_campaign=661311&utm_source=habrahabr&utm_medium=rss
В статье ставится проблема избыточной сложности использования фреймворка React.js при богатстве его функций, описана возможная тенденция роста технического долга и зависимость между предоставляемыми средствами и величиной технического долга.Что подразумевается под необоснованной сложностью проектов?Для начала необходимо отметить, что «React» в отличии от «Vue» предоставляет огромную свободу разработчику. Благодаря этому разработчики любят данный фреймворк и всячески указывают, что приложения на «React» будут быстрее и производительнее чем на «Vue». Это несомненно так, «React» приложения можно сделать быстрым, производительным и легко тестируемым. К сожалению, достичь этого крайне тяжело и из-за этого многие компании могут иметь не высокопроизводительные приложения, а наоборот перегруженные излишним кодом и трудно тестируемые приложения. Это связанно с тем, что начинающим разработчикам сложно понять, как правильно писать приложения на «React». «React» словно тренер по плаванию, бросает вас в воду и говорит плыви, ему не важно будете вы правильно дышать или махать руками, ему важно чтобы вы плыли. Проецируя данный пример на «React», мы получаем возможность писать очень плохой рабочий код. Особенно это распространено в командах, где нет специалиста по «React». Люди меняются и каждый раз поддерживать приложение все труднее и труднее, кто-то увидел пример в функциональном стиле: Читать далее

[Перевод] Zustand — руководство по простому управлению состоянием

https://habr.com/ru/post/661411/?utm_campaign=661411&utm_source=habrahabr&utm_medium=rss
За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand. В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React. Читать далее

Оптимизация производительности ssr-приложений

https://habr.com/ru/post/588468/?utm_campaign=588468&utm_source=habrahabr&utm_medium=rss
Кто бы что не говорил о метриках производительности, мол это все ерунда и ни кому кроме гугла не нужно. Но, во-первых, я так не считаю, а во вторых у нас есть заказчики, которым это важно

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

Не буду пересказывать рекламные лозунги про 500% пользователей покидают страницу после 100мс ожидания, увелечения конверсии на 20% при снижении LCP на 2мс… читайте сами. Скажу коротко: метрики производительности важны. Читать дальше →

[Перевод] CSS :has() селектор

https://habr.com/ru/post/662355/?utm_campaign=662355&utm_source=habrahabr&utm_medium=rss
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня. Читать далее

Простой способ создания и переиспользования модальных диалогов во Vue 3

https://habr.com/ru/post/662652/?utm_campaign=662652&utm_source=habrahabr&utm_medium=rss
Модальные диалоги не такая и сложная задача в разработке. Разве что можно легко запутаться в коде, если нужно вызывать модальные окна по цепочке. Но это очень монотонная и неинтересная работа с повторяющейся логикой, которую подчас копируют из компонента в компонет с незначительными изменениями.
Хорошим решением было бы создать функцию, которая принимала бы компонент диалога и управляла бы его рендерингом в шаблоне, а этот диалог можно "промисифицировать" и работать с ним как с асинхронной функцией. Как например в этой библиотеке vue-modal-dialogs. К сожалению она давно не обновлялась и не опддерживает Vue 3.
А еще отличной идеей для организации кода было бы отдельные хуки, код в которых выполнялся бы в зависимости от действий пользователя.
Все это есть в плагине vuejs-confirm-dialog о котором я хочу вам рассказать. Читать дальше →

[Перевод] Тестирование с помощью Vitest

https://habr.com/ru/post/664350/?utm_campaign=664350&utm_source=habrahabr&utm_medium=rss
Vitest — это новая среда тестирования на базе Vite. Он все еще находится в разработке, и некоторые функции могут быть еще не готовы, но это хорошая альтернатива, которую можно попробовать и изучить. Читать далее

Функция Reactive во Vue: как это работает

https://habr.com/ru/post/664506/?utm_campaign=664506&utm_source=habrahabr&utm_medium=rss
После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются. Читать далее

[Перевод] Pinia vs Vuex: Ананасовый экспресс в светлое будущее

https://habr.com/ru/post/666250/?utm_campaign=666250&utm_source=habrahabr&utm_medium=rss
Pinia vs Vuex: Ананасовый экспресс сижу код пишу! Pinia, легковесная библиотека управления состояниями для Vue.js, приобрела популярность в последнее время. Она использует новую систему реактивности во Vue 3 для создания интуитивно понятной и полностью типизированной библиотеки управления состояниями. Читать далее

Есть много способов сделать это: Vue 3 и взаимодействие компонентов

https://habr.com/ru/post/668072/?utm_campaign=668072&utm_source=habrahabr&utm_medium=rss
Vue 3 принёс в жизнь разработчиков возможность организации более гибкой структуры приложений. Всё чаще я стал замечать, что разные команды, а порой и разработчики внутри одной, используют целый зоопарк сомнительных подходов для организации взаимодействия между компонентами. Применяются какие-то крайности, либо всё в state manager, либо в composable (composition API), либо мутация props внутри дочерних компонентов!Хотелось бы поднять эту тему и рассмотреть варианты взаимодействия компонентов доступные нам во Vue 3. Давай посмотрим...