Большое сравнение библиотек UI-компонентов для Vue 3
22.09.2021
- Alexey Nurgaliev
Большое сравнение библиотек UI-компонентов для Vue 3
Популярная библиотека для связки Bootstrap и Vue https://bootstrap-vue.org/ сейчас поддерживает версии Bootstrap 4 + Vue 2 и планов поддержки Vue 3 пока нет.
Библиотека для связки Bootstrap 5 и Vue 3 сейчас находится на ранней стадии развития: https://github.com/bootstrap-vue-next/bootstrap-vue-next
Тем временем специально для Vue 3 создаются собственные библиотеки компонентов (и даже целые UI-фреймворки) и можно попробовать среди них найти замену Bootstrap.
В интернете можно найти достаточно перечислений и обзоров UI-библиотек, этот обзор будет рассматривать проекты с точки зрения возможности замены Bootstrap.
Библиотеки будут рассматриваться по критериям (очень субъективным):
- Есть типографика (разметка для заголовков и текстовых блоков). Если во фреймворке нет своей типографики, то можно рассмотреть его использование вместе с библиотекой Milligram (но нужно, чтобы они не конфликтовали друг с другом).
- Есть сетка (колонки в простом случае или более комплексное управление расположением элементов на странице).
- Есть стандартные компоненты для форм (поля для текста и чисел, флажки и переключатели).
- Есть компоненты для ввода даты и времени. Их нет в стандартном Bootstrap, но наличие таких встроенных компонентов очень важно - так или иначе, вводить дату придется, лучше чтобы календарь встраивался и был в одном стиле с остальными компонентами.
- Есть аналоги для распространенных компонентов из Bootstrap (модальные окна, вкладки, заголовок и т.п.)
- Есть что-то, чего нет в Bootstrap - чем больше интересных и полезных компонентов, тем лучше, вещи вроде DataTable очень приветствуются.
- Локализация (особенно если есть компоненты для выбора дат). Встроенная поддержка русского языка - хорошо, но если есть просто руководство, как ее сделать, то тоже неплохо.
- Общее впечатление от внешнего вида - крайне субъективное, Material Design немного надоел (и далеко не все могут сделать его правильно, по изначальной спецификации Google), поэтому будет считаться скорее как минус.
- Переопределение стилей - насколько легко можно изменить стандартный стиль и в каких пределах возможно изменение. Хорошо, если можно переопределить SCSS-переменные, а если есть собственный редактор тем, то это еще лучше.
- Активность разработки (коммиты, новые версии, работа с issues).
Проекты, которые могут полностью заменить Bootstrap
У этих проектов есть все необходимое, чтобы полноценно заменить Bootstrap.
Naïve UI
Официальный сайт: https://www.naiveui.com/
Исходный код: https://github.com/TuSimple/naive-ui
Лицензия: MIT
- Да: https://www.naiveui.com/en-US/os-theme/components/typography
- Да:
- Да: https://www.naiveui.com/en-US/os-theme/components/form
- Да: https://www.naiveui.com/en-US/os-theme/components/date-picker
- Да, есть практически всё (но не хватает гибко настраиваемого заголовка страницы, тот, что есть, не совсем то), например модальные окна: https://www.naiveui.com/en-US/os-theme/components/modal
- Да, например:
- 50/50, стандартно есть локализация только для английского и китайского языков, но несложно сделать самостоятельно, например для русского языка: https://github.com/n-at/naive-ui-locale-ru
- Да, стандартная тема достаточно нейтральна, стиль по умолчанию сделан неплохо
- Да, поддерживаются темы (есть специальный компонент-конструктор тем), переменные можно переопределять через настройки https://www.naiveui.com/en-US/os-theme/docs/customize-theme
- Да, проект развивается остаточно активно, открытых issues довольно немного. По собственному опыту обращения к разработчикам, найденная ошибка была исправлена в течение пары часов.
Итог: хороший фреймворк, подходит как замена Bootstrap. Наверное единственный минус - нет аналогичного Bootstrap заголовка страницы, но его можно собрать из имеющихся компонентов.
Ant Design Vue
Официальный сайт: https://2x.antdv.com/docs/vue/introduce
Исходный код: https://github.com/vueComponent/ant-design-vue/
Лицензия: MIT
- Да: https://2x.antdv.com/components/typography
- Да:
- Да: https://2x.antdv.com/components/form
- Да: https://2x.antdv.com/components/date-picker
- Да, есть многое, например модальное окно: https://2x.antdv.com/components/modal
- Да, например:
- Да, русский язык стандартно поддерживается: https://2x.antdv.com/docs/vue/i18n
- Да, здесь своя дизайн-система (Ant Design, разработана в Ant Financial, используется в Alibaba), выглядит неплохо
- 50/50, можно настроить цвета: https://2x.antdv.com/docs/vue/customize-theme и некоторые мелочи, но кажется, отойти от дизайн-системы по внешнему виду компонентов не получится
- Да, проект развивается достаточно активно
Итог: хороший фреймворк, может подойти на замену Bootstrap.
Vuetify
Официальный сайт: https://vuetifyjs.com
Исходный код: https://github.com/vuetifyjs/vuetify
Лицензия: MIT
- Да: https://vuetifyjs.com/en/styles/text-and-typography/
- Да: https://vuetifyjs.com/en/components/grids/
- Да: https://vuetifyjs.com/en/components/forms/
- Да: https://vuetifyjs.com/en/components/date-pickers/
- Да, есть практически всё, например модальные окна: https://vuetifyjs.com/en/components/dialogs/
- Да, например:
- Да, строки и календари локализованы https://vuetifyjs.com/en/features/internationalization/
- 50/50, с одной стороны это надоевший Material Design (см. описание критериев), но сделан очень хорошо
- Да, есть стандартное переопределение тем и цветов https://vuetifyjs.com/en/features/theme/ или можно переопределить SCSS-переменные https://vuetifyjs.com/en/features/sass-variables/
- Да, проект развивается достаточно активно. Но количество открытых issues довольно большое (>1000)
Итог: хороший фреймворк, если нет возражений против Material Design. Как замена Bootstrap вполне подходит.
Quasar
Официальный сайт: https://quasar.dev/
Исходный код: https://github.com/quasarframework/quasar
Лицензия: MIT
- Да: https://quasar.dev/style/typography
- Да:
- Да: https://quasar.dev/vue-components/form
- Да: https://quasar.dev/vue-components/date
- Да, есть практически всё, например модальные окна: https://quasar.dev/vue-components/dialog
вместо заголовка есть аналог: https://quasar.dev/vue-components/toolbar
- Да, например:
- Да, есть стандартная поддержка русского языка
- 50/50, это Material Design, но сделан неплохо
- Да, есть редактор тем: https://quasar.dev/style/theme-builder и руководство по стандартным цветам: https://quasar.dev/style/color-palette
- Да, проект развивается активно
Итог: хороший набор компонентов, но это Material Design. Может быть заменой Bootstrap.
Почти полноценная замена
Обычно не хватает типографики или компонента для выбора даты. Можно попробовать использовать совместно с Milligram.
PrimeVue
Официальный сайт: https://www.primefaces.org/primevue/
Исходный код: https://github.com/primefaces/primevue
Лицензия: MIT
- Нет
- Да, сетка: https://www.primefaces.org/primevue/showcase/#/grid
- Да, например поле ввода текста: https://www.primefaces.org/primevue/showcase/#/inputtext
- Да: https://www.primefaces.org/primevue/showcase/#/calendar
- Да, есть практически все, например:
- Да, например:
- 50/50, стандартной поддержки русского языка нет, но есть документация по локализации: https://www.primefaces.org/primevue/showcase/#/locale
- Да, стандартные темы выглядят неплохо
- Да, поддерживаются темы, есть собственный редактор тем: https://www.primefaces.org/designer-vue/#/
- Да, проект развивается активно
Итог: хороший набор компонентов, но для полноценной замены Bootstrap не хватает типографики (можно попробовать использовать совместно с Milligram).
Element+ (beta)
Официальный сайт: https://element-plus.org
Исходный код: https://github.com/element-plus/element-plus
Лицензия: MIT
- Нет
- Да:
- Да: https://element-plus.org/#/en-US/component/form
- Да: https://element-plus.org/#/en-US/component/date-picker
- Да, есть практически всё, например модальные окна: https://element-plus.org/#/en-US/component/dialog
- Да, например:
- Да, есть стандартная локализация для русского языка
- Да, стандартная тема достаточно нейтральна
- Да, можно настроить SCSS-переменные: https://element-plus.org/#/en-US/component/custom-theme
- Да, проект развивается достаточно активно
Итог: неплохой набор компонентов, но отсутствие типографики не позволяет сделать его полноценной заменой Bootstrap (но можно собрать или найти простую CSS-библиотеку для типографики самостоятельно).
Vuestic
Официальный сайт: https://vuestic.dev/
Исходный код: https://github.com/epicmaxco/vuestic-ui
Лицензия: MIT
- Да: https://vuestic.dev/ru/styles/typography
- Да: https://vuestic.dev/ru/styles/grid
- Да: https://vuestic.dev/ru/ui-elements/form
- Да: https://vuestic.dev/ru/ui-elements/date-picker
- Да, многое есть, например:
- Нет, особо интересного нет, Data Table пока в разработке
- Нет, у календаря можно настроить названия месяцев и дней недели
- Да, свой дизайн, не похож на остальные проекты
- Да, можно настроить цвета: https://vuestic.dev/ru/getting-started/configuration-guide#color-themes и некоторые настройки компонентов https://vuestic.dev/ru/getting-started/configuration-guide#components-config
- Да, проект развивается
Итог: неплохой фреймворк, но есть только базовые компоненты, не хватает что-то вроде Data Table
Inkline (beta)
Официальный сайт: https://inkline.io/
Исходный код: https://github.com/inkline/inkline
Лицензия: MIT
- Да: https://inkline.io/docs/core/typography
- Да:
- Да: https://inkline.io/docs/forms/form
- Нет
- Да, есть многое, например:
- Да, например Data Table: https://inkline.io/docs/components/datatable/introduction
- 50/50, календаря нет, а для локализации строк в Data Table есть руководство: https://inkline.io/docs/components/datatable/api
- Да, свой дизайн, напоминающий Bootstrap 4
- 50/50, легкого изменения тем нет6 но можно настроить SCSS-переменные: https://inkline.io/docs/core/sass-variables
- 50/50, какая-то активность есть, но не особо большая
Итог: неплохой фреймворк, с какой-то степени может заменить Bootstrap (и по дизайну похож), но не хватает календаря.
Проекты, которым чего-то сильно не хватило
Wave UI
Официальный сайт: https://antoniandre.github.io/wave-ui/
Исходный код: https://github.com/antoniandre/wave-ui
Лицензия: MIT
- Да: https://antoniandre.github.io/wave-ui/typography
- Да: https://antoniandre.github.io/wave-ui/layout–grid-system
- Да: https://antoniandre.github.io/wave-ui/w-input
- Нет, предполагается использовать системный календарь
- 50/50, есть многое, но не хватает мелочей, вроде Button Group. Но есть модальные окна: https://antoniandre.github.io/wave-ui/w-dialog
- Нет, набор компонентов очень базовый
- Нет, но она и не требуется - компонента выбора дат или Data Table здесь нет
- 50/50, довольно минималистичный и, кажется, свой собственный дизайн
- Да, можно настроить цвета: https://antoniandre.github.io/wave-ui/colors можно переопределить SCSS-переменные: https://antoniandre.github.io/wave-ui/customization
- Да, активность в репозитории есть
Итог: минималистичный фреймворк, с очень базовым набором компонентов. Почему-то создает впечатление чего-то из 2010 года (из времен jQuery UI). Наверное как замена Bootstrap не подойдет.
Equal
Официальный сайт: https://quatrochan.github.io/Equal/
Исходный код: https://github.com/quatrochan/Equal
Лицензия: MIT
- Нет
- Нет
- Да, например ввод текста: https://quatrochan.github.io/Equal/components/input
- Нет
- Нет, набор компонентов довольно небольшой, много чего не хватает, но, например, есть модальное окно: https://quatrochan.github.io/Equal/components/modal
- Нет, особых интересных компонентов здесь нет, наверное можно отметить уведомления: https://quatrochan.github.io/Equal/components/notification
- Нет, но локализация и не требуется - строк или календаря нет
- Да, стандартная тема оформления сделана аккуратно и производит хорошее впечатление
- Нет, официального руководства по изменению стандартного стиля нет, вероятно, изменение возможно только через модификацию исходного кода
- 50/50, невысокая активность
Итог: минималистичный набор компонентов с интересным дизайном. Как замена Bootstrap не подойдет.
BalmUI
Официальный сайт: https://next-material.balmjs.com/
Исходный код: https://github.com/balmjs/balm-ui
Лицензия: MIT
- Да: https://next-material.balmjs.com/#/theme/typography
- Да, сетка: https://next-material.balmjs.com/#/layout/grid
- Да: https://next-material.balmjs.com/#/data-input/textfield
- Да, на основе flatpikr: https://next-material.balmjs.com/#/data-input/datepicker
- 50/50, не хватает заголовка (или его аналогов)
- Да, например:
- Нет, у flatpikr есть своя поддержка локализации, строки перевести нельзя (руководства на эту тему нет)
- Нет, это Material Design, но производит не особо хорошее впечатление (в отличие от Vuetify или Quasar)
- Нет, можно настроить цвета https://next-material.balmjs.com/#/theme/color но кажется, на этом всё
- 50/50, какая-то активность есть, но мало
Итог: довольно простой набор компонентов. Material Design. Отсутствие локализации. По общему впечатлению, не подходит на замену Bootstrap.
