vue-cleave

library1.2.2jsnpmunverified

A Vue.js (2.x) component that wraps cleave.js, a library for formatting input text (credit cards, phone numbers, dates, custom patterns). Current version 1.2.2 is stable, with no active development since 2020. Requires Vue >=2; does not support Vue 3. Key differentiators: simple declarative API for cleave.js integration in Vue projects, but limited to Vue 2 and unmaintained.

productivity

npm install vue-cleave

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CLEAVE

vue-cleave

productivityjavascriptv1.2.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Cleave

✓ import Cleave from 'vue-cleave'

✗ import { Cleave } from 'vue-cleave'

Default export only; named exports do not exist.

Cleave component in template

✓ <cleave :options="{ ... }"></cleave>

✗ <Cleave :options="{ ... }"></Cleave>

Component tag name must be lowercase in Vue templates; CamelCase works only if used with Vue's auto-registration (not recommended).

CommonJS require

✓ const Cleave = require('vue-cleave').default

✗ const Cleave = require('vue-cleave')

ESM module with default export; CommonJS requires .default access.

Demonstrates basic usage of Cleave component with credit card formatting and v-model binding.

<template> <div> <cleave v-model="cardNumber" :options="{ creditCard: true }" placeholder="Enter credit card number"></cleave> </div> </template> <script> import Cleave from 'vue-cleave' export default { components: { Cleave }, data() { return { cardNumber: '' } } } </script>

Debug

Known issues

deprecatedPackage unmaintained since 2020. No updates for Vue 3 or newer cleave.js versions.

fix

Consider migrating to vue-cleave-next or other Vue 3-compatible input formatting libraries.

affects: >=0.0.0

breakingVue 3 not supported. Using this package with Vue 3 will cause runtime errors.

fix

Use vue-cleave-next if using Vue 3, or downgrade to Vue 2.

affects: >=1.0.0

gotchav-model works but only for the raw unformatted value; formatting is applied visually only.

fix

Access the formatted value via event handling or use cleave.js raw API if needed.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'vue-cleave'

Package not installed or missing dependency.

fix

Run 'npm install vue-cleave --save' or ensure it's in package.json.

Failed to mount component: template or render function not defined

Using named import instead of default import.

fix

Use 'import Cleave from 'vue-cleave'' (default import).

Unknown custom element: <cleave> - did you register the component correctly?

Component not registered in Vue instance.

fix

Add 'components: { Cleave }' in the parent component.

Upgrade

Version history

1.2.2latest on npm

Audit

Dependencies

vuerequiredpeer dependency for Vue 2 component

Agent activity

39 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vue-bulma/cleave ↗

packagevue-cleave ↗

homepagehttps://github.com/vue-bulma/cleave#readme ↗