Клиент Spotify, созданный с помощью vue.js и vuex

Данный пакет из GitHub представляет собой клиент Spotify, построенный с использованием фреймворка Vue.js и библиотеки Vuex. Авторизованные пользователи должны иметь действующую подписку на Spotify Premium, так как без нее Web Playback SDK не будет работать. Возможности пакета включают авторизацию, вход и выход из аккаунта, обновление токена; поиск информации в каталоге Spotify о песнях, альбомах, артистах или плейлистах по ключевому слову; просмотр новых релизов и категорий; управление плейлистами пользователя; подписка и отписка от плейлистов; управление проигрывателем, включая установку громкости, пропуск треков, перемотку, режим повтора и перемешивание. Подробнее о функциях можно узнать на страницах Spotify web API и Web Playback SDK.

Github

Приложение Vue для извлечения данных из API

Apidex - это приложение, которое позволяет пользователям извлекать данные из API, выступая альтернативой таким инструментам, как Postman. Это позволяет пользователям выполнять различные HTTP-запросы, управлять заголовками и отправлять тела запросов. Чтобы запустить Apidex, пользователям необходимо иметь Node.js и Yarn установлены, и они могут получить доступ к живому приложению на Apidex - Live Demo. Приложение предлагает такие функции, как создание различных типов HTTP-запросов, управление заголовками запросов и проверка их, отправка текстов запросов в различных форматах и просмотр ответов в удобном для пользователя формате. Пользователи также могут оставлять отзывы или вносить свой вклад в проект на GitHub.

Github

Преобразуйте данные в представление с помощью базовых диаграмм

BaseCharts - это плагин для Baserow, который позволяет превращать таблицы с данными в наглядные диаграммы с минимальными усилиями. Он помогает преобразовать данные в информацию, которая помогает в понимании и принятии решений. Установка этого плагина требует следования инструкциям по установке Baserow Plugin.

Github

Панель администратора для платформы GetTalim с vue.js

Этот пакет на GitHub представляет собой административную панель для проекта "GetTalim". В нем есть страница категорий с возможностью создания и обновления категорий на трех языках: узбекском, английском и русском. Есть также страницы для просмотра и управления данными студентов, наставников и курсов. Кроме того, пакет позволяет установить необходимые зависимости и скомпилировать код с возможностью горячей перезагрузки на этапе разработки.

Github

Компонент range vue, поддерживающий один или несколько thumb

Vue Range Multi - это компонент Vue для выбора диапазона значений с поддержкой одной или нескольких ползунков. Он автоматически определяет тип модели и отображает соответствующие ползунки. Компонент поддерживает динамическое добавление или удаление ползунков, а также предотвращает появление дубликатов. Он имеет настраиваемый стиль и тему, поддерживает темный режим и позволяет отобразить контент над или под ползунком.

Github

Приложение Cloudflare Domains Manager, созданное с использованием Vue.js

Этот пакет из Github представляет собой приложение Cloudflare Domains Manager, которое позволяет управлять доменами в Cloudflare. Оно построено на фронтенде Vue.js и бэкенде Python Flask. Для установки и настройки данного приложения необходимо установить несколько зависимостей, а также указать настройки окружения. Затем можно запустить разработческий сервер и получить доступ к приложению по локальному адресу. Участие в вызове, подробные инструкции и шаблоны запросов на исправления также предоставляются.

Github

Инструмент для обработки PDF-файлов, созданный с помощью Vue.js

PDF InBrowser.App - это инструмент для работы с PDF-файлами, полностью функционирующий в браузере без отправки данных на сервер. Быстрый, безопасный и работающий в офлайн-режиме. Особенности представленного пакета: все операции выполняются в браузере без риска для конфиденциальности, работа в офлайн-режиме с использованием PWA, совместимость с современными браузерами и устройствами, отсутствие необходимости в серверной части благодаря статическим файлам. Для разработки предоставляются команды npm run dev для запуска сервера разработки и npm run build для сборки в папку dist/.

Github

Стабильный веб-интерфейс генератора диффузионных изображений с использованием сети Crynux

Этот пакет из GitHub представляет собой веб-приложение, которое позволяет пользователям генерировать изображения в браузере с помощью Stable Diffusion. Приложение подключается к Crynux Network для использования удаленных графических процессоров, так что пользователи могут использовать приложение на любых устройствах без наличия собственных ГПУ. Все блокчейн и токен операции обрабатываются на сервере, для конечных пользователей это просто традиционное и удобное веб-приложение.

Github

Автономное решение для размещения ваших плагинов и расширений для игровых серверов cs2

