@knime/kds-components

Vue components library for the KNIME Design System.

Installation

pnpm add @knime/kds-components

Usage

TODO: fill once better examples are available, also explain how to set up using @knime/kds-styles

<script setup>
import { Icon } from "@knime/kds-components";
</script>

<template>
  <Icon name="checkmark" size="large" />
</template>

Using with Vitest, Nuxt, or Vite SSR

The published JavaScript imports its CSS as a side effect (e.g. import "./index.css"), which bundlers handle automatically. When the package is instead evaluated by Node's native ESM loader — as Vitest and Vite/Nuxt SSR do by default, since they externalize node_modules — Node has no .css loader and throws Unknown file extension ".css". Configure the consuming project once so @knime/* packages are processed instead of externalized:

// Vitest — vitest.config.ts
export default defineConfig({
  test: { server: { deps: { inline: [/@knime\//] } } },
});

// Vite SSR — vite.config.ts
export default defineConfig({ ssr: { noExternal: [/@knime\//] } });

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({ build: { transpile: [/@knime\//] } });

Available Components

• Button: Basic button component
• Icon: Icon component with various KNIME icons
• DataType: DataType component rendering a data type icon inside a box

Development

Building

pnpm build

License

GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)