├── .babelrc ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── demo ├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── posts.json └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ ├── mixins │ └── nprogress.js │ ├── router │ └── index.js │ └── views │ ├── Home.vue │ └── Post.vue ├── docs ├── .vuepress │ ├── config.js │ ├── public │ │ ├── favicon-dark.svg │ │ └── favicon.svg │ └── styles │ │ └── palette.styl ├── README.md ├── components │ ├── disqus-count.md │ └── disqus.md ├── howto │ ├── cdn.md │ ├── nuxt.md │ └── vuepress.md ├── reset.md ├── setup-v2.md └── setup-v3.md ├── index.d.ts ├── package-lock.json ├── package.json ├── rollup.config.dev.js ├── rollup.config.prod.js └── src ├── Disqus.vue ├── DisqusCount.vue ├── constants.js ├── index.js ├── plugin.js └── utils.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ] 8 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | 'cypress/globals': true, 5 | browser: true, 6 | node: true 7 | }, 8 | plugins: [ 9 | 'cypress', 10 | 'vuejs-accessibility' 11 | ], 12 | extends: [ 13 | 'plugin:vue/essential', 14 | '@vue/standard', 15 | 'plugin:vuejs-accessibility/recommended' 16 | ], 17 | parserOptions: { 18 | parser: 'babel-eslint' 19 | }, 20 | rules: { 21 | 'no-console': 'off' 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | demo/vue-disqus.js 3 | dist -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [4.0.1](https://github.com/ktquez/vue-disqus/compare/v4.0.0...v4.0.1) (2020-07-02) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * Check if the router object exists when setting the default identifier ([11859f7](https://github.com/ktquez/vue-disqus/commit/11859f7c41034dfbd656d0c84b4012a5776069d3)) 11 | 12 | ## [4.0.0](https://github.com/ktquez/vue-disqus/compare/v3.0.5...v4.0.0) (2020-06-08) 13 | 14 | 15 | ### Features 16 | 17 | * Add documentation by Vuepress Vue a11y theme ([9513899](https://github.com/ktquez/vue-disqus/commit/95138994946f8e6b319d561b416c718c75f4f0ad)) 18 | * Add lazy load ([ac70f97](https://github.com/ktquez/vue-disqus/commit/ac70f97768fc20ea9dd5d3be8832275369a15353)) 19 | * Add reset embed in $disqus ([bfd89f6](https://github.com/ktquez/vue-disqus/commit/bfd89f65d6779e29940d938722713acfa50ba92f)) 20 | * Add types ([7d44da8](https://github.com/ktquez/vue-disqus/commit/7d44da87c9d98d758226099b0eb7c6b1ff865b2e)) 21 | * Added Disqus and DisqusCount components ([d50e0c5](https://github.com/ktquez/vue-disqus/commit/d50e0c54d5ad4c633c68924c4e9d0df1cee8d4af)) 22 | * Emit callback events ([f511016](https://github.com/ktquez/vue-disqus/commit/f5110169fbb00d25d8c00944670fd8ed561e5c5e)) 23 | * Set shortname globally ([54cc1e2](https://github.com/ktquez/vue-disqus/commit/54cc1e2c1baca5a587b058b0839a8f79e91925f7)) 24 | * Support to page and sso props with validator and reset when update language ([0b5e48b](https://github.com/ktquez/vue-disqus/commit/0b5e48ba3766c295cce4a0af5f73e8497851f028)) 25 | 26 | 27 | ### Bug Fixes 28 | 29 | * getShortname computed ([0eb76e4](https://github.com/ktquez/vue-disqus/commit/0eb76e45ed9b60cf36b3979b94a5500a6fed049e)) 30 | * reset component when change route ([e261c94](https://github.com/ktquez/vue-disqus/commit/e261c947018e5e5128a70e94cc0345ed086d54d0)) 31 | 32 | 33 | ## [3.0.5](https://github.com/ktquez/vue-disqus/compare/v3.0.4...v3.0.5) (2018-10-01) 34 | 35 | 36 | 37 | 38 | ## [3.0.3](https://github.com/ktquez/vue-disqus/compare/v3.0.2...v3.0.3) (2018-05-08) 39 | 40 | 41 | 42 | 43 | ## [3.0.2](https://github.com/ktquez/vue-disqus/compare/v3.0.1...v3.0.2) (2018-05-08) 44 | 45 | 46 | 47 | 48 | ## [3.0.1](https://github.com/ktquez/vue-disqus/compare/v3.0.0...v3.0.1) (2018-04-24) 49 | 50 | 51 | 52 | 53 | # [3.0.0](https://github.com/ktquez/vue-disqus/compare/v2.0.7...v3.0.0) (2018-04-20) 54 | 55 | 56 | 57 | 58 | ## [2.0.7](https://github.com/ktquez/vue-disqus/compare/v2.0.6...v2.0.7) (2018-04-19) 59 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-disqus/ff117cd1094feea6c84c5fecaaa53ee7c67e0dcf/CONTRIBUTING.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Alan Ktquez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-disqus 2 | 3 | Vue component to integrate Disqus comments in your application [Vue.js](http://vuejs.org/), with support for SPA and Vue 2.* 4 | 5 | ## Links 6 | 7 | - [Documentation](https://ktquez.github.io/vue-disqus) 8 | - [Demo](https://vue-disqus.surge.sh/) 9 | 10 | ## Contributing 11 | 12 | - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found; 13 | - Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md; 14 | - Send a pull request; 15 | 16 | ## Support me 17 | 18 | 19 | Support me on Ko-fi 20 | 21 | 22 |
23 | 24 | If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez) 25 | 26 | ## License 27 | 28 | VueDisqus is open-sourced package licensed under the [MIT](https://github.com/ktquez/vue-disqus/blob/master/LICENSE) license 29 | -------------------------------------------------------------------------------- /demo/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # demo 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "nprogress": "^0.2.0", 12 | "vue": "^2.6.11", 13 | "vue-router": "^3.2.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.4.0", 17 | "@vue/cli-plugin-router": "~4.4.0", 18 | "@vue/cli-service": "~4.4.0", 19 | "vue-template-compiler": "^2.6.11" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-disqus/ff117cd1094feea6c84c5fecaaa53ee7c67e0dcf/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demo/public/posts.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Post title one", 5 | "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis neque et tellus efficitur sagittis. Praesent volutpat dui sed vehicula tristique. Donec magna augue, scelerisque varius arcu et, ullamcorper faucibus arcu. Nam ut nisi tortor. Pellentesque vestibulum varius nisl, non ullamcorper leo laoreet id. Donec quis molestie purus. Nullam dignissim dignissim ex, id sollicitudin justo venenatis porttitor." 6 | }, 7 | { 8 | "id": 2, 9 | "title": "Post title two", 10 | "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis neque et tellus efficitur sagittis. Praesent volutpat dui sed vehicula tristique. Donec magna augue, scelerisque varius arcu et, ullamcorper faucibus arcu. Nam ut nisi tortor. Pellentesque vestibulum varius nisl, non ullamcorper leo laoreet id. Donec quis molestie purus. Nullam dignissim dignissim ex, id sollicitudin justo venenatis porttitor." 11 | }, 12 | { 13 | "id": 3, 14 | "title": "Post title three", 15 | "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis neque et tellus efficitur sagittis. Praesent volutpat dui sed vehicula tristique. Donec magna augue, scelerisque varius arcu et, ullamcorper faucibus arcu. Nam ut nisi tortor. Pellentesque vestibulum varius nisl, non ullamcorper leo laoreet id. Donec quis molestie purus. Nullam dignissim dignissim ex, id sollicitudin justo venenatis porttitor." 16 | }, 17 | { 18 | "id": 4, 19 | "title": "Post title four", 20 | "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis neque et tellus efficitur sagittis. Praesent volutpat dui sed vehicula tristique. Donec magna augue, scelerisque varius arcu et, ullamcorper faucibus arcu. Nam ut nisi tortor. Pellentesque vestibulum varius nisl, non ullamcorper leo laoreet id. Donec quis molestie purus. Nullam dignissim dignissim ex, id sollicitudin justo venenatis porttitor." 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 23 | 24 | 76 | -------------------------------------------------------------------------------- /demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ktquez/vue-disqus/ff117cd1094feea6c84c5fecaaa53ee7c67e0dcf/demo/src/assets/logo.png -------------------------------------------------------------------------------- /demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import VueDisqus from '../vue-disqus' 5 | 6 | Vue.use(VueDisqus, { 7 | shortname: 'ktquez' 8 | }) 9 | Vue.config.productionTip = false 10 | 11 | new Vue({ 12 | router, 13 | render: h => h(App) 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /demo/src/mixins/nprogress.js: -------------------------------------------------------------------------------- 1 | export default { 2 | mounted () { 3 | let nprogress = null 4 | 5 | import('nprogress').then(module => { 6 | nprogress = module.default 7 | nprogress.configure({ showSpinner: false }) 8 | }) 9 | 10 | this.$router.beforeEach((to, from, next) => { 11 | if (nprogress) nprogress.start() 12 | next() 13 | }) 14 | 15 | this.$router.afterEach(() => { 16 | if (nprogress) nprogress.done() 17 | }) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | name: 'home', 9 | path: '/', 10 | component: () => import('@/views/Home') 11 | }, 12 | { 13 | name: 'blog', 14 | path: '/blog/:id', 15 | component: () => import('@/views/Post'), 16 | props: to => ({ post: to.meta.data }), 17 | meta: { 18 | fetch (id) { 19 | return new Promise((resolve, reject) => { 20 | fetch('/posts.json') 21 | .then(res => { 22 | if (res.ok) return res.json() 23 | throw new Error('Post not exists') 24 | }) 25 | .then(res => resolve(res[(id - 1)])) 26 | .catch(reject) 27 | }) 28 | } 29 | } 30 | } 31 | ] 32 | 33 | const router = new VueRouter({ 34 | mode: 'history', 35 | base: process.env.BASE_URL, 36 | routes 37 | }) 38 | 39 | router.beforeResolve(async (to, from, next) => { 40 | if (to.meta.fetch) to.meta.data = await to.meta.fetch(to.params.id) 41 | next() 42 | }) 43 | 44 | export default router 45 | -------------------------------------------------------------------------------- /demo/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /demo/src/views/Post.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 84 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/vue-disqus/', 3 | theme: 'default-vue-a11y', 4 | title: 'Vue Disqus', 5 | description: 'Vue component to integrate Disqus comments in your application, with support for SPA', 6 | head: [ 7 | ['meta', { name: 'theme-color', content: '#fff' }], 8 | ['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }] 9 | ], 10 | themeConfig: { 11 | home: false, 12 | repo: 'ktquez/vue-disqus', 13 | docsDir: 'docs', 14 | docsBranch: 'master', 15 | editLinks: true, 16 | locales: { 17 | '/': { 18 | editLinkText: 'Edit this page on GitHub', 19 | sidebar: [ 20 | { 21 | title: 'Getting Started', 22 | collapsable: false, 23 | children: [ 24 | '/', 25 | '/setup-v2.md', 26 | '/setup-v3.md', 27 | '/reset.md' 28 | ] 29 | }, 30 | { 31 | title: 'Components', 32 | collapsable: false, 33 | children: [ 34 | '/components/disqus.md', 35 | '/components/disqus-count.md' 36 | ] 37 | }, 38 | { 39 | title: 'How to', 40 | collapsable: false, 41 | children: [ 42 | '/howto/cdn.md', 43 | '/howto/nuxt.md', 44 | '/howto/vuepress.md' 45 | ] 46 | } 47 | ] 48 | } 49 | } 50 | } 51 | }; 52 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $contentMaxWidth = 960px 2 | $bgCode = #eee -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Vue component to integrate Disqus comments in your application, with support for SPA. 4 | 5 | ## Features 6 | 7 | - Events for all disqus callbacks; 8 | - Lazy load (by IntersectionObserver); 9 | - Support a Page and SSO config with props validator; 10 | - Update disqus automatically when language changes occur; 11 | - Possibility to use the reset method (using ref); 12 | - DisqusCount component; 13 | 14 | ## Contributing 15 | 16 | - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found; 17 | - Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md; 18 | - Send a pull request; 19 | 20 | ### Donate 21 | 22 |
23 | 24 | 25 | Buy Me A Coffee 26 | 27 | 28 | 29 | Support me on Ko-fi 30 | 31 | 32 | ::: tip 33 | If you want a faster communication, find me on twitter [@ktquez](https://twitter.com/ktquez) 34 | ::: 35 | 36 | ## License 37 | 38 | VueDisqus is open-sourced package licensed under the [MIT](https://github.com/ktquez/vue-disqus/blob/master/LICENSE) license 39 | -------------------------------------------------------------------------------- /docs/components/disqus-count.md: -------------------------------------------------------------------------------- 1 | # DisqusCount 2 | 3 | ## Usage 4 | 5 | You can import the `DisqusCount` component individually. 6 | 7 | ::: tip 8 | Comment count link text can be customized at your [Disqus Admin](https://ktquez.disqus.com/admin/settings/community/) 9 | ::: 10 | 11 | ```vue 12 | 27 | 28 | 38 | ``` 39 | 40 | ## Props 41 | 42 | ### shortname 43 | 44 | | Type | Required | 45 | | -------- | ----------------------------------------------------------- | 46 | | String | `It's required if the component is registered locally` | 47 | 48 | A shortname is the unique identifier assigned to a Disqus site and tells Disqus to load only your site's comments. 49 | 50 | ### identifier 51 | 52 | | Type | Required | 53 | | -------- | --------- | 54 | | String | `true` | 55 | 56 | It is used to retrieve the amount of comments from the entered identifier. 57 | 58 | ### url 59 | 60 | | Type | Required | 61 | | -------- | --------- | 62 | | String | `false` | 63 | 64 | The URL that will be used to retrieve the amount of comments. 65 | 66 | 67 | ### tag 68 | 69 | | Type | Default | 70 | | -------- | --------- | 71 | | String | `span` | 72 | 73 | If you want the element to be a link that takes you directly to the post's comments, just define the `a` tag. 74 | 75 | ::: warning 76 | If you define an `a` tag, the `url` prop will be required. 77 | ::: 78 | 79 | ```vue 80 | 85 | ``` 86 | 87 | **Output** 88 | 89 | ```html 90 | 94 | 4 Comments 95 | 96 | ``` 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /docs/components/disqus.md: -------------------------------------------------------------------------------- 1 | # Disqus 2 | 3 | ## Usage 4 | 5 | You can import the `Disqus` component individually. 6 | 7 | ```vue 8 | 16 | 17 | 27 | ``` 28 | 29 | ## Props 30 | 31 | ### shortname 32 | 33 | | Type | Required | 34 | | -------- | ----------------------------------------------------------- | 35 | | String | `It's required if the component is registered locally` | 36 | 37 | A shortname is the unique identifier assigned to a Disqus site and tells Disqus to load only your site's comments. 38 | 39 | ```vue 40 | 41 | ``` 42 | 43 | ::: tip 44 | Learn more about [shortname](https://help.disqus.com/en/articles/1717111-what-s-a-shortname) 45 | ::: 46 | 47 | ### pageConfig 48 | 49 | | Type | Required | 50 | | -------- | --------- | 51 | | Object | `false` | 52 | 53 | Page configuration properties are used as parameters for Disqus' behaviors and settings. 54 | 55 | | Key | Default | Description (Tells the Disqus service) 56 | | ---------------- | ------------------------------------ | --------------------------------------------------------- 57 | | url | `document.baseURI` | The URL of the current page. [See more](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables#thispageurl) 58 | | identifier | `$route.path` or `location.pathname` | How to identify the current page.
The identifier is used to look up the correct thread. [See more](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables#thispageidentifier) 59 | | title | `document.title` | The title of the current page. [See more](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables#thispagetitle) 60 | | category_id | | The category to be used for the current page. [See more](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables#thispagecategoryid) 61 | | slug | 62 | | api_key | 63 | | author_s3 | 64 | | remote_auth_s3 | 65 | | language | 66 | | integration | 67 | 68 | ```vue 69 | 74 | 75 | 86 | ``` 87 | 88 | ::: warning 89 | If you are using the vue-router always opt for HTML5 `history: mode`. 90 | ::: 91 | 92 | ### ssoConfig 93 | 94 | | Type | Required | 95 | | -------- | --------- | 96 | | Object | `false` | 97 | 98 | Single sign-on (SSO) is a protocol for authenticating an existing user to comment without registering for a global Disqus account. [See more](https://help.disqus.com/en/articles/1717064-single-sign-on) 99 | 100 | | Key | Description 101 | | ------ | ----------------------------------- 102 | | name | Your site's name. We will display it in the Post As window. 103 | | button | Address of the image that acts as a button. Disqus 2012 users, see style guide below. 104 | | icon | Address of the image that appears on the login modal's SSO tab. Favicons work well here 105 | | url | Address of your login page. 106 | | logout | Address of your logout page. 107 | | width | Width of the login popup window. *Default is 800*. 108 | | height | Height of the login popup window. *Default is 400*. 109 | 110 | ```vue 111 | 116 | 117 | 133 | ``` 134 | 135 | ::: tip 136 | Learn more about [Integrating Single Sign-On](https://help.disqus.com/en/articles/1717160-integrating-single-sign-on) 137 | ::: 138 | 139 | ### lang 140 | 141 | | Type | Required | 142 | | -------- | --------- | 143 | | String | `false` | 144 | 145 | Disqus currently supports dozens of languages, ranging from Arabic to Ukrainian. For a full list of supported languages, see the Disqus [project on Transifex](https://www.transifex.com/disqus/disqus/). 146 | 147 | ```vue 148 | 149 | ``` 150 | 151 | ::: tip 152 | e.g. French (Canada) => `fr_CA`, see more about [language codes](https://www.transifex.com/explore/languages/) 153 | ::: 154 | 155 | ### lazy 156 | 157 | | Type | Default | 158 | | -------- | ------- | 159 | | String | `true` | 160 | 161 | Apply lazy load in disqus script and embed. 162 | 163 | ### lazyConfig 164 | 165 | | Type | Default | 166 | | -------- | ----------------------------------------------------- | 167 | | Object | `{ root: null, rootMargin: '300px', threshold: 0.5 }` | 168 | 169 | Customize the options of the IntersectionObserver. 170 | 171 | 172 | ## Events 173 | 174 | `VueDisqus` registers events ($emit) for each callback available in the disqus API. 175 | 176 | | Event name | Description | 177 | | -------------- | ---------------------------------------------------------------------------------------- | 178 | | ready | When Disqus is ready.
(*This can be used to show a placeholder or loading indicator*). | 179 | | new-comment | When a new comment is posted.
(*This can be used to track new comments and replies, for example via Google Analytics*). | 180 | | before-comment | 181 | | init | 182 | | identify | 183 | | paginate | 184 | | pre-init | 185 | | pre-data | 186 | | pre-reset | 187 | | after-render | 188 | 189 | ```vue 190 | 195 | 196 | 206 | ``` -------------------------------------------------------------------------------- /docs/howto/cdn.md: -------------------------------------------------------------------------------- 1 | # CDN 2 | 3 | You can use `vue-disqus` easily through CDN. 4 | 5 | ```html 6 | 7 | 8 | 9 | ``` 10 | 11 | ```html 12 |
13 | 14 |
15 | 16 |
17 |
18 | ``` 19 | 20 | ::: tip 21 | You do not need to use `Vue.use` because the component is automatically installed globally. 22 | ::: -------------------------------------------------------------------------------- /docs/howto/nuxt.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js 2 | 3 | Create plugin file `plugins/disqus.js` 4 | 5 | ```js 6 | import Vue from 'vue' 7 | import VueDisqus from 'vue-disqus' 8 | 9 | Vue.use(VueDisqus, { 10 | shortname: 'your_shortname_disqus' 11 | }) 12 | ``` 13 | 14 | In config file `nuxt.config.js` 15 | 16 | ```js 17 | // ... 18 | plugins: [ 19 | '~/plugins/disqus' 20 | ] 21 | ``` 22 | 23 | Using in Vue file components 24 | 25 | ```vue 26 | 31 | ``` -------------------------------------------------------------------------------- /docs/howto/vuepress.md: -------------------------------------------------------------------------------- 1 | # Vuepress 2 | 3 | ::: tip 4 | VueDisqus is part of [@vuepress/plugin-blog](https://vuepress-plugin-blog.ulivz.com/) and just define `disqus` in the plugin [configuration options](https://vuepress-plugin-blog.ulivz.com/guide/getting-started.html#comment). 5 | ::: 6 | 7 | --- 8 | 9 | If you are not using the `@vuepress/plugin-blog`, you can use VueDisqus normally by importing the component locally. 10 | 11 | ```vue 12 | 20 | 21 | 31 | ``` 32 | 33 | Or importing globally into your `enhanceApp.js` 34 | 35 | ```js 36 | import VueDisqus from 'vue-disqus' 37 | 38 | export default ({ Vue }) => { 39 | Vue.use(VueDisqus, { 40 | shortname: 'your_shortname_disqus' 41 | }) 42 | } 43 | ``` 44 | 45 | ```vue 46 | 54 | ``` 55 | -------------------------------------------------------------------------------- /docs/reset.md: -------------------------------------------------------------------------------- 1 | # Reset 2 | 3 | You can use the reset method when you need Disqus to react to any changes that occur in the application, for example, a change in theme or color mode. 4 | 5 | ::: tip 6 | Learn more about [Disqus apparence](https://help.disqus.com/en/articles/1717201-disqus-appearance-tweaks) 7 | ::: 8 | 9 | ```vue 10 | 23 | 24 | 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/setup-v2.md: -------------------------------------------------------------------------------- 1 | # Setup Vue 2 2 | 3 | ## Installation 4 | 5 | ### For Vue 2 6 | ```bash 7 | npm install -s vue-disqus 8 | # or 9 | yarn add vue-disqus 10 | ``` 11 | 12 | ### For Vue 3 13 | ```bash 14 | npm install -s vue-disqus@next 15 | # or 16 | yarn add vue-disqus@next 17 | ``` 18 | 19 | ## Using 20 | 21 | ### Globally 22 | You can use it globally in your `main.js` 23 | 24 | ```js 25 | import Vue from 'vue' 26 | import VueDisqus from 'vue-disqus' 27 | 28 | Vue.use(VueDisqus, { 29 | shortname: 'your-shortname-disqus' 30 | }) 31 | ``` 32 | 33 | Using the component in the template 34 | 35 | ```vue 36 | 42 | ``` 43 | 44 | ### Locally 45 | 46 | You can import into your component: 47 | 48 | ```vue 49 | 60 | ``` 61 | 62 | Using the component in the template 63 | 64 | ```vue 65 | 71 | ``` 72 | 73 | ::: warning 74 | Shortname is required when using locally component 75 | ::: 76 | -------------------------------------------------------------------------------- /docs/setup-v3.md: -------------------------------------------------------------------------------- 1 | # Setup Vue 3 2 | 3 | ## Installation 4 | 5 | ```bash 6 | npm install -s vue-disqus@next 7 | # or 8 | yarn add vue-disqus@next 9 | ``` 10 | 11 | ## Using 12 | 13 | ### Globally 14 | You can use it globally in your `main.js` 15 | 16 | ```js 17 | import { createApp } from 'vue' 18 | import App from './App.vue' 19 | import VueDisqus from 'vue-disqus' 20 | 21 | createApp(App) 22 | .use(VueDisqus, { shortname: 'your_shortname_disqus' }) 23 | .mount('#app') 24 | ``` 25 | 26 | Using the component in the template 27 | 28 | ```html 29 | 35 | ``` 36 | 37 | ### Locally 38 | 39 | You can import into your component: 40 | 41 | ```vue 42 | 53 | ``` 54 | 55 | Using the component in the template 56 | 57 | ```vue 58 | 64 | ``` 65 | 66 | ::: warning 67 | **Shortname** is required when using locally component 68 | ::: 69 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import { PluginFunction } from 'vue' 2 | 3 | export interface VueDisqusOptions { 4 | shortname?: string 5 | } 6 | 7 | export interface VueDisqusInstance { 8 | shortname: string | null, 9 | reset: any 10 | } 11 | 12 | declare module 'vue/types/vue' { 13 | interface Vue { 14 | $disqus: VueDisqusInstance 15 | } 16 | } 17 | 18 | declare class VueDisqus 19 | { 20 | static install: PluginFunction 21 | } 22 | 23 | export default VueDisqus -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-disqus", 3 | "version": "4.0.1", 4 | "description": "Vue component to integrate Disqus comments in your application, with support for SPA", 5 | "main": "dist/vue-disqus.umd.js", 6 | "module": "dist/vue-disqus.esm.js", 7 | "unpkg": "dist/vue-disqus.min.js", 8 | "browser": { 9 | "./sfc": "src/vue-disqus.vue" 10 | }, 11 | "types": "index.d.ts", 12 | "scripts": { 13 | "dev": "rollup --config rollup.config.dev.js --watch", 14 | "build": "npm run build:umd & npm run build:es & npm run build:unpkg", 15 | "build:umd": "rollup --config rollup.config.prod.js --format umd --file dist/vue-disqus.umd.js", 16 | "build:es": "rollup --config rollup.config.prod.js --format es --file dist/vue-disqus.esm.js", 17 | "build:unpkg": "rollup --config rollup.config.prod.js --format iife --file dist/vue-disqus.min.js", 18 | "demo:dev": "cd demo && npm run serve", 19 | "demo:build": "cd demo && npm run build", 20 | "demo:publish": "cp ./demo/dist/index.html ./demo/dist/200.html && surge ./demo/dist https://vue-disqus.surge.sh/", 21 | "docs:dev": "./node_modules/.bin/vuepress dev docs --no-cache", 22 | "docs:build": "./node_modules/.bin/vuepress build docs --no-cache", 23 | "docs:publish": "gh-pages -d docs/.vuepress/dist", 24 | "release": "standard-version", 25 | "test:unit": "jest", 26 | "test:e2e": "node_modules/.bin/cypress run --headless", 27 | "test:e2e:open": "node_modules/.bin/cypress open ", 28 | "project:publish": "git push --tags origin master && npm run build && npm publish" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git+https://github.com/ktquez/vue-disqus.git" 33 | }, 34 | "keywords": [ 35 | "disqus", 36 | "vue", 37 | "vuejs", 38 | "blog", 39 | "vuepress", 40 | "comments" 41 | ], 42 | "author": "Alan Ktquez (https://github.com/ktquez/)", 43 | "license": "MIT", 44 | "bugs": { 45 | "url": "https://github.com/ktquez/vue-disqus/issues" 46 | }, 47 | "homepage": "https://github.com/ktquez/vue-disqus#readme", 48 | "devDependencies": { 49 | "@rollup/plugin-buble": "^0.21.3", 50 | "@rollup/plugin-commonjs": "^12.0.0", 51 | "@rollup/plugin-node-resolve": "^8.0.0", 52 | "@rollup/plugin-replace": "^2.3.2", 53 | "@vue/eslint-config-standard": "^5.1.2", 54 | "@vue/test-utils": "^1.0.3", 55 | "babel-eslint": "^10.1.0", 56 | "babel-jest": "^26.0.1", 57 | "chokidar": "^3.4.0", 58 | "cypress": "^4.7.0", 59 | "eslint": "^7.1.0", 60 | "eslint-plugin-cypress": "^2.11.1", 61 | "eslint-plugin-import": "^2.20.2", 62 | "eslint-plugin-node": "^11.1.0", 63 | "eslint-plugin-promise": "^4.2.1", 64 | "eslint-plugin-standard": "^4.0.1", 65 | "eslint-plugin-vue": "^6.2.2", 66 | "eslint-plugin-vuejs-accessibility": "^0.1.3", 67 | "gh-pages": "^3.0.0", 68 | "jest": "^26.0.1", 69 | "rollup": "^2.13.1", 70 | "rollup-plugin-eslint": "^7.0.0", 71 | "rollup-plugin-terser": "^6.1.0", 72 | "rollup-plugin-vue": "^5.1.9", 73 | "standard-version": "^8.0.0", 74 | "surge": "^0.21.3", 75 | "vue": "^2.6.11", 76 | "vue-template-compiler": "^2.6.11", 77 | "vuepress": "^1.5.0", 78 | "vuepress-theme-default-vue-a11y": "^0.1.15", 79 | "watchpack": "^1.6.1" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /rollup.config.dev.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import chokidar from 'chokidar' 4 | import { eslint } from 'rollup-plugin-eslint' 5 | import vue from 'rollup-plugin-vue' 6 | 7 | export default { 8 | input: 'src/index.js', 9 | watch: { 10 | chokidar, 11 | include: ['src/**'] 12 | }, 13 | plugins: [ 14 | resolve(), 15 | eslint({ 16 | include: './src/**' 17 | }), 18 | vue({ 19 | css: true, 20 | compileTemplate: true 21 | }), 22 | buble() 23 | ], 24 | output: [ 25 | { 26 | name: 'VueDisqus', 27 | file: 'demo/vue-disqus.js', 28 | format: 'umd', 29 | exports: 'named' 30 | } 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /rollup.config.prod.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble' 2 | import commonjs from '@rollup/plugin-commonjs' 3 | import replace from '@rollup/plugin-replace' 4 | import { terser } from 'rollup-plugin-terser' 5 | import vue from 'rollup-plugin-vue' 6 | 7 | export default { 8 | input: 'src/index.js', 9 | plugins: [ 10 | commonjs(), 11 | replace({ 12 | 'process.env.NODE_ENV': JSON.stringify('production') 13 | }), 14 | vue({ 15 | css: true, 16 | compileTemplate: true, 17 | template: { 18 | isProduction: true 19 | } 20 | }), 21 | buble(), 22 | terser() 23 | ], 24 | output: { 25 | name: 'VueDisqus', 26 | exports: 'named' 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/Disqus.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 156 | -------------------------------------------------------------------------------- /src/DisqusCount.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 74 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const ERROR_SHORTNAME_REQUIRED = 'Disqus shortname is required. (To resolve this, go to: https://ktquez.github.io/vue-disqus/setup.html#installation)' 2 | export const PAGE_CONFIG_KEYS = ['api_key', 'author_s3', 'category_id', 'identifier', 'integration', 'language', 'remote_auth_s3', 'slug', 'title', 'url'] 3 | export const SSO_KEYS = ['name', 'button', 'icon', 'url', 'logout', 'width', 'height'] 4 | export const CALLBACKS = ['afterRender', 'onInit', 'onIdentify', 'beforeComment', 'onNewComment', 'onPaginate', 'onReady', 'preData', 'preInit', 'preReset'] 5 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VueDisqus from './plugin' 2 | 3 | export default VueDisqus 4 | export { default as Disqus } from './Disqus.vue' 5 | export { default as DisqusCount } from './DisqusCount.vue' 6 | -------------------------------------------------------------------------------- /src/plugin.js: -------------------------------------------------------------------------------- 1 | import Disqus from './Disqus.vue' 2 | import DisqusCount from './DisqusCount.vue' 3 | 4 | export default function install (Vue, options = {}) { 5 | Vue.component('Disqus', Disqus) 6 | Vue.component('DisqusCount', DisqusCount) 7 | 8 | Vue.prototype.$disqus = { 9 | shortname: options.shortname || null, 10 | reset: null 11 | } 12 | } 13 | 14 | // auto install 15 | if (typeof window !== 'undefined' && typeof window.Vue !== 'undefined') { 16 | window.Vue.use(install) 17 | } 18 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export const getEmitName = str => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase().replace('on-', '') 2 | export const draf = (cb) => requestAnimationFrame(() => requestAnimationFrame(cb)) 3 | --------------------------------------------------------------------------------