@elmethis/vue

@elmethis/vue

Vue 3 component library for elmethis.

Components and hooks follow the shared Elmethis component surface:

• design tokens come from @elmethis/core (import "@elmethis/core/tokens.css");
• theming is native via CSS light-dark() + color-scheme;
• files are kebab-case, styles use CSS Modules with the .elm-* class convention, and specs are co-located.

Authoring style

Components are authored in TSX, not single-file .vue components, to keep the surface aligned with the React and Solid siblings. Each component is a defineComponent whose setup returns a render function:

import { defineComponent } from "vue";
import styles from "./elm-divider.module.css";

export const ElmDivider = defineComponent({
  name: "ElmDivider",
  inheritAttrs: false,
  setup(_, { attrs }) {
    return () => <hr class={styles["elm-divider"]} {...attrs} />;
  },
});

TSX is compiled by @vitejs/plugin-vue-jsx; types/.d.ts are emitted with vue-tsc. Note Vue JSX is its own dialect (class not className, slots as child functions, v-model is manual modelValue + onUpdate:modelValue).

Scripts

Testing layers

• *.spec.ts(x) → unit (pnpm test.unit): pure logic, CSR via Vue Test Utils, and SSR via renderToString from vue/server-renderer.
• *.browser.spec.tsx → browser (pnpm test.browser): real Chromium, only for behavior the unit DOM can't fake (native <dialog>/focus/layout, real Web APIs, color-scheme).