sharedcz-vue3

A small Vue 3 library with shared components and utilities.

Naming conventions

• Components use Cz prefix and PascalCase, e.g. CzButton.
• Utilities use cz prefix and camelCase, e.g. czDebounce, czClamp.
• Installing the plugin mounts utilities on app.config.globalProperties.$cz for runtime access (e.g. this.$cz.czDebounce).

Install

npm i sharedcz-vue3

Usage

import { createApp } from 'vue'
import App from './App.vue'
import SharedCZ, { CzButton, czDebounce } from 'sharedcz-vue3'
import 'sharedcz-vue3/style.css'

const app = createApp(App)
app.use(SharedCZ)
app.mount('#app')

// or named imports
// app.component('CzButton', CzButton)
// console.log(czDebounce)

Styles & theming

• Global variables and base rules are defined in src/styles/base.css and built to dist/style.css.
• Component-specific styles are stored in src/styles/components/ and copied to dist/components/ during postbuild.
• To customize theme or adapt styles in the consumer project, override CSS variables before importing the library stylesheet:

:root {
  --cz-primary: #1a73e8;
  --cz-btn-bg: #fff;
  --cz-btn-color: #1a73e8;
}
@import 'sharedcz-vue3/style.css';

If you only need to tweak a specific component, import its CSS from dist/components/<component>.css.

Build & Test

cd packages/sharedcz-vue3
npm install
npm run build    # builds lib to dist/ and runs postbuild to copy styles
npm test         # runs unit tests (vitest)

Publish

• Before publishing, bump the package version in packages/sharedcz-vue3/package.json.
• Publish with:

cd packages/sharedcz-vue3
npm publish --access public

Note: This template intentionally does not contain an automated publish workflow. If your npm account requires two-factor authentication (2FA), use an Automation token with bypass 2FA in CI when automating publishes.

Files & structure

Key files:

• src/components/ — component source files (each component has its own folder and style in src/styles/components/)
• src/styles/ — base.css and per-component CSS files
• src/utils/ — utility functions prefixed with cz
• dist/ — build output (JS bundles + style.css + components/ styles)

If you'd like, I can also:

• add a small example demo (Vite app) showing variable overrides and per-component style imports, or
• create a simple CI step that runs build + tests on push (no publishing).

Tell me which (if any) you'd like next.