drod-components

drod-components

A Vue 3 component library — 60+ components, 45+ utility functions, and 4 directives — built and distributed as an ES/CJS dual-format npm package.

• npm: drod-components
• License: MIT
• Author: The Drod

Installation

npm install drod-components

Peer dependency — make sure Vue 3 is installed in your project:

npm install vue

Setup

Register globally in your main.js:

import { createApp } from 'vue'
import App from './App.vue'
import DrodComponents from 'drod-components'

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

Or import individual components on demand:

import { DrodButton, DrodInput } from 'drod-components'

Components

Form

Buttons & Controls

Modals & Overlays

Media

Layout

Display

Visual Effects

Utility Components

Directives

Import and register manually:

import {
  DrodDirectiveOnClickOutside,
  DrodDirectiveFocus,
  DrodDirectiveDoubleClick,
  DrodDirectivelongPress,
} from 'drod-components'

app.directive('on-click-outside', DrodDirectiveOnClickOutside)
app.directive('focus', DrodDirectiveFocus)
app.directive('double-click', DrodDirectiveDoubleClick)
app.directive('long-press', DrodDirectivelongPress)

Utilities

import { capitalizeText, isMobile, generateRandomId } from 'drod-components'

String

capitalizeText · capitalizeFirstLetter · camelizeText · escapeRegex · validateString

Arrays

shuffleArray · orderArrayOfObjects · randomIndex · randomIndexWithWeight · convertArrayToObject · convertArrayToArrayBuffer

Files & Assets

downloadFile · saveToJSON · getFileExtension · getAssetsImageUrl · getFirebaseImage · isVideo

Device & Environment

isMobile · isMobileData · isSmartwatch · isOnline · isPWA

DOM

appendToBody · findParentWithId · isDescendant · getCaretPosition · setCaretPosition

Data & Generation

generateRandomId · generateRandomNumber · generateRandomPassword · copyToClipboard · buildCombination

Misc

calculateAge · allowShare · compareVersions · isBrightColor · ThemeSwitcher · TouchEvent · tenPad · throttle · isFunction · isObject

Prep for Publish

Before publishing a new version, go through this checklist:

1. Bump the version

Edit package.json and increment the version following semver:

2. Build the package

npm run build

This runs Vite in library mode and outputs to dist/:

• dist/drod-components.js — ES module
• dist/drod-components.cjs — CommonJS

Verify the dist/ folder was created and looks correct before continuing.

3. Check what will be published

npm pack --dry-run

This lists exactly which files npm will include (controlled by the files field in package.json):

• dist/*
• src/**/*.vue

If something unexpected appears or something required is missing, fix package.json → files before publishing.

4. Test the build locally (optional but recommended)

Install the packed tarball into another local project to catch import/runtime issues before they hit npm:

# In drod-components/:
npm pack
# This creates drod-components-x.x.x.tgz

# In your test project:
npm install /path/to/drod-components-x.x.x.tgz

Publishing to npm

First time only — log in to npm

npm login

Follow the prompts (username, password, OTP if 2FA is enabled). You only need to do this once per machine.

Verify you're logged in:

npm whoami

Publish

The publish script builds and publishes in one command:

npm run publish

This is equivalent to:

npm run build && npm publish --access public

The --access public flag is required for scoped packages but harmless for unscoped ones — it ensures the package is publicly accessible on the npm registry.

Verify it published

npm view drod-components

Or check npmjs.com/package/drod-components.

After publishing

• Commit the version bump: git commit -am "chore: bump version to x.x.x"
• Tag the release: git tag vx.x.x && git push --tags