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.
| 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. |
| event | value | description |
|---|---|---|
| change | Object | Provides character, word, sentence, paragraph, and all values. |
# 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 buildGo ahead and fork the project! Submit an issue if needed. Have fun!
Sacha Schmid for countable.js.
Packaged with a mixture of vue-lib-template and vue-sfc-rollup. Using webpack 4.