Как стать автором
Обновить
13.02

VueJS *

Прогрессивный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Facebook выпустил новую CSS-in-JS библиотеку — StyleX

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров14K

Верней оформил 5 декабря 2023 года оформил для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

Код в React в итоге выглядит примерно так:

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии23

Vue state management: Pinia stores или composables с глобальными рефами?

Время на прочтение2 мин
Количество просмотров4.8K

На Reddit прошла интересная дискуссия с 25К+ просмотрами по вопросу предпочтений разработчиков при необходимости управлять глобальным состоянием во Vue 3. Ниже её итоги.

Читать далее
Всего голосов 9: ↑6 и ↓3+3
Комментарии13

Как мы делаем проекты

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров4.7K

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

Читать далее
Всего голосов 7: ↑6 и ↓1+5
Комментарии2

История создания Оптимизатора для ПК: Nuxt.js, Electron и C++ в Одном Проекте

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4K

Как я проектировал свой самый большой проект, сложности с которыми я столкнулся. Фишки и неочевидные моменты при разработке.

Читать далее
Всего голосов 14: ↑1 и ↓13-12
Комментарии10

Истории

Google и Yandex SEO оптимизация для SPA приложений

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров4.1K

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

Результат: Google - хорошо, Yandex - не очень

Читать далее
Всего голосов 8: ↑4 и ↓40
Комментарии11

TypeScript: infer и conditional types. Продвинутый TS на примерах

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров21K

Разбираемся, что же такое conditional types и как написать свои утилиты, такие как ReturnType, InstanceType, NonNullable и др., при помощи ключевых слов infer и extends.

Читать далее
Всего голосов 7: ↑7 и ↓0+7
Комментарии3

План «Барбаросса» от Vue.js

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров14K

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

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

Читать далее
Всего голосов 16: ↑14 и ↓2+12
Комментарии30

Билдер Vue 3 веб приложений

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3.9K

Vue 3 вебсайт билдер (npm пакет vue-webapp) позволяет создать каркас будущего веб приложения, с возможностью выбора бизнес-шаблона (портфолио, блог, магазин и .т.д.), макета сайта, дизайна и элементов функционала (API модуль, i18n, PWA, splash screen, auth модуль, темы и т.д.), для дальнейшей кастомизации и наполнения контентом.

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии0

Удобные формы для Vue 3

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров7.7K

Vue + Form. А можно немного попроще...

Краткий путь по созданию библиотеки для работы с полями и формами . В статье описан краткий путь от v-modal к чему-то более умному и самостоятельному. Я также поделился своими наработками, чтобы вы могли использовать их у себя в проекте.

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии5

Организация стенда локальной разработки для самых маленьких с автоматической пересборкой приложения (фронтенд + бэкенд)

Уровень сложностиПростой
Время на прочтение25 мин
Количество просмотров14K

Вносить изменения в код приложения и тут же автоматически получать задеплоенные изменения, чтобы быстро тестировать его, — мечта разработчика. В этой статье мы посмотрим, как реализовать такой подход для небольшого приложения с фронтендом и бэкендом: организуем два варианта локального стенда на базе minikube или Docker с автоматическим развертыванием всех изменений или только закоммиченых в Git.

Бэкенд приложения напишем на Go, а фронтенд — на Vue.js. Все это позволит быстро запускать проект для тестирования прямо во время разработки, что, несомненно, повысит удобство работы с приложением.

Читать далее
Всего голосов 40: ↑38 и ↓2+36
Комментарии4

Два frontend фреймворка. Два подхода

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров9.6K

В статье сравниваются два подхода к созданию веб интерфейса пользователя. Один подход - это современные фраймворки с компонентами, которые инкапсулируют HTML, js, css. Второй подход к разработке веб-интерфейса аналогичен разработке интерфейса пользователя десктопного приложения.

Читать далее
Всего голосов 7: ↑1 и ↓6-5
Комментарии12

Vue3 provide-inject di

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.5K

Разбираемся с provide-inject до конца. Что он может? Поговорим о том, как его использовать, зачем он вообще нужен и можно ли удобно настроить использование этой фичи в приложении.

Читать далее
Всего голосов 11: ↑10 и ↓1+9
Комментарии14

React vs Vue vs Angular. Часть 3

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров11K

