Иногда при создании своих UI компонент не обязательно использовать громоздкие Vue библиотеки, достаточно стилизации CSS фреймворка.

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

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

#css #lib #ui

Уже писали год назад об этом каталоге UI библиотек

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

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

#ui #lib

Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

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

#ui #lib

Написал vite-plugin-json-md

Заменяет в JSON/JSON5 файлах markdown на сконвертированный HTML

Удобен при i18n (интернационализации), когда текст перевода лежит в json файлах, но иногда бывает на странице сложное форматирование и разбивать по ключам очень хаотично. Можно записать тогда через markdown.

Обрабатывает как инлайн вставки markdown, так и ссылки на внешние md файлы

#lib #i18n #markdown

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай i18n

vite-plugin-i18n-json-md - берет JSON* файлы из директории локали, конвертирует markdown, если он там есть, объединяет всё в один и выводит в стандартный для i18n json, либо же в json5 или js формате. По желанию - минификация.

В конфиге указывается входная директория, выходная и локали.

import { i18nJsonMdPlugin } from "vite-plugin-i18n-json-md";

export default defineConfig({

  plugins: [
    vue(),
    i18nJsonMdPlugin({
      sourceDir: "src/app/locales",
      outputDir: "src/assets/i18n",
      locales: ["en", "ru", "gr"],
      mode: "dev",
      outputFormat: "json",
    }),
  ],

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

#vite #i18n #lib

Популярность по загрузкам некоторых UI библиотек

#lib #ui #stats

В мой vite-plugin-html-injection сделали первый PR

Приятно, чёрт возьми.

Теперь во фрагментах можно использовать Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.

#vite #plugin #lib

Написал VitePress плагин для генерации диаграмм (Mermaid, PlantUML и других)

#vitepress #lib

Интересный JSON Viewer попался

Удобно смотреть, для дебага в админке и вообще

#json #lib

Подписчик поделился самописным расширением для VS Code — помогает быстро и безболезненно менеджерить локализацию в vue-i18n. Добавлять ключи, переводить на все языки (через AI), быстро обновлять существующие фразы... Короче, просто зацените демку.

Сейчас на стадии сбора фидбека и различных юз-кейсов. Кому интересно потыкать раннюю версию (бесплатно ofc), тут можно заполнить небольшую форму: https://tally.so/r/mDMv5b

Просит потестировать и покритиковать в комментариях

Лично я использую всегда самописную реализацию i18n, но расширение выглядит очень круто и использует AI именно так, как его надо использовать - незаметно, под капотом, значительно расширяя функционал приложения и сильно улучшая UX/DX. Мне такого не хватает, потому что приходится вручную ходить по json файлам и добавлять новый ключ, пусть даже и автокомплит это быстро делает за тебя.

#vscode #extension #i18n #lib

Большой обзор rich text editors для встраивания в свой фронт

#editor #lib

Хорошая библиотека Ark-ui, но с особенностями. Особенно у "выпадашки" HoverCard (для меню которая)

Долго мучился с расположением при динамично меняющемся таргет элементе - все как-то через одно место криво работало. Решил поставить :key на HoverCard и инкрементить его при апдейтах - и всё сразу заработало как надо. Ну, ё-моё...

Немного радует, что довольно часто обновляется и фиксят баги.

P.S. Ререндеринг через `:key` - плохая практика. Последний вариант.

#lib #arkui