Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johndatserakis/vue-countable
✍️ Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.
https://github.com/johndatserakis/vue-countable
characters count countable counter paragraphs vue words
Last synced: about 2 months ago
JSON representation
✍️ Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.
- Host: GitHub
- URL: https://github.com/johndatserakis/vue-countable
- Owner: johndatserakis
- License: mit
- Created: 2018-06-04T03:06:18.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2019-10-20T13:51:50.000Z (over 4 years ago)
- Last Synced: 2024-03-24T18:44:15.955Z (2 months ago)
- Topics: characters, count, countable, counter, paragraphs, vue, words
- Language: Vue
- Homepage: https://johndatserakis.github.io/vue-countable/
- Size: 1.34 MB
- Stars: 26
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (UI Components / Miscellaneous)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (UI Components / Miscellaneous)
- awesome-vue - vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (Components & Libraries / UI Components)
- awesome-vue - vue-countable ★6 - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting. (UI Components / Miscellaneous)
README
# vue-countable
Vue binding for [countable.js](https://sacha.me/Countable/). Provides real-time paragraph, sentence, word, and character counting.
### Demo
[View Demo](https://johndatserakis.github.io/vue-countable/) | [View on NPM](https://www.npmjs.com/package/vue-countable) | [View on GitHub](https://github.com/johndatserakis/vue-countable)
### 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:
``
### 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
```html
import VueCountable from 'vue-countable'
Vue.component('vue-countable', VueCountable)
```
```html
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
``` bash
# 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](https://sacha.me/) for [countable.js](https://sacha.me/Countable/).
### License
[MIT](http://opensource.org/licenses/MIT)
Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup). Using [webpack 4](https://webpack.js.org/).