Управление глобальным состоянием

В прошлой части мы рассмотрели методологии оптимизации и реюзабельности логики, а так же подход к роутингу каждого фреймворка. Однако давайте теперь переключим наше внимание на другой важный аспект - управление глобальным состоянием. В этом разделе на примере Angular, React и Vue мы рассмотрим уникальные стратегии, используемые этими фреймворками для работы с глобальными состояниями. По мере изучения этих подходов мы узнаем, как разработчики эффективно решают сложную задачу поддержания синхронизации данных в приложениях.

Читать далее
Всего голосов 4: ↑3 и ↓1+2
Комментарии35

Ближайшие события

Vue 3: Ваше первое знакомство с компонентом Transition

Время на прочтение3 мин
Количество просмотров3.1K


Мы можем значительно улучшить юзер экспириенс, добавив плавную анимацию перехода между различными состояниями в нашем веб-приложении. Vue.js 3 предоставляет мощный компонент Transition, который упрощает процесс внедрения переходов во Vue-приложениях. В этой статье мы рассмотрим принцип работы компонента Transition Vue 3 и продемонстрируем его использование на реальных примерах.
Читать далее
Всего голосов 9: ↑8 и ↓1+7
Комментарии0

Fusor vs React

Время на прочтение2 мин
Количество просмотров5K

Mortal Kombat - Vs Screen (MKX version) Fan art by LukenStruken CC BY-SA 3.0

Моя работа состоит в написании кода на React. Несмотря на то, что мне нравится React, при разработке на нем я столкнулся с некоторыми его недостатками. В связи с этим, я решил создать свою библиотеку, Fusor, чтобы исправить эти недостатки и вот что из этого получилось.

Читать далее
Всего голосов 21: ↑17 и ↓4+13
Комментарии41

Vue.js 3 — шаблоны проектирования и лучшие практики

Уровень сложностиСредний
Время на прочтение2 мин
Количество просмотров9.7K

Предлагается перевод книги Vue.js 3 Design Patterns and Best Practices автора Pablo Garaguso.

Книга вышла в мае 2023 года, написана очень компетентно, оперирует современными технологиями и стандартами. Материал книги будет полезен разработчикам не только Vue, но и других фронтенд фреймворков.

Читать далее
Всего голосов 11: ↑10 и ↓1+9
Комментарии2

Миграция с Vue 2 на Vue 3: Новые Фичи

Время на прочтение7 мин
Количество просмотров7.2K

В этой статье погрузимся с головой в захватывающий мир новых возможностей Vue 3.

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

Без лишних отлагательства приступим к делу!

Читать далее
Всего голосов 15: ↑12 и ↓3+9
Комментарии6

Как типизировать Vuex Store

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.5K

Всем привет!

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

You are welcome!

Хочу типизировать Vuex
Всего голосов 2: ↑2 и ↓0+2
Комментарии2

Кулинарный гид по Vue.js: всё о props

Уровень сложностиСредний
Время на прочтение21 мин
Количество просмотров12K

Привет, Хабр! В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

Props – от слова «properties» (здесь и дальше будем использовать слово «props») – это специальные атрибуты, используемые в экосистеме Vue для передачи данных в компоненты. Они являются частью системы реактивности, позволяют определять типы данных и проводить с ними валидацию.

По большей части мы будем покрывать основы передачи props. Поэтому статья будет актуальна как для Vue 2, так и для Vue 3, поскольку по части объявления props отличий мало. Но так как в Composition API и TypeScript все же они есть, то мы рассмотрим их тоже.

Если вы подходите под все эти условия, то добро пожаловать, мы начинаем наш кулинарный гайд! Bon appétit!

Читать далее
Всего голосов 13: ↑12 и ↓1+11
Комментарии5

Nuxt3, Vue3, CKEditor и прочие WYSIWYG

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров6.3K

В один прекрасный момент мне понадобилось прикрутить WYSIWYG редактор в проект написанный на Nuxt 3. Очень быстро выяснилось что готовых решений полно, но, подавляющее большинство написано для Nuxt 2 и Vue 2, есть немало решений поддерживающих Vue 3, правда прикрутить их в Nuxt 3 это целый квест, о прохождении которого я хотел бы и рассказать.

Читать далее
Всего голосов 2: ↑2 и ↓0+2
Комментарии5