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. --> <!-- 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 dependenciesnpm install# serve with hot reloadnpm run watch# run the testsnpm run test# build demo pagenpm run build:example# build librarynpm run build:library# build everything and run testsnpm run build
Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
Thank You
Sacha Schmid for countable.js.
License
Packaged with a mixture of vue-lib-template and vue-sfc-rollup. Using webpack 4.