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)
<vue-countable
:text="myText" // Your text variable
:elementId="'myId'" // A unique string id
@change="change" // Register for the change event
></vue-countable>
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
npm install
npm run watch
npm run test
npm run build:example
npm run build:library
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.