Getting Started

VeloxUI — это высокопроизводительная библиотека компонентов Vue 3 с более чем 60 готовыми к продакшену компонентами, встроенной системой тем, полной поддержкой tree-shaking и TypeScript из коробки.

Requirements

• Vue ^3.4
• Node.js >=18
• Сборщик, поддерживающий ES-модули (Vite, Nuxt 3, Webpack 5+, Rspack и т. д.)

Installation

Установите пакет с помощью любимого менеджера пакетов:

npm

npm install veloxui

pnpm

pnpm add veloxui

yarn

yarn add veloxui

bun

bun add veloxui

Full Import

Самый быстрый способ начать — зарегистрировать все компоненты и директивы глобально:

import { createApp } from 'vue'
import VeloxUI from 'veloxui'
import 'veloxui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(VeloxUI)
app.mount('#app')

Это удобно для прототипирования, но включает в сборку всю библиотеку. Для продакшен-приложений предпочтительнее использовать tree-shaking.

Tree-Shaking (Recommended)

Импортируйте только то, что действительно используете — стили компонентов поставляются вместе с каждым компонентом и подключаются автоматически:

import { VxButton, VxInput, VxSelect } from 'veloxui'

Без дополнительных плагинов, без трансформаций babel, без настроек — современные сборщики (Vite, Rollup, Webpack 5) сами исключат неиспользуемые компоненты из финальной сборки.

Basic Usage

<script setup>
import { ref } from 'vue'
import { VxButton, VxInput } from 'veloxui'

const name = ref('')
</script>

<template>
  <VxInput v-model="name" placeholder="Your name" />
  <VxButton type="primary" @click="$emit('save')">Save</VxButton>
</template>

Каждый компонент имеет префикс Vx, чтобы избежать конфликтов имён с вашими собственными компонентами.

Global Configuration

Оберните ваше приложение в VxConfigProvider, чтобы задать локаль, размеры по умолчанию и общие настройки:

<script setup>
import { VxConfigProvider } from 'veloxui'
import en from 'veloxui/locale/en'
</script>

<template>
  <VxConfigProvider :locale="en" size="medium">
    <RouterView />
  </VxConfigProvider>
</template>

Полный список поддерживаемых параметров и локалей смотрите на странице Config Provider.

TypeScript

VeloxUI написан на TypeScript и поставляется с полным набором определений типов. Отдельный пакет @types/* не требуется — вы автоматически получаете типы для props, emits, slots и методов в вашей IDE.

import type { VxButtonProps, VxTableColumn } from 'veloxui'

Nuxt 3

Работает из коробки — добавьте в nuxt.config.ts:

export default defineNuxtConfig({
  modules: [],
  css: ['veloxui/dist/style.css'],
  build: {
    transpile: ['veloxui'],
  },
})

Затем используйте автоимпорт компонентов или зарегистрируйте их в плагине.

SSR

Все компоненты безопасны для SSR. Компоненты, зависящие от window / document (Modal, Tooltip, Dropdown и другие), гидратируются на клиенте и не обращаются к DOM-API на сервере.

Theming

VeloxUI полностью настраивается через CSS-переменные — без шага сборки, без препроцессоров, без JS-API. Переопределите любую переменную в родительском селекторе, чтобы изменить тему всего, что находится ниже.

:root {
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --primary-hover: #1d4ed8;

  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --secondary-hover: #e2e8f0;

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --destructive-hover: #b91c1c;

  --background: #ffffff;
  --foreground: #09090b;

  --accent: #f4f4f5;
  --accent-foreground: #18181b;

  --muted: #f4f4f5;
  --muted-foreground: #71717a;

  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #a1a1aa;

  --radius: 0.625rem;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

Dark Mode

Включите тёмный режим, добавив класс .dark на элемент <html> (или любой предок) и переопределив нужные переменные:

.dark {
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --primary-hover: #e4e4e7;

  --background: #09090b;
  --foreground: #fafafa;

  --border: rgba(255 255 255 / 0.1);
}

Полностью интерактивный редактор тем с пресетами и живым предпросмотром доступен на странице Theming.

All Variables

Variable	Description
--primary	Фон основной кнопки
--primary-foreground	Текст основной кнопки
--primary-hover	Основная кнопка при наведении
--secondary	Фон вторичной кнопки
--secondary-foreground	Текст вторичной кнопки
--secondary-hover	Вторичная кнопка при наведении
--destructive	Фон деструктивной кнопки
--destructive-foreground	Текст деструктивной кнопки
--destructive-hover	Деструктивная кнопка при наведении
--background	Фон страницы
--foreground	Цвет текста по умолчанию
--accent	Фон при наведении для ghost/outline
--accent-foreground	Текст при наведении для ghost/outline
--muted	Приглушённый фон
--muted-foreground	Приглушённый текст
--border	Цвет границ
--input	Цвет границ полей ввода
--ring	Цвет кольца фокуса
--radius	Базовый радиус границ
--shadow-xs	Очень маленькая тень
--shadow-sm	Маленькая тень

Component Prefix

Все компоненты используют префикс Vx, чтобы избежать конфликтов имён:

Component	Name
Button	VxButton
ButtonGroup	VxButtonGroup
Input	VxInput
Badge	VxBadge
Switch	VxSwitch
Modal	VxModal

Browser Support

VeloxUI ориентирован на современные evergreen-браузеры с поддержкой ES2020:

• Chrome / Edge ≥ 90
• Firefox ≥ 90
• Safari ≥ 14

Устаревшие браузеры (включая IE) не поддерживаются.

What's Next?

• Изучите полный каталог компонентов — более 60 компонентов с живыми примерами.
• Откройте страницу Theming, чтобы создать собственные дизайн-токены.
• Посмотрите сложные составные демо: Chat, Finder, Dynamic Form и Form Playground.