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

vue-countable

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

NPM Version NPM Downloads License Tweet

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.

Comments

  • Bump handlebars from 4.1.0 to 4.4.3
    Bump handlebars from 4.1.0 to 4.4.3

    Oct 20, 2019

    Bumps handlebars from 4.1.0 to 4.4.3.

    Changelog

    Sourced from handlebars's changelog.

    v4.4.3 - October 8th, 2019

    Bugfixes

    Typings:

    • add missing type fields to AST typings and add tests for them - 0440af2

    Commits

    v4.4.2 - October 2nd, 2019

    • chore: fix grunt-saucelabs dependency - b7eada0

    Commits

    v4.4.1 - October 2nd, 2019

    • #1562 - Error message for syntax error missing location in 4.2.1+

    Commits

    v4.4.0 - September 29th, 2019

    • Added support for iterable objects in {{#each}} helper (#1557) - cf7545e

    Commits

    v4.3.4 - September 28th, 2019

    • fix: harden "propertyIsEnumerable"-check - ff4d827

    Compatibility notes:

    • No incompatibilities are known.

    Commits

    v4.3.3 - September 27th, 2019

    • fix test case for browsers that do not support defineGetter - 8742bde

    Commits

    v4.3.2 - September 26th, 2019

    • Use Object.prototype.propertyIsEnumerable to check for constructors - 213c0bb, #1563

    Compatibility notes:

    • There are no breaking changes

    Commits

    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump lodash.mergewith from 4.6.1 to 4.6.2
    Bump lodash.mergewith from 4.6.1 to 4.6.2

    Oct 20, 2019

    Bumps lodash.mergewith from 4.6.1 to 4.6.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump fstream from 1.0.11 to 1.0.12
    Bump fstream from 1.0.11 to 1.0.12

    Oct 20, 2019

    Bumps fstream from 1.0.11 to 1.0.12.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump lodash from 4.17.11 to 4.17.15
    Bump lodash from 4.17.11 to 4.17.15

    Oct 20, 2019

    Bumps lodash from 4.17.11 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump mixin-deep from 1.3.1 to 1.3.2
    Bump mixin-deep from 1.3.1 to 1.3.2

    Oct 20, 2019

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump tar from 2.2.1 to 2.2.2
    Bump tar from 2.2.1 to 2.2.2

    Oct 20, 2019

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • [question] Compatibility with Quill/vue-quill-editor
    [question] Compatibility with Quill/vue-quill-editor

    Mar 23, 2021

    Hey, how would you make this work with an editor like Quill, or specifically https://github.com/surmon-china/vue-quill-editor?

    Sorry, that's broad, but I am trying and coming up with nothing.

    Reply
  • event.words returning undefined
    event.words returning undefined

    Jan 26, 2019

    Hey, man. Super excited about the prospect of this component. Thanks for releasing it!

    I'm a bit confused by the docs. Not sure where how to retrieve the output of my counts. I was expecting event.words to return a number of words, but it's returning undefined. Here's what I have in my app.vue:

    <vue-countable
      :text="notes[selectedNoteIndexInList].contents"
      :elementId="toString(notes[selectedNoteIndexInList].id)"
      @change="change"
    >sup yo</vue-countable>
    

    ...skipping stuff...

    import VueCountable from 'vue-countable'
    // skipping more irrelevant stuff
    
    export default {
        components: {
          VueCountable
        }
    }
    

    and then in my methods...

    change: function () {
      console.log(event.words)
    }
    

    console.log(event) returns a big object called MessageEvent that contains no count data (to my knowledge). And console.log(event.words) returns undefined.

    Reply