t×tecexpressby TeKOcloud
DEv0.7.1
Getting started / VUE

Installation and getting started.

Interactive preview
sh
npm install @tekocloud.de/tecexpress vue@^3.5.0

All Vue examples below are complete single-file components. Save as App.vue in a Vue 3 application with TypeScript. For local development use Node.js 24.15+ within 24.x.

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>

Import components individually or register all of them with app.use(Tecexpress). camelCase props can be written as kebab-case in templates.

Themes

ts
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.

Without data-tx-theme, light is used. The attribute also works on a container and is retained for overlays. Override tokens on the container after importing CSS.

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

Available 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.