@finzor-ui/vite-plugin
v0.5.5
Published
Vite plugin for Finzor UI: CSS channel (style closure), optimizeDeps, and theme bootstrap.
Readme
@finzor-ui/vite-plugin
Официальный Vite-адаптер Finzor UI: dual-entry (SPA side-effects + SSR exports["."].node), CSS closure для SSR/Nuxt, optimizeDeps и bootstrap темы.
Vite: peer ^5 || ^6 || ^7 || ^8 (актуальный стек create-шаблона — Vite 8 + @vitejs/plugin-vue 6).
Поддерживаемые npm scopes: @finzor-ui/* (Free) и @finzor-ui-pro/* (Pro).
pnpm add -D @finzor-ui/vite-pluginPlain SPA (zero-config CSS)
// vite.config.ts — плагин опционален для стилей
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})import { FMenu } from '@finzor-ui/menu'Bundler подтягивает thin CSS через side-effects в dist/index.js. Без double inject.
SSR / Nuxt
// vite.config.ts — plain Vite SSR
import { finzorUi } from '@finzor-ui/vite-plugin'
export default defineConfig({
plugins: [vue(), finzorUi({ ssr: true })]
})// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@finzor-ui/vite-plugin/nuxt']
})В коде — всегда @finzor-ui/<pkg>. SSR entry — через exports["."].node в пакетах, не через rewrite в plugin.
Подробный контракт: docs/ssr.md.
Public API
| Export | Назначение |
| ------ | ---------- |
| finzorUi(options?) | Основной плагин (массив Vite plugins) |
| @finzor-ui/vite-plugin/nuxt | Рекомендуется для Nuxt 4 — CSS prepend + ssr.noExternal + validate |
Как работает CSS
| Режим | JS на SSR | CSS inject |
| ----- | --------- | ---------- |
| SPA (finzorUi() default) | client entry | нет — bundler + side-effects |
| Vite SSR (ssr: true) | exports["."].node | virtual module в app entry |
| Nuxt module | exports["."].node + ssr.noExternal | nuxt.options.css prepend |
- Scan — статический обход
scanDirs, сбор@finzor-ui/*. - Style closure — топо-порядок по
styles.manifest.json. - Доставка: см. таблицу выше.
optimizeDeps.include— bare@finzor-ui/<pkg>.
Options
ssr
Default false. Включите для plain Vite SSR: virtual CSS inject в app entry.
Nuxt module: ssr: true, cssInject: false.
cssInject
Default = ssr. Virtual CSS module для plain Vite SSR. Nuxt: false.
packages
Корни для validate / analyzeCss.
'auto'(default) — пакеты из графа импортов.['menu', '@finzor-ui-pro/table']— явный список.
scanDirs
- default:
['src'] - Nuxt:
app/,pages/,components/,layouts/,plugins/,src/
theme / colorScheme
Build-time bootstrap на <html>.
colorMode (только Nuxt module)
Opt-in sync с @nuxtjs/color-mode. Default: false.
includePackageJsonDeps
Union @finzor-ui/* из app package.json (plain Vite, default true). Nuxt: false.
Пакеты без module entry (main / module / exports["."]) — например @finzor-ui/ai-context, @finzor-ui/cli — в optimizeDeps.include не попадают.
validate / debug / analyzeCss
Build-time checks, логи closure, отчёт размера CSS.
Quick recipes
SPA + theme (без SSR)
plugins: [
vue(),
finzorUi({
theme: 'corporate',
colorScheme: 'light'
})
]Nuxt 4
export default defineNuxtConfig({
modules: ['@finzor-ui/vite-plugin/nuxt'],
finzorUi: {
theme: 'corporate',
colorScheme: 'dark'
}
})Module: scan → closure → prepend nuxt.options.css; vite.ssr.noExternal для @finzor-ui/*.
Escape hatch (без плагина)
| Subpath | Назначение |
| ------- | ---------- |
| ./style.css | Thin CSS пакета (не полный UX composite) |
| ./style-all.css | Topo-concat closure |
| ./styles.manifest.json | Граф CSS-deps |
| ./ssr | Явный SSR entry (обычно не нужен в app-коде) |
Migration 0.4 → dual-entry (0.5+)
- Обновите все
@finzor-ui/*и@finzor-ui/vite-pluginодной волной. - В app-коде —
@finzor-ui/<pkg>, не/ssr. - SSR JS:
exports["."].node→dist/ssr.js(контракт пакета). - Nuxt: module + без ручных
css: ['@finzor-ui/...'].
См. также
docs/ssr.md— dual-entry контрактpackages/vite-plugin— исходники и тесты