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

View Demo | View on NPM | View on GitHub

# 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>

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.

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.

# 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

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

Sacha Schmid for countable.js.

MIT

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