uniplatforms-ui

uniplatforms-ui

Vue 3 yoki Nuxt 4 uchun tayyor proyekt shabloni (TypeScript, TailwindCSS, Pinia, i18n, Axios, dark mode, auth namunasi). NPM orqali o'rnatib, bir buyruq bilan yangi loyiha yaratish mumkin.

CLI ishga tushganda avval frameworkni tanlash so'raladi:

• Vue (standart) — Vue 3 + Vite SPA. Keyingi qadamda UI kutubxonasini tanlash so'raladi:
  • Naive UI — to'liq komponent kutubxonasi (Button, Form, DataTable, Modal va h.k. tayyor holda keladi)
  • shadcn-vue — Tailwind + Reka UI asosida, komponent kodi to'g'ridan-to'g'ri loyihangizga nusxalanadigan yondashuv (o'zingiz to'liq nazorat qilasiz, keyinchalik npx shadcn-vue add bilan istalgan qo'shimcha componentni qo'shishingiz mumkin)
• Nuxt — Nuxt 4 + Nuxt UI + TailwindCSS asosidagi tayyor SSR/SSG loyiha (qo'shimcha UI tanlovi yo'q — Nuxt UI o'zi to'liq komponent kutubxonasi)

Tanlovdan so'ng CLI mos shablonni nusxalaydi va npm installni avtomatik ishga tushiradi — fayllar tayyor bo'lgach, cd qilib to'g'ridan-to'g'ri npm run dev qilishingiz mumkin.

npx uniplatforms-ui my-app
# yoki: uniplatforms-ui my-app (agar npm link qilingan bo'lsa)
cd my-app
npm run dev

