vue-countable

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

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.