npm private modules

    vue-disqus-count

    1.0.1 • Public • Published

    vue-disqus-count

    Vue Plugin for embedding Disqus comment count.

    See here the Demo

    See here for vue-disqus-embed

    Installation

    npm install --save vue-disqus-count

    or

    yarn add vue-disqus-count

    Import

    Global Registration

    import Vue from 'vue'
    import VueDisqusCount from 'vue-disqus-count'
     
    Vue.use(VueDisqusCount, {
      shortname: YOUR_DISQUS_SHORTNAME
    })

    Not Using Webpack

    If you don't use webpack (for example in CodePen etc):

    <script src="node-modules/vue-disqus-count/dist/vue-disqus-count.umd.js"></script>

    or use unpkg

    <script src="https://unpkg.com/vue-disqus-count/dist/vue-disqus-count.umd.js"></script>

    and then you still need to install it:

    Vue.use(VueDisqusCount, {
      shortname: YOUR_DISQUS_SHORTNAME
    })

    Basic Usage

    Create an account at Disqus and obtain the shortname for your app, it's required when you register the plugin.

    Vue.use(VueDisqusCount, {
      shortname: YOUR_DISQUS_SHORTNAME
    })

    The next thing that is important is, you can not use url with hash mode (if your url have #/ this thing, it won't work). So if you use vue-router, make sure it's in history mode.

    It is caused by Disqus doesn't support #/, but they support #!/ path.

    You can use only identifier or only url, or both.

    <template>
      ...
      <vue-disqus-count :identifier="identifier"/>
      <vue-disqus-count :url="url" />
      <vue-disqus-count :identifier="identifier" :url="url" />
      ...
    </template>
     
    <script>
      export default {
        data () {
          return {
            identifier: '',
            url: '',
          }
        },
        mounted() {
          // Could work with async data
          // It needs identifier and url not empty before updated
          fetchData().then((response) => {
            this.identifier = response.identifer
            this.url = response.url
          })
        }
      }
    </script> 

    Example

    See the Demo and the corresponding code

    Caveats

    As I have said before, you can not use hash mode. Use history mode. Or if you really want to use hash mode, you need to use hashbang (#!/) rather than hash (#/).

    Question?

    If you have question, just post in issues.

    Install

    npm i vue-disqus-count

    DownloadsWeekly Downloads

    48

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    361 kB

    Total Files

    16

    Last publish

    Collaborators

    • alijaya