Getting Started

VeloxUI — bu yuqori unumli Vue 3 komponentlar kutubxonasi bo‘lib, 60 dan ortiq ishlab chiqarishga tayyor komponentlar, o‘rnatilgan mavzular tizimi, to‘liq tree-shaking va qutichadan chiqishi bilanoq TypeScript qo‘llab-quvvatini taklif qiladi.

Requirements

• Vue ^3.4
• Node.js >=18
• ES modullarni qo‘llab-quvvatlovchi build vositasi (Vite, Nuxt 3, Webpack 5+, Rspack va h.k.)

Installation

Paketni o‘zingizga yoqadigan paket menejeri orqali o‘rnating:

npm

npm install veloxui

pnpm

pnpm add veloxui

yarn

yarn add veloxui

bun

bun add veloxui

Full Import

Boshlashning eng tez usuli — barcha komponent va direktivlarni global tarzda ro‘yxatdan o‘tkazish:

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')

Bu prototiplash uchun qulay, lekin butun bundleni yetkazib beradi. Production ilovalari uchun tree-shaking ma’qulroq.

Tree-Shaking (Recommended)

Faqat haqiqatda kerakli narsani import qiling — har bir komponentning uslublari o‘zi bilan birga paketlangan va avtomatik tarzda tortib olinadi:

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

Qo‘shimcha plugin, babel transformi yoki konfiguratsiya shart emas — zamonaviy bundlerlar (Vite, Rollup, Webpack 5) ishlatilmagan komponentlarni yakuniy build’dan o‘zi olib tashlaydi.

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>

Har bir komponent sizning o‘z komponentlaringiz bilan nom to‘qnashuvini oldini olish uchun Vx prefiksi bilan nomlangan.

Global Configuration

Lokal, standart o‘lchamlar va umumiy sozlamalarni belgilash uchun ilovangizni VxConfigProvider bilan o‘rab oling:

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

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

Qo‘llab-quvvatlanadigan barcha sozlamalar va lokallarni ko‘rish uchun Config Provider sahifasiga qarang.

TypeScript

VeloxUI TypeScriptda yozilgan va to‘liq tip deklaratsiyalari bilan birga keladi. Hech qanday qo‘shimcha @types/* paket kerak emas — prop, emit, slot va metod tiplari IDE’da avtomatik tarzda paydo bo‘ladi.

import type { VxButtonProps, VxTableColumn } from 'veloxui'

Nuxt 3

Darhol ishlaydi — uni nuxt.config.ts’ga qo‘shing:

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

So‘ngra komponentlarni auto-import qiling yoki ularni plugin’da ro‘yxatdan o‘tkazing.

SSR

Barcha komponentlar SSR bilan mos. window / document’ga bog‘liq komponentlar (Modal, Tooltip, Dropdown va h.k.) mijozda hydrate qilinadi va serverga DOM API’larini sizdirmaydi.

Theming

VeloxUI CSS o‘zgaruvchilari orqali to‘liq mavzulashtiriladi — build bosqichi, preprocessor yoki JS API shart emas. Ota selektorda istalgan o‘zgaruvchini o‘zgartirsangiz, uning ostidagi hamma narsa qayta mavzulashadi.

: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

Qorong‘i rejimni <html> (yoki istalgan ajdod)’ga .dark klassini qo‘shib va o‘zgartirmoqchi bo‘lgan o‘zgaruvchilarni qayta e’lon qilish orqali yoqing:

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

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

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

Presetlar va jonli ko‘rinish bilan to‘liq interaktiv mavzu maydonchasi uchun Theming sahifasiga tashrif buyuring.

All Variables

Variable	Description
--primary	Asosiy tugma foni
--primary-foreground	Asosiy tugma matni
--primary-hover	Asosiy tugma hover holati
--secondary	Ikkinchi darajali tugma foni
--secondary-foreground	Ikkinchi darajali tugma matni
--secondary-hover	Ikkinchi darajali tugma hover holati
--destructive	Xavfli amal tugmasi foni
--destructive-foreground	Xavfli amal tugmasi matni
--destructive-hover	Xavfli amal tugmasi hover holati
--background	Sahifa foni
--foreground	Standart matn rangi
--accent	Ghost/outline uchun hover foni
--accent-foreground	Ghost/outline uchun hover matni
--muted	So‘nik fon
--muted-foreground	So‘nik matn
--border	Chegara rangi
--input	Input chegara rangi
--ring	Fokus halqasi rangi
--radius	Bazaviy burchak radiusi
--shadow-xs	Juda kichik soya
--shadow-sm	Kichik soya

Component Prefix

Barcha komponentlar nomlarning to‘qnashuvini oldini olish uchun Vx prefiksidan foydalanadi:

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

Browser Support

VeloxUI ES2020 qo‘llab-quvvatini taqdim etuvchi zamonaviy evergreen brauzerlarni ko‘zda tutadi:

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

Eski brauzerlar (shu jumladan IE) qo‘llab-quvvatlanmaydi.

What's Next?

• To‘liq komponentlar katalogini ko‘rib chiqing — 60 dan ortiq komponent jonli misollar bilan.
• O‘z dizayn tokenlaringizni yaratish uchun Theming sahifasini o‘rganing.
• Chat, Finder, Dynamic Form va Form Playground kabi murakkab kompozit demolarni tekshirib ko‘ring.