Перевод статьи «An Overview of the Top 10 Vue UI Component Libraries in 2021».
Vue JS — это прогрессивный фреймворк JavaScript, который используется для создания одностраничных приложений (SPA) и пользовательских интерфейсов. Это один из самых широко используемых фронтенд-фреймворков.
Интересная особенность Vue — его способность разбивать страницу на различные компоненты. А благодаря использованию библиотек UI-компонентов этот процесс становится гораздо проще.
Библиотек, с помощью которых вы сможете создавать свои компоненты легко и быстро, довольно много. В этой статье мы рассмотрим топ-10 библиотек UI-компонентов для Vue, актуальных в 2021 году. По каждой мы дадим короткий обзор, расскажем, каковы ее преимущества, а также приведем GitHub- и npm-статистику.
1. PrimeVue
PrimeVue — это универсальная, простая в использовании и производительная библиотека UI-компонентов для Vue. Она создана, чтобы помочь вам строить прекрасные пользовательские интерфейсы.
В этой библиотеке вы найдете больше 80 UI-компонентов с адаптивным дизайном и полной поддержкой WCAG (руководство по обеспечению доступности веб-контента). Благодаря последнему обновлению эта библиотека имеет полную поддержку Vue 3. В том же обновлении добавилось большое количество новых компонентов.
Одно из основных преимуществ PrimeVue — широкий спектр компонентов. Там есть все, от таблиц и пагинаторов до продуманных диаграмм, которые вы можете использовать при создании интерактивных Vue-приложений.
Библиотека имеет открытый исходный код, больше тысячи звезд на GitHub и 6 983 еженедельных загрузок в npm.
2. Vuetify
Vuetify — UI-библиотека Vue с красивыми, сделанными вручную компонентами. Все компоненты соответствуют спецификациям Material Design: они модульные, адаптивные и производительные.
Благодаря использованию SASS-переменных вы сможете кастомизировать свои приложения, создавая уникальные и динамичные макеты и прекрасные стили компонентов.
Vuetify учитывает руководства по доступности, поддерживает все современные браузеры и совместима с Vue CLI 3. Она легко интегрируется и имеет множество UI-компонентов, пригодных для многократного использования (карусели, навигация, карточки).
Библиотека также предлагает базовые шаблоны для простого HTML, Webpack, NUXT, PWA, Electron, A La Carte и Apache Cordova.
Vuetify имеет открытый исходный код. Библиотека получила больше 29 тысяч звезд на GitHub, а на npm ее скачивают 319170 раз в неделю.
3. Chakra UI
Chakra UI — библиотека простых, модульных и доступных компонентов. Это отличный инструмент для быстрого и легкого создания Vue-приложений.
Все компоненты отличаются доступностью (жесткое следование стандартам WAI-ARIA), тематичностью и пригодностью для компоновки. Они поддерживают адаптивные стили из коробки и совместимы с темным режимом.
Chakra UI также содержит набор компонентов макета, таких как CBox и CStack, которые упрощают стилизацию ваших компонентов. Кроме того, вы сможете автоматически импортировать компоненты Chakra UI с помощью плагина Webpack.
Это опенсорсная библиотека. У нее больше 900 звезд на GitHub, а с npm ее загружают 331 раз в неделю.
4. BootstrapVue
При помощи BootstrapVue вы сможете создавать адаптивные веб-проекты, которые будут исповедовать подход mobile-first и отличаться доступностью (ARIA). Документация библиотеки проста для понимания, а саму библиотеку легко настраивать. Все это вместе будет способствовать более быстрому созданию фронтенда ваших приложений.
BootstrapVue предлагает больше 85 компонентов, свыше 45 доступных плагинов и больше 1000 значков. Она также предоставляет функциональные компоненты, адаптированные для макетов и отзывчивого дизайна.
Вы можете легко интегрировать BootstrapVue в свои Nuxt.js-проекты с помощью модуля Nuxt.js.
Эта библиотека используется так же, как CSS-фреймворк Bootstrap. Она имеет открытый код, около 12,9 тысячи звезд и 1,7 тысячи форков на GitHub.
5. Vuesax
Vuesax — новый фреймворк UI-компонентов, созданный Vuejs для упрощения работы над проектами и придания им уникального и приятного стиля. Он был создан с нуля и спроектирован так, чтобы подходить самым разным разработчикам, как любителям фронтенда, так и бэкендерам, желающим без особых проблем создать интерфейс приложения для конечного пользователя.
Все компоненты имеют уникальный дизайн, не привязанный к какому-либо визуальному тренду или набору правил. Благодаря этому и проекты, в которых будут использованы эти компоненты, сохранят свою уникальность.
Фреймворк предлагает адаптивные страницы и настраиваемые UI-компоненты, пригодные для многократного использования. Начать пользоваться Vuesax легко (используйте npm или CDN). Последняя версия фреймворка (на момент написания этой статьи) не поддерживает Vue CLI 3.
Vuesax используется не так широко, как другие библиотеки UI-компонентов для Vue. Но то, что он не привязан ни к какому языку дизайна, позволит вашему Vue-приложению, построенному с использованием этого фреймворка, выделиться на общем фоне.
Фреймворк имеет открытый исходный код. На GitHub он набрал около 4,9 тысячи звезд, а с npm его загружают 6700 раз в неделю.
6. Ant Design Vue
Библиотека Ant Design Vue основана на спецификации Ant Design. Она содержит набор высококачественных компонентов и демо для создания полнофункциональных, интерактивных пользовательских интерфейсов.
В вышедшей недавно второй версии библиотека обновилась: она стала более быстрой и легкой для интеграции, уменьшился размер пакета, появилась поддержка Vue 3.
Ant Design Vue поддерживает современные браузеры, рендеринг на стороне сервера и Electron.
Проект набрал больше 13 тысяч звезд на GitHub, а c npm его загружают 39693 раза в неделю.
7. Quasar
Quasar — один из самых лучших UI-фреймворков Vue. Он позволяет разработчикам использовать одну базу исходного кода для всех платформ при помощи Quasar CLI, со всеми best practices прямо из коробки. Благодаря ему разработчики могут сосредоточиться на содержимом своих приложений и не отвлекаться на бойлерплейтные вещи. Фреймворк следует руководствам Material 2.0, а его сообщество всегда готово оказать поддержку.
Quasar создан с учетом производительности и адаптивности. Он предлагает большое количество UI-компонентов, макетов, сеток и значков. Здесь вы найдете готовый компонент практически для чего угодно в веб-разработке. Каждый из компонентов тщательно изготовлен вручную, чтобы обеспечить наилучший опыт вашим пользователям.
Одна из особенностей Quasar — возможность написать код один раз, а затем моментально деплоить его и как веб-сайт, и как мобильное приложение (т. е., используя одну кодовую базу).
Недавно вы шла новая бета-версия — с поддержкой функционала Vue 3.
Этот проект набрал около 17,8 тысячи звезд на GitHub.
8. Buefy
Buefy — легковесная библиотека UI-компонентов для Vue, созданная на базе Bulma (CSS-фреймворк). Она комбинирует Bulma с Vue, помогая создавать прекрасно выглядящие приложения с минимальным количеством кода. Это JavaScript-слой для вашего Bulma-интерфейса.
Библиотеку можно импортировать полностью, а можно ограничиться несколькими компонентами на отдельно взятой странице. Интеграция библиотеки в проект довольно простая, может быть выполнена через npm или CDN.
Библиотека Buefy предоставляет готовые UI-компоненты, макет и значки. Компоненты могут использовать SASS для вашей темы. Эта библиотека поддерживает современные браузеры.
Проект набрал 8,5 тысяч звезд на GitHub, а с npm его загружают 50709 раз в неделю.
9. Vue Material
Vue Material — популярный легковесный фреймворк, реализующий спецификации Material Design. Это одна из лучших интеграций Vue.js и Material Design! Вы можете легко настроить его под свои нужды при помощи простого API.
Фреймворк совместим с адаптивным дизайном и поддерживает все современные браузеры. Он разделен на Темы, Компоненты и UI-элементы. Темы дают полное руководство по «темизации» вашего приложения (или написанию ваших собственных тем), а Компоненты и UI-элементы состоят из макетов, навигации, типографики, значков и более чем 30 компонентов.
Фреймворк имеет около 9,2 тысячи звезд и 1,1 тысячи форков на GitHub. Загружают его еженедельно больше 21 тысячи раз (на npm).
10. KeenUI
KeenUI — легковесная UI-библиотека для Vue.js, вдохновленная Material Design, с простым API.
В этой библиотеке вы найдете около 30 компонентов. Они настраиваются путем перекрытия стилей при помощи переменных SASS. Библиотеку можно интегрировать в свой проект при помощи npm или CDN.
Проект имеет открытый исходный код. На GitHub он получил около 4 тысяч звезд.
Заключение
Библиотеки UI-компонентов существенно облегчают создание проектов. Поэтому, прежде чем погрузиться в новый проект, рекомендуется ознакомиться с доступными библиотеками. А чтобы подобрать подходящую, ориентируйтесь на особенности своего проекта.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
ElementUI