Vue-FAQ
@vuefaq
924 subscribers
562 photos
90 videos
557 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
About
Blog
Apps
Platform
Join
Vue-FAQ
924 subscribers
Vue-FAQ
Большой набор UI компонентов в HTML/CSS формате для вдохновения

uiverse.io

#lib #ui
uiverse.io
Uiverse | The Largest Library of Open-Source UI elements
Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing UI components for your next project.
993 views
Vue-FAQ
Еще одна малоизвестная UI библиотека от китайцев - Vexip UI

Для Vue 3, с мягкой приятной графикой и интересным наборов компонентов. Есть, например, Wheel и Tour

Features

📦 Out-of-box high quality 78 Vue 3 components
📐 Intuitive, minimalistic Api design
🔧 Configurable default value of props, quickly complete global/local modifications
⚡️ Composition Api, good performance base
🔨 With TypeScript, fully types
💪 1100+ unit tests to provide good stability
🎨 Support CSS variable, built-in dark theme
🚩 Support i18n
🛫 Provide resolver, support unplugin
🚤 Support SSR
🩹 Good a11n
👀 Close to business code arrangement, low threshold for source code reading

The design tokens are base on Open Color, and have some adjustments.

————

А какие еще чисто Vue 3 UI библиотеки существуют?
Чтобы не переписка с какого-нибудь Реакта или Vue 2.
Это ведь имеет огромное значение и для размера бандла, и для производительности, и для DX.

#lib #ui
Vexip UI
Vexip UI - Make interesting in development
A Vue 3 UI library, highly customizability, full TypeScript, performance pretty good.
732 views
Vue-FAQ
Adaptability vs. Responsiveness

Разница между адаптивностью (слева) и отзывчивостью (справа)

#css #ui
811 views
Vue-FAQ
Если кто хочет помочь закончить портировать реактовские Radix UI Primitives на Vue 3 - вам сюда. Большая часть компонентов уже сделана.

Чем плох известный порт Radix-Vue автор проекта рассказал здесь

#ui #lib
GitHub
GitHub - perigee-ui/vue-primitives: Vue Radix UI Primitives 1:1 . Components, icons, colors, and templates for building high-quality…
Vue Radix UI Primitives 1:1 . Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. - perigee-ui/vue-primitives
810 views
Vue-FAQ
Нашлась еще одна Vue 3 - нативная UI библиотека от китайцев - Varlet

Легковесная, material design 2/3, 5К звезд, много фич

Кто-то пробовал?

#ui #lib
varletjs.org
Varlet UI - Vue3 Material Design Component Library
Varlet UI is a Material design component library developed based on Vue3, supporting mobile and desktop, developed and maintained by varletjs organization. Support Typescript, import on demand, dark mode, theme customization, internationalization, and provide…
909 views
Vue-FAQ
Иногда при создании своих UI компонент не обязательно использовать громоздкие Vue библиотеки, достаточно стилизации CSS фреймворка.

Например, минималистичный BeerCSS

CSS фреймворки подходят как минимум для прототипирования и вдохновения. Также их можно использовать с unstyled компонентами, типа Radix Vue

#css #lib #ui
Beercss
Beer CSS - Build material design interfaces in record time, without stress for devs 🍺💛.
The first CSS framework based on Material Design 3. Latest M3 Expressive already. 10x smaller than others CSS frameworks based on Material Design. Translates Material Design to HTML semantic standard. Ready to use with any JS framework. Highly focused on…
902 views
Vue-FAQ
Мы уже писали об Ark UI библиотеке

На днях видный член vuejs core team и VitePress maintainer
Divyansh Singh назвал их лучшей альтернативой React Aria во Vue экосистеме

Unstyled, хорошая поддержка A11y. Vue версия еще неполная. Документация скудная, не для вкатунов. Нужно думать. Основана библиотека на zag.js, документацию можно смотреть там.

Выглядит очень хорошей альтернативой radix/reka/shadcn|vue, только без встроенных tailwind-ов, vueuse-ов, unjs-ов, tanstack-ов и других скрытых зависимостей и обмана типа "copy-paste и всё".

Попробовал на своем проекте. Сперва заменил FilePond на FileUpload - (-100Kb; +30Kb). Стало значительно красивей и намного кастомизируемей (стили генерил AI). Затем добавил Tabs (+20Кб). Затем - Combobox с тэгами и выпадающим меню, которое во многих UI библиотеках тащит 200-400Кб из-за позиционирования - (+70Кб). В общем, вполне экономично и удобно для создания своего небольшого UI kit с требованиями к A11y.

Ну и правильный DatePicker можно собрать.

#ui #lib #headless #arkui
1.1K views
Vue-FAQ
Уже писали год назад об этом каталоге UI библиотек

https://ui-libs.vercel.app/

С тех пор там немного прибавилось библиотек и функционала

#ui #lib
UI Lib Picker
🎨 Pick the Right UI Library for your Vue 3 or Nuxt 3 Project
1.2K views
Vue-FAQ
Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

В альфа версии, но кода много

#ui #lib
proxima.wiki
UI Component Library for Vue 3 and Nuxt
849 views
Vue-FAQ
Популярность по загрузкам некоторых UI библиотек

#lib #ui #stats
693 views
Vue-FAQ
Получил очень интересный и полезный опыт:

1. Выделив UI часть проекта Lissa Health в отдельный модуль (привет, #fsd)
2. Добавив дизайн систему на CSS свойствах и оформив всё как UI kit
3. Выделив в отдельный репозиторий, который ставится как Git submodule и подключается через npm локально (для быстрых правок)
4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах

На npmjs.org не публиковал, на универсальность, полноту (не собираюсь выпускать ее как общую библиотеку) и актуальность документации не претендую, но можно просто посмотреть как работать с Ark-UI.

Alt-UI

#arkui #altui #ui
GitHub
GitHub - vuesence/alt-ui: Alt-UI Vue library (based on Ark-UI)
Alt-UI Vue library (based on Ark-UI). Contribute to vuesence/alt-ui development by creating an account on GitHub.
953 viewsedited