admins-components

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Library Build & Consumer Usage

Building the library

npm run build:lib

This produces:

• dist/admins-components.js — ES module entry (re-exports all components)
• dist/base.css — tokens (CSS variables) + shared controls (consumer imports once)
• dist/styles/*.css — per-component CSS (auto-imported by each component's JS chunk)

Style architecture

• base.css — CSS custom properties and shared form primitives (c-input, c-input-row, c-icon-btn, etc.). Consumer imports this once.
• Per-component CSS — each component's JS chunk includes an import './styles/....css' statement. When the consumer's bundler imports a component, its CSS comes along automatically.

Consumer usage

// main.ts
import 'admins-components/base.css'          // tokens + controls (once)
import { Calendar } from 'admins-components' // component CSS auto-included

Testing in consumer-playground

The consumer-playground project uses a file: dependency pointing to ../admins-components. After running build:lib, changes are picked up immediately — no pack/install step needed.

# 1. Build the library
cd admins-components
npm run build:lib

# 2. Run the consumer (in another terminal)
cd consumer-playground
npm run dev