Installation und Einstieg · Vue

npm install @tekocloud.de/tecexpress vue@^3.5.0

Alle folgenden Vue-Beispiele sind vollständige Single-File-Components. Als App.vue speichern und in einer Vue-3-Anwendung mit TypeScript ausführen. Für lokale Entwicklung Node.js 24.15+ innerhalb 24.x verwenden.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { TxTextBox } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const text = ref('Alex')
</script>

<template>
  <TxTextBox v-model="text" label="Name" />
</template>

Einzelimporte sind möglich; alternativ registriert app.use(Tecexpress) alle Komponenten. Props in camelCase können in Templates als kebab-case geschrieben werden.

Themes

import '@tekocloud.de/tecexpress/themes/index.css'
document.documentElement.dataset.txTheme = 'dark' // 'light'
// Fixed theme: import only themes/light.css or themes/dark.css instead.

Ohne data-tx-theme gilt Light. Das Attribut funktioniert auch auf einem Container und bleibt für Overlays erhalten. Nach dem CSS-Import können Tokens am Container überschrieben werden.

css

.my-app { --tx-accent: #6636c6; --tx-radius: 10px; --tx-control-height: 44px; }

Verfügbare Tokens: --tx-font, --tx-font-size, --tx-radius, --tx-space, --tx-control-height, --tx-bg, --tx-surface, --tx-surface-alt, --tx-text, --tx-muted, --tx-border, --tx-accent, --tx-accent-text, --tx-hover, --tx-selection, --tx-danger, --tx-success, --tx-focus, --tx-shadow, --tx-backdrop, --tx-scheduler-slot-height.

Installation und Einstieg.