Пакет ResourceMod content registry представляет собой решение для хостинга плагинов и расширений для игровых серверов cs2. В данном пакете предусмотрена возможность хранения контента в репозиториях Git, в частности на GitHub. С помощью веб-интерфейса пользователи могут создавать учетные записи, управлять пользователями, добавлять плагины и расширения, а также управлять интеграцией с Git. Разработчики также могут вносить свой вклад в развитие пакета, создавая задачи, форкая репозиторий и создавая pull-запросы.

Github

Настраиваемый компонент Vue для ввода ползунка диапазона

Этот пакет из GitHub представляет собой настраиваемый Vue-компонент для ползунка ввода диапазона. Он предоставляет возможность использовать статические или динамические шаги, а также дополнительные визуальные правила для лучшего пользовательского опыта. Пакет установить можно при помощи yarn или npm. Далее нужно импортировать компонент в файл Vue и зарегистрировать его. Компонент можно использовать в шаблоне, указывая необходимые значения атрибутов. Компонент также поддерживает различные события и слоты для настройки внешнего вида и стиля.

Github

Приложение IP InBrowser, созданное с помощью Vue.js

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

Github

Групповой интерфейс с меню вкладок для переключения видимости полей внутри группы

Этот пакет из Github представляет собой интерфейс группировки вкладок с возможностью переключения видимости полей внутри группы. Он может использоваться в качестве альтернативного решения для интерфейса перевода. Вы можете использовать этот интерфейс для переключения видимости полей индивидуально, частично или все поля сразу, по вашему усмотрению. Например, вы можете переключать видимость полей title_de и title_en.

В настройках вашего интерфейса вы можете использовать поле JSON для указания, какая кнопка отображает какие поля. Также есть возможность настройки стилей с помощью классов .tab-group, .tab-group .menu и .tab-group .menu .menu-item. Например, вы можете отключить вертикальную линию с помощью следующего CSS кода: .tab-group::before { content: none !important; }

Github

Инструмент Laravel Nova для создания адаптивных таблиц

Laravel Nova ResponsiveTable - инструмент для Nova, который улучшает ваши таблицы Nova, позволяя скрывать и показывать столбцы в зависимости от изменения размера экрана. Это делает таблицы адаптивными и более удобными для пользователя. Он включает в себя такие функции, как адаптивность таблиц, интуитивное переключение видимости столбцов и не требует использования внешних библиотек. Установка производится с использованием Composer, регистрируется в файле NovaServiceProvider, а затем настраивается в ваших ресурсах Nova. Лицензия MIT, поддержка и дополнительные возможности предоставляются через GitHub.

Github

Сгенерируйте и загрузите счет-фактуру с помощью Vue.js

Пакет Invoice Generator (invoice-generator) - это инструмент для создания и загрузки счетов. Он обладает следующими функциями: темная и светлая темы, многоязычность, печать в формате PDF и возможность редактирования деталей счета. Для работы с пакетом необходимо установить зависимости, запустить приложение в режиме разработки и провести линтинг и форматирование файлов. Пакет также предлагает возможность настройки конфигурации.

Github

Сокращайте и увековечивайте ваши ссылки, текст и файлы в сети с помощью zkSync Era

Этот пакет из GitHub представляет собой платформу EraLink, которая позволяет сокращать и хранить анонимно на блокчейне zkSync ссылки, тексты и файлы, делая их доступными навсегда. Он предлагает несколько применений, таких как проверка подлинности документов, сохранение оригинальных идей с отметкой времени и постоянное совместное использование контента. Пакет состоит из двух основных директорий - contracts, где находятся смарт-контракты, и frontend, где разрабатывается пользовательский интерфейс. К сожалению, в данный момент в нем нет тестов, но он вдохновлен другими проектами и использует ресурсы zksync-cli и zkSync Era Tutorials. Весь проект распространяется под лицензией MIT.

Github

#vue

Тут про Vue паттерны написали

https://www.patterns.dev/vue

Знаете ли вы, что в vuejs вы можете деструктурировать с помощью v-for?

Michael Thiessen

Более широко известно, что вы можете извлечь индекс из v-for, используя кортеж, подобный этому:

Michael Thiessen

При использовании объекта вы также можете захватить ключ:

Michael Thiessen

Также возможно объединить эти два метода, захватив ключ, а также индекс свойства:

Michael Thiessen

Nuxt острова

Вы когда-нибудь задумывались о возможности полного отображения вашего компонента на сервере? JS на стороне клиента отсутствует. Компонент предоставляет эту возможность, позволяя вам отображать части вашего приложения на сервере. Подробнее об этом читайте в этом блоге.

Читать полностью