nuxt-chem-ui

Chemistry-focused UI components for Nuxt — molecule and formula rendering, chemical data display, and more. Distributed as a Nuxt module.

Early development. Current components:

• <ChemMolecularFormula> — renders molecular formula strings (CuSO4·5H2O) with proper subscripts.
• <ChemKekulePeriodicTable> — interactive periodic table with two-way element selection (Kekule.js engine, lazy-loaded client-side).
• <ChemKekuleComposer> — 2D molecule structure editor with MOL/CML export (Kekule.js engine, lazy-loaded client-side).
• useChemKekuleWidget() — composable underpinning the Kekule wrappers (widget lifecycle, prop sync, event bridging).

Install from a GitHub Release tarball (prebuilt, no install scripts):

pnpm add https://github.com/AnsonZhang2009/nuxt-chem-ui/releases/download/v0.1.0/nuxt-chem-ui-0.1.0.tgz

or straight from GitHub (pnpm builds it on install — approve the build once):

pnpm add github:AnsonZhang2009/nuxt-chem-ui

# pnpm-workspace.yaml (pnpm 10.26+)
allowBuilds:
  'nuxt-chem-ui@git+https://github.com/AnsonZhang2009/nuxt-chem-ui.git': true

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-chem-ui'],
})

<template>
  <ChemMolecularFormula formula="C6H12O6" />
</template>

Tailwind CSS v4 is set up automatically by the module. If your app already uses Tailwind v4, disable the injected entry and source the package yourself:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-chem-ui'],
  chemUi: { css: false },
})

/* app.css */
@import "tailwindcss";
@source "../node_modules/nuxt-chem-ui";

pnpm install        # also builds dist/ (real build via prepare)
pnpm dev            # playground at http://localhost:3000
pnpm test           # vitest
pnpm lint           # eslint
pnpm typecheck     # vue-tsc
pnpm build          # build the module into dist/

See AGENTS.md for the full contributor guide (structure, conventions, adding components).