@vcsh/kern-vue-kit

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

📚 Documentation

Each component is documented with:

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

Available Scripts

This project uses pnpm as its package manager. Install it with npm install -g pnpm if you haven't already.

Development

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

Building

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

Code Quality

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

Releases

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

Publishing

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

SBOM (Software Bill of Materials)

• pnpm run sbom – Generate SBOM in JSON format (sbom.json)
• pnpm run sbom:xml – Generate SBOM in XML format (sbom.xml)
• pnpm run sbom:all – Generate both JSON and XML SBOM files

Conformance Report

Compares every story in the local Storybook against the hosted reference deployment using pixel-by-pixel screenshot comparison and generates a PDF report (conformance-report.pdf) with a conformance score, summary table, and side-by-side diff images for any visual differences.

• pnpm run conformance:report – Run comparison and generate PDF (no screenshots saved to disk; Storybook is started automatically if not already running)
• pnpm run conformance:report:debug – Same as above, but also saves reference/local/diff PNGs to snapshots/conformance/ for local debugging

Options (passed directly to the script):

# Custom output path
node scripts/snapshot-report.js --report-out=./reports/sprint-42.pdf

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

🏢 Contributing Organizations

🔗 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