Library Mutex Principle
TechUI follows a strict "Single Core Principle": in a single engineering project, it is strictly forbidden to simultaneously introduce or initialize multiple TechUI component libraries.
This means you cannot install @techui/scifi and @techui/base at the same time in the same project, nor should you attempt to mix @techui/admin and @techui/scifi. TechUI's architectural design requires that projects maintain a single dependency source.
Technical Constraints
This mutual exclusivity is not an arbitrary restriction but is determined by TechUI's underlying architecture. Forcing a mixture will lead to the following serious runtime conflicts:
🧩 Wasm Singleton Conflict
All TechUI component libraries (Scifi/Base/Admin/Prime) share the same underlying Rust Wasm runtime environment.
- Guard Fingerprint: The Wasm guard locks the current runtime environment fingerprint during initialization. Loading two Wasm modules simultaneously will lead to unpredictable errors.
- Global Hooks: Multiple core libraries simultaneously attempting to mount the
windowglobal object or hijack native APIs will lead to unpredictable behavior.
🎨 Style and Namespace Pollution
- CSS Variable Overwriting: All component libraries define CSS variables (such as
--font-weaker) through:root. - Vue Context Conflict: During the
app.use()registration phase, different libraries might register global components with the same name, such as<TuiButton>.
Product Positioning
TechUI divides its product lines to meet the needs of different scenarios. The Prime Edition exists specifically to solve the problem of needing multiple specialized features at once.
Specialized:
- Scifi: Focuses on sci-fi visuals and dynamic SVG paths.
- Base: Focuses on basic charts and data presentation.
- Admin: Focuses on backend business logic and forms.
- These are designed as "specialized students" isolated from each other, suitable for pure, single scenarios.
All-in-One:
- Prime: This is the only permitted "all-rounder".
Decision Guide
If you are confused during selection, please refer to the following decision matrix:
| Your Needs | Recommended Solution | Incorrect Practice |
|---|---|---|
| Only need cool large-screen backgrounds | @techui/scifi | - |
| Only need simple data reports | @techui/base | - |
| Need both cool backgrounds and rich charts | @techui/prime | ❌ Install Scifi + Base simultaneously |
| Started with Base, want to add sci-fi effects later | Upgrade to @techui/prime** | ❌ Add Scifi on top of Base |
Dependency Warning
In your package.json, ensure that your dependencies only contain one TechUI core library.
❌ Strictly Prohibited: Multi-library Coexistence
Although npm install might not report an error, it will cause the browser to crash or fuse during project runtime.
// package.json
{
"dependencies": {
"vue": "^3.0.0",
"@techui/scifi": "^1.0.0", // <--- Conflict Source 1
"@techui/base": "^1.0.0" // <--- Conflict Source 2 (Forbidden to coexist with Scifi)
}
}✅ Correct Operation: Use Prime
If you need the functionality of both, Prime is the only solution.
// main.ts
import { createApp } from 'vue';
// By introducing only Prime, you get Scifi visuals and Base charts
import PrimeInit from "@techui/prime";
import "@techui/prime/dist/style.css";
const app = createApp(App);
app.use(PrimeInit, { /* config */ });