Skip to content
✍️ Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.
Vue JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dist - Updating iife build Feb 20, 2019
docs Adjusting build settings Mar 30, 2019
example
src Updated component to no longer need to create an empty div to hold te… Jan 2, 2019
test Updated component to no longer need to create an empty div to hold te… Jan 2, 2019
.babelrc
.editorconfig initial work Jun 6, 2018
.gitignore initial work Jun 6, 2018
CHANGELOG.md - Updating iife build Feb 20, 2019
LICENSE initial work Jun 6, 2018
README.md Adjusting build settings Mar 30, 2019
package-lock.json - Updating iife build Feb 20, 2019
package.json Adjusting build settings Mar 30, 2019
webpack.config.js

README.md

vue-countable

Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.

NPM Version NPM Downloads License Tweet

Demo

View Demo | View on NPM | View on GitHub

Install

# npm
npm i vue-countable

# yarn
yarn add vue-countable

Or you can include it through the browser at the bottom of your page:

<script src="https://unpkg.com/vue-countable/dist/vue-countable.min.js"></script>

About

Simple way to count characters, words, sentences, and paragraphs in your Vue apps.

Pass your text as a prop to the provided component, along with a unique elementId, and register for the change event to get real-time count updates.

Usage Example

import VueCountable from 'vue-countable'
Vue.component('vue-countable', VueCountable)
<!-- In your html - Make sure the elementId prop is unique on your page. -->
<vue-countable
    :text="myText" // Your text variable
    :elementId="'myId'" // A unique string id
    @change="change" // Register for the change event
></vue-countable>

<!-- The @change function -->
change (event) {
    console.log(event)
    // event.words to get word count, etc.
}

Now, anytime (and on component initialization) your myText variable changes, vue-countable will emit an event containing the details of your text. Register for this event as shown above to get your real-time counts.

Props

prop type description
text String Text you want to track.
elementId String A unique id for your tracking instance. This allows you to have multiple different counts on the same page.
hardReturns Boolean (Optional, defaults to false) Require two returns to count paragraphs
stripTags Boolean (Optional, defaults to false) Remove HTML before counting
ignore Array of Strings (Optional, defaults to empty) Characters to be ignored.

Events

event value description
change Object Provides character, word, sentence, paragraph, and all values.

Development

# install dependencies
npm install

# serve with hot reload
npm run watch

# run the tests
npm run test

# build demo page
npm run build:example

# build library
npm run build:library

# build everything and run tests
npm run build

Other

Go ahead and fork the project! Submit an issue if needed. Have fun!

Thank You

Sacha Schmid for countable.js.

License

MIT

Packaged with a mixture of vue-lib-template and vue-sfc-rollup. Using webpack 4.

You can’t perform that action at this time.