(Agar biror sababdan npm install avtomatik ishlamasa, CLI xabar beradi — bunday holda npm installni qo'lda ishga tushiring.)

Vue variantlari (template-naive-ui/, template-shadcn-vue/)

Ikkala shablonda ham umumiy bo'lgan qism

Ikkala UI kutubxona varianti ham (template-naive-ui/ va template-shadcn-vue/) quyidagilarga ega:

• Vue 3 (<script setup>, Composition API) + TypeScript
• Vue Router 4 — router.beforeEach orqali auth guard bilan
• Vue I18n — uz / ru / en tillari tayyor
• TailwindCSS — darkMode: 'class', dark mode tugma orqali almashtiriladi va localStorageda saqlanadi
• Pinia — src/stores/auth.ts: token, user, isAuthenticated, login(), logout()
• Axios — src/api/axios.ts: token interceptor + 401 javobida avtomatik logout va /loginga yo'naltirish
• Login / Profil sahifalari — meta: { requiresAuth: true } bilan himoyalangan sahifa namunasi
• vue3-toastify — src/composables/useToast.ts: success(), error(), warning(), info(), notify(). Joriy dark/light mavzuga avtomatik moslashadi. Plagin main.tsda ro'yxatdan o'tkazilgan (app.use(Vue3Toastify, {...})), namunasi — HomeView.vuedagi "Toast xabarnomalari" kartasi
• lucide-vue-next — icon library
• ESLint + Prettier — npm run lint, npm run lint:check, npm run format, npm run format:check
• Vitest + Vue Test Utils — npm run test, npm run test:watch, namuna testlar __tests__/ papkalarida

login() funksiyasi (src/stores/auth.ts) POST /auth/login so'rovini yuboradi — backend hali ulanmagan bo'lsa xatolik bilan tugaydi, bu kutilgan holat. O'z backendingizga ulash uchun shu funksiyani moslang.

Dark mode: src/composables/useTheme.ts — isDark va toggleTheme()ni qaytaradi, standart holat har doim light (tizim sozlamasidan qat'i nazar), foydalanuvchi tanlovi esa localStorageda saqlanadi.

Naive UI varianti (template-naive-ui/)

Ranglar ikkita joyda markazlashgan — birga o'zgartiring:

• src/assets/styles/main.css — CSS o'zgaruvchilar (--color-primary, va h.k., .dark bloki bilan)
• src/config/theme.ts — Naive UI componentlari uchun themeOverrides

Barcha UI componentlar main.tsda global ro'yxatdan o'tkazilgan (app.use(UiComponents)), shuning uchun har qanday .vue faylda import qilmasdan ishlatish mumkin: <u-button>, <u-input> va h.k.

Componentlarning kodi src/components/ui/da. Global ro'yxatdan o'tkazish components/ui/index.tsda, TypeScript IntelliSense uchun components.d.tsda. Yangi component qo'shish uchun shu ikkalasiga ham qo'shing. To'liq namuna — src/views/HomeView.vue.

Eslatma: HomeView.vue barcha u-* componentlarni bitta sahifada ko'rsatgani uchun production bundle hajmi kattaroq chiqadi — haqiqiy loyihada namuna kodini soddalashtiring yoki o'chirib tashlang.

shadcn-vue varianti (template-shadcn-vue/)

Ranglar src/assets/styles/main.cssdagi CSS o'zgaruvchilarda (HSL formatida, shadcn-vue standart formati), tailwind.config.js esa shu o'zgaruvchilarga hsl(var(--x)) orqali murojaat qiladi. To'liq mos ranglar to'plamini https://ui.shadcn.com/themes saytida generatsiya qilib, shu faylga joylashtirishingiz mumkin.

shadcn-vue'da componentlar global ro'yxatdan o'tkazilmaydi — har bir componentni kerakli faylda import qilasiz (masalan import { Button } from '@/components/ui/button'). Tayyor componentlar (src/components/ui/): Button, Input, Textarea, Label, Checkbox, Select, Card, Tabs, Table, Dialog. Har biri odatiy shadcn-vue tuzilishida (components.json orqali boshqariladi).

Qo'shimcha componentlar kerak bo'lsa (Toast, DropdownMenu, Popover, DatePicker va h.k.), rasmiy shadcn-vue CLI orqali qo'shishingiz mumkin:

npx shadcn-vue@latest add toast

Bu buyruq components.jsondagi sozlamalarga (tailwind, aliases) qarab component kodini to'g'ridan-to'g'ri src/components/ui/ga nusxalaydi.

Murakkab formalar uchun (masalan schema-based validatsiya) npx shadcn-vue add form buyrug'i vee-validate + zodni avtomatik qo'shadi — joriy shablonda esa oddiy HTML5 required validatsiyasi bilan cheklangan (LoginView.vue, HomeView.vuedagi forma namunalari).

To'liq namuna — src/views/HomeView.vue va src/components/widgets/TableVariantsDemo.vue (Table + Tabs orqali oddiy/amallar bilan/status bilan/checkbox bilan/loading/chiziqli — 6 xil jadval namunasi).

Nuxt variant (template-nuxt-ui/)

Nuxt tanlanganda qo'shimcha UI tanlovi yo'q — bitta shablon, o'ziga xos Nuxt kutubxonalari bilan:

• Nuxt 4 (app/ katalog tuzilishi) + TypeScript
• Nuxt UI 4 — to'liq komponent kutubxonasi (UButton, UForm, UTable, UModal va h.k.), global auto-import qilingan — hech qanday import kerak emas
• TailwindCSS 4 (Nuxt UI orqali, CSS-based config — app/assets/css/main.cssdagi @import "tailwindcss"; @import "@nuxt/ui";)
• @nuxtjs/i18n — uz / ru / en tillari tayyor (i18n/locales/)
• @pinia/nuxt — app/stores/auth.ts: token, user, isAuthenticated, login(), logout() (holat cookie'da saqlanadi — localStorage'dan farqli, SSR'da ham ishlaydi)
• Axios — app/plugins/axios.ts + app/composables/useApi.ts: har bir so'rov uchun token interceptor + 401 javobida avtomatik logout va /loginga yo'naltirish
• Global auth middleware — app/middleware/auth.global.ts, sahifada definePageMeta({ requiresAuth: true }) bilan belgilanadi (masalan: app/pages/profile.vue)
• Dark mode — Nuxt UI ichidagi @nuxtjs/color-mode ustidan app/composables/useTheme.ts (isDark / toggleTheme()), standart holat har doim light
• Toast xabarnomalari — Nuxt UI'ning o'z useToast()i ustidan qisqa app/composables/useNotify.ts: success(), error(), warning(), info(), notify()
• Zod — app/composables/useValidators.ts: <UForm :schema> uchun sxema-asosli validatsiya (boshqa shablonlardagi useRules.tsning Nuxt UI'ga mos muqobili)
• lucide iconlari — Nuxt UI'ning standart icon to'plami (i-lucide-*, masalan icon="i-lucide-rocket")
• ESLint (@nuxt/eslint) + Prettier, Vitest + @nuxt/test-utils — npm run lint, npm run format, npm run test, npm run typecheck

Ikkita Vue shablonidan farqi shundaki, Nuxt versiyasi SSR/SSG'ga tayyor: sahifalar vue-routerdagi kabi qo'lda emas, app/pages/dagi fayllar orqali avtomatik yaratiladi, 404 esa app/error.vue orqali boshqariladi (vue-routerning :pathMatch(.*)* o'rniga). .envdagi o'zgaruvchi nomi ham farqli — NUXT_PUBLIC_API_BASE (Nuxt'ning runtimeConfig.public konvensiyasiga mos).

To'liq namuna — app/pages/index.vue (UButton, UForm, UTable, UTabs, UModal, UDropdownMenu, toast va ranglar namunalari).

Proyekt tuzilishi (yaratilgandan keyin)

Vue variantlari

my-app/
├── src/
│   ├── api/axios.ts             # Axios instansiyasi (token interceptor, 401 logout)
│   ├── components/ui/           # UI componentlar (kutubxonaga qarab farq qiladi)
│   ├── components/widgets/      # ThemeToggle, TableVariantsDemo kabi tarkibiy componentlar
│   ├── composables/useTheme.ts  # Dark/light mavzu holati
│   ├── i18n/                    # vue-i18n sozlamalari va tillar
│   ├── layouts/                 # DefaultLayout
│   ├── router/                  # vue-router sozlamalari + auth guard
│   ├── stores/auth.ts           # Pinia auth store + __tests__
│   ├── views/                   # Home, About, Login, Profile, NotFound
│   ├── assets/styles/main.css   # Tailwind + global CSS ranglar (light/dark)
│   ├── App.vue
│   └── main.ts
├── eslint.config.js
├── .prettierrc.json
├── vitest.config.ts
├── tailwind.config.js
├── vite.config.ts
└── package.json

Nuxt variant

my-nuxt-app/
├── app/
│   ├── assets/css/main.css      # Tailwind + Nuxt UI import
│   ├── components/widgets/      # ThemeToggle
│   ├── composables/             # useApi, useNotify, useTheme, useValidators
│   ├── error.vue                # 404 / xatolik sahifasi
│   ├── layouts/default.vue      # Header, navigatsiya, til/mavzu almashtirish
│   ├── middleware/auth.global.ts# Himoyalangan sahifalar uchun guard
│   ├── pages/                   # index, about, login, profile — fayl-asosli routing
│   ├── plugins/axios.ts         # Axios instansiyasi (token interceptor, 401 logout)
│   ├── stores/auth.ts           # Pinia auth store + __tests__
│   ├── utils/                   # currency, phone — framework-agnostik yordamchilar
│   ├── app.config.ts            # Nuxt UI ranglari (primary/neutral)
│   └── app.vue
├── i18n/locales/                # uz / ru / en
├── eslint.config.mjs
├── .prettierrc.json
├── vitest.config.ts
├── nuxt.config.ts
└── package.json