Vuetify – UI библиотека для Vue.js

В настоящее время web приложения уже трудно представить без сложных элементов управления, таких как интерактивные таблицы с данными, диалоговые окна, выпадающие меню и иерархические деревья. Писать весь этот набор компонентов самостоятельно, для того, чтобы  решить бизнес задачи – долго и обременительно. Но к счастью существуют уже готовые решения, которые берут на себя создание такой инфраструктуры. Одно из них – Vuetify.

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

Прежде всего у библиотеки имеется свой набор стилей оформления, который охватывает каждую мелочь, такую как различного назначения заголовки и сообщения (типографика).

Есть готовые классы для создания сетки, наподобие тех, что имеются в Twitter Bootstrap. Каждый компонент адаптирован также для мобильных устройств.

Для построения динамических таблиц с данными есть компонент v-data-table с поддержкой сортировки, пагинации и возможностью встраивать другие компоненты в ячейки таблицы при помощи vue слотов. Не нужно использовать сторонние пакеты типа ratiw/vuetable-2. На мобильных экранах таблица автоматически располагает информацию каждой строки вертикально, т.е. каждая ячейка превращается в отдельную строку. Такой подход становится очень выигрышным в плане UX на маленьких экранах.

Для создания диалоговых окон имеется компонент v-dialog с внушительным набором опций, и конечно слотами и событиями.

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

Чтобы придать своему проекту эстетический вид можно приобрести тему оформления с поддержкой данной библиотеки.

Я уже успел опробовать Vuetify в реальном проекте и впечатления от него самые положительные. А какими библиотеками создания UI пользуетесь вы?