KERN – VUE-Kit

Dieses Repository enthält die VUE-Implementation des KERN Design-Systems.

Mit KERN schaffen wir einen offenen UX-Standard für die deutsche Verwaltung, der Umsetzende befähigt, barrierefreie digitale Verwaltungslösungen effizient und nutzendenzentriert zu entwickeln. KERN ist ein Open-Source-Projekt, das von der Ländern Hamburg und Schleswig-Holstein initiiert wurde. Alle mit Interesse an der Digitalisierung der öffentlichen Verwaltung sind herzlich eingeladen, Teil der bundesweiten interdisziplinären Community zu werden. Alle Informationen auf: www.kern-ux.de.

Disclaimer

Das KERN VUE-Kit ist eine Implementation des KERN Design-Systems innerhalb eines Community-Projekts. Das KERN Projektteam ist nicht dafür verantwortlich und kann Dir bei der Nutzung nicht helfen. Kontaktiere den Maintainer direkt, wenn Du Hilfe benötigst, einen Bug melden möchtest oder eine Funktion anfragen willst. Dies funktioniert am besten durch die Erstellung eines Bugs oder eines Issues im Ticket-System dieses Repositorys.

Verantwortlich und Maintainer für dieses Repository sind: Fynn Weyrich @OC000079113093 und Fabian Wilms @wilms

Neue Komponenten sollten über ein Ticket im Haupt-Repository angefragt werden, damit alle Umsetzungen davon profitieren können.

Weitere Information findest Du in den Dateien CODE_OF_CONDUCT, CONTRIBUTING, LICENSE, CHANGELOG und COMPONENTS.

Beitragen

Die Entwicklung des KERN Design-Systems ist im Hauptrepository organisiert.

Für Bugs und Verbesserungsvorschläge, die sich ausschließlich auf den VUE-Code beziehen, schaue dir bitte unsere Contributing Guidelines an. Wir freuen uns auf deinen Beitrag!

🚀 Features

• 🎨 KERN Design System - Complete implementation of KERN UX components
• 📱 Modern Vue - Built with Vue3 composition API
• ♿ Accessibility First - WCAG 2.1 AA compliant components
• 🔧 TypeScript Ready - Full TypeScript support with comprehensive type definitions
• 🧠 IntelliSense Support - Rich IDE support with autocomplete and type checking

🛠️ Usage

Import kern-ux/native style and kern-vue-kit

npm install @kern-ux/native
npm install @vcsh/kern-ux-kit

Import KERN style in App.vue

<style>
@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";
</style> 

Use Components

Import and use the Vue components in your application:

<template>
  <KernButton label="Primary Button" variant="primary" @click="onClick()" />
</template>

<script setup>
import KernButton from "@vcsh/kern-vue-kit";

function onClick() {
  console.log("I was clicked");
}
</script>

🎨 Available Components

All components follow the KERN design system and include:

• Accessibility: WCAG compliant by default
• Theming: Support for different themes
• TypeScript: Full TypeScript support
• Props: Configurable through props
• Events: Standard Vue event handling

See the storybook for more details [TBD LINK].

📚 Documentation

Each component is documented with:

• Interactive examples
• Props documentation
• Usage guidelines
• Accessibility information

Available Scripts

Development

• npm run dev – Start the demo app in dev mode (Vite)
• npm run demo – Run the demo app (Vite)
• npm run storybook – Start Storybook on port 6006

Building

• npm run build – Build the library (delegates to build:lib)
• npm run build:lib – Type-check and build the library bundle to dist/
• npm run build:demo – Build the demo app
• npm run build:storybook – Build Storybook static site to dist/storybook

Code Quality

• npm run type-check – Run TypeScript type-checking in build mode
• npm run test – Run unit tests with Vitest
• npm run lint – Lint source files with ESLint
• npm run format – Format files with Prettier (write changes)
• npm run format:check – Check formatting with Prettier (no writes)
• npm run format:lint – Alias to run formatter

Releases

• npm run release – Create a release with standard-version
• npm run release:minor – Release a minor version
• npm run release:major – Release a major version
• npm run release:patch – Release a patch version
• npm run release:prerelease – Create a pre-release version
• npm run release:first – Create the first release (initial tag)

Publishing

• npm run publish:prepare – Build lib and create npm package tarball in dist/kern-vue-kit
• npm run publish:check – Prepare and create npm package (dry-run)
• npm run publish:dry-run – Build and attempt to publish to npm (dry-run)
• npm run publish:preview – Alias for publish:dry-run
• npm run publish:npm – Build and publish package to npm (public access)
• npm run publish:npm-beta – Publish to npm with beta tag
• npm run publish:npm-alpha – Publish to npm with alpha tag

♿ Accessibility

All components are designed with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility
• High contrast support

📄 License

This project is licensed under the EUPL-1.2 License - see the LICENSE.md file for details.

👥 Authors & Contributors

• Fynn Weyrich - Initial work
• Fabian Wilms - Contributor

This documentation was inspired by the documentation of the KERN Angular Kit.

🔗 Related Projects

• KERN UX Native - CSS framework
• KERN Design System - Design system documentation

🐛 Issues & Support

• Bug Reports: GitLab Issues
• Feature Requests: GitLab Issues
• Mattermost: kern-vue-kit Channel

Made with ❤️ by the KERN UX Community