├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── extend.ts ├── index.ts ├── module-options.ts ├── nuxt-module.ts ├── nuxt-plugin.ts └── vue-plugin.ts ├── tsconfig-cjs.json ├── tsconfig-esm.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### Node ### 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Dependency directories 10 | node_modules/ 11 | 12 | # Optional npm cache directory 13 | .npm 14 | 15 | # Optional eslint cache 16 | .eslintcache 17 | 18 | # Yarn Integrity file 19 | .yarn-integrity 20 | 21 | # dotenv environment variables file 22 | .env* 23 | 24 | # build output 25 | lib 26 | -------------------------------------------------------------------------------- /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 | ### [1.3.2](https://github.com/moritzsternemann/vue-plausible/compare/v1.3.1...v1.3.2) (2022-07-13) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * hotfix provide for nuxt 3 ([#21](https://github.com/moritzsternemann/vue-plausible/issues/21)) ([1bbb6da](https://github.com/moritzsternemann/vue-plausible/commit/1bbb6da33c44ffb9610bfd7209f8d58fb7232804)) 11 | 12 | ### [1.3.1](https://github.com/moritzsternemann/vue-plausible/compare/v1.3.0...v1.3.1) (2021-11-17) 13 | 14 | ## [1.3.0](https://github.com/moritzsternemann/vue-plausible/compare/v1.2.1...v1.3.0) (2021-11-17) 15 | 16 | 17 | ### Features 18 | 19 | * Options for auto pageviews and auto outbound tracking in Nuxt module ([8125f2b](https://github.com/moritzsternemann/vue-plausible/commit/8125f2bfa2931e7739d1648ab5fe33eb0d7bba30)) 20 | * Options for auto pageviews and auto outbound tracking in Vue plugin ([44dc898](https://github.com/moritzsternemann/vue-plausible/commit/44dc898304f436f9757da6b76188ba76567fdd2a)) 21 | 22 | ### [1.2.1](https://github.com/moritzsternemann/vue-plausible/compare/v1.2.0...v1.2.1) (2021-07-12) 23 | 24 | 25 | ### Bug Fixes 26 | 27 | * Add missing shim for PlausibleOptions in Nuxt runtime config ([cf310da](https://github.com/moritzsternemann/vue-plausible/commit/cf310daa1c936daa1a6e46ece08932d2d8f70002)) 28 | * Use Nuxt runtime config from within plugin instead of module ([#12](https://github.com/moritzsternemann/vue-plausible/issues/12)) ([351104b](https://github.com/moritzsternemann/vue-plausible/commit/351104bb1b912f155bd823a87ae95d0b71f1e108)) 29 | 30 | ## [1.2.0](https://github.com/moritzsternemann/vue-plausible/compare/v1.1.4...v1.2.0) (2021-07-12) 31 | 32 | 33 | ### Features 34 | 35 | * Use Nuxt runtime config ([#11](https://github.com/moritzsternemann/vue-plausible/issues/11)) ([bfcf70a](https://github.com/moritzsternemann/vue-plausible/commit/bfcf70a118faacb717cdacf46e0a6d6387721a97)), closes [moritzsternemann/vue-plausible#10](https://github.com/moritzsternemann/vue-plausible/issues/10) 36 | 37 | ### [1.1.4](https://github.com/moritzsternemann/vue-plausible/compare/v1.1.3...v1.1.4) (2021-03-18) 38 | 39 | 40 | ### Bug Fixes 41 | 42 | * inject esm plugin in nuxt environment ([#7](https://github.com/moritzsternemann/vue-plausible/issues/7)) ([cd7a3e6](https://github.com/moritzsternemann/vue-plausible/commit/cd7a3e65cabd01b2ee7ed998b358bc4d22764989)) 43 | 44 | ### [1.1.3](https://github.com/moritzsternemann/vue-plausible/compare/v1.1.2...v1.1.3) (2021-02-19) 45 | 46 | ### [1.1.2](https://github.com/moritzsternemann/vue-plausible/compare/v1.1.1...v1.1.2) (2021-01-18) 47 | 48 | 49 | ### Bug Fixes 50 | 51 | * Add missing default value for the apiHost setting of the nuxt plugin ([#4](https://github.com/moritzsternemann/vue-plausible/issues/4)) ([4436784](https://github.com/moritzsternemann/vue-plausible/commit/44367847c6c5d3034b7062759bef0ded28a22f70)) 52 | 53 | ### [1.1.1](https://github.com/moritzsternemann/vue-plausible/compare/v1.1.0...v1.1.1) (2020-12-16) 54 | 55 | ## [1.1.0](https://github.com/moritzsternemann/vue-plausible/compare/v1.0.1...v1.1.0) (2020-12-16) 56 | 57 | 58 | ### Features 59 | 60 | * Add support for the plausible configuration property in nuxt.config.js ([10e80d1](https://github.com/moritzsternemann/vue-plausible/commit/10e80d141118b5fbdab32957232f2d565099c809)), closes [#2](https://github.com/moritzsternemann/vue-plausible/issues/2) 61 | 62 | ### [1.0.1](https://github.com/moritzsternemann/vue-plausible/compare/v1.0.0...v1.0.1) (2020-12-08) 63 | 64 | 65 | ### Bug Fixes 66 | 67 | * Properly parse Nuxt module options ([09b7f0b](https://github.com/moritzsternemann/vue-plausible/commit/09b7f0bf512f961e4f3cee003a3e992439960e9e)) 68 | 69 | ## [1.0.0](https://github.com/moritzsternemann/vue-plausible/compare/v1.0.0-pre.1...v1.0.0) (2020-11-17) 70 | 71 | ## [1.0.0-pre.1](https://github.com/moritzsternemann/vue-plausible/compare/v1.0.0-pre.0...v1.0.0-pre.1) (2020-11-17) 72 | 73 | 74 | ### Bug Fixes 75 | 76 | * Use correct path for nuxt module meta import ([203b402](https://github.com/moritzsternemann/vue-plausible/commit/203b402cbdb691692197aac99a4cf307f642cd93)) 77 | 78 | ## 1.0.0-pre.0 (2020-11-15) 79 | 80 | 81 | ### Features 82 | 83 | * Add Nuxt plugin and module ([6278bf2](https://github.com/moritzsternemann/vue-plausible/commit/6278bf25d2eb9141c6b21635e9ac7437057cdeb1)) 84 | * Add Vue plugin ([0d152a3](https://github.com/moritzsternemann/vue-plausible/commit/0d152a3563f014d3f40865f601f943d2e337bbdf)) 85 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Moritz Sternemann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plausible Analytics for Vue.js and NuxtJS 2 | 3 | [![NPM](https://badgen.net/npm/v/vue-plausible)](https://www.npmjs.com/package/vue-plausible) 4 | 5 | *Vue.js plugin and NuxtJS module for Plausible Analytics* 6 | 7 | ## Installation 8 | Using [npm](https://docs.npmjs.com/cli/v6/commands/npm): 9 | ``` 10 | npm install vue-plausible 11 | ``` 12 | 13 | Using [yarn](https://yarnpkg.com/): 14 | ``` 15 | yarn add vue-plausible 16 | ``` 17 | 18 | ### Vue.js Plugin 19 | ```js 20 | import Vue from 'vue' 21 | import { VuePlausible } from 'vue-plausible' 22 | 23 | Vue.use(VuePlausible, { 24 | // see configuration section 25 | }) 26 | ``` 27 | To enable automatic page view tracking for SPAs, call the `enableAutoPageviews()` method. 28 | To enable automatic outbound link tracking, call the `enableAutoOutboundTracking()` method. 29 | 30 | ### NuxtJS Module 31 | ```ts 32 | // nuxt.config.js 33 | 34 | // optional when using nuxt.config.ts 35 | /// 36 | 37 | export default { 38 | modules: [ 39 | 'vue-plausible' 40 | ] 41 | } 42 | ``` 43 | 44 | #### Module Options 45 | 46 | Add a `plausible` section to `nuxt.config.js` to set the module options: 47 | ```ts 48 | // nuxt.config.js 49 | 50 | export default { 51 | plausible: { 52 | // see configuration section 53 | } 54 | } 55 | ``` 56 | 57 | #### Runtime Config 58 | 59 | To use dynamic environment variables in production, use [`publicRuntimeConfig`](https://nuxtjs.org/guide/runtime-config). 60 | Otherwise, the configuration options passed in `nuxt.config.js` will be read once and bundled during the build only. 61 | See the [configuration section](#configuration) for all available options. 62 | 63 | ```ts 64 | // nuxt.config.js 65 | 66 | export default { 67 | buildModules: [ 68 | 'vue-plausible' 69 | ], 70 | plausible: { // Use as fallback if no runtime config is available at runtime 71 | domain: process.env.PLAUSIBLE_DOMAIN 72 | }, 73 | publicRuntimeConfig: { 74 | plausible: { 75 | domain: process.env.PLAUSIBLE_DOMAIN, 76 | apiHost: process.env.PLAUSIBLE_API_HOST 77 | } 78 | } 79 | } 80 | ``` 81 | 82 | ## Usage 83 | `vue-plausible` is based on the official [`plausible-tracker`](https://github.com/plausible/plausible-tracker) package. 84 | 85 | ### Configuration 86 | Configuration options are inherited from `plausible-tracker`: 87 | | Option | Type | Description | Default | 88 | | ------ | ---- | ----------- | ------- | 89 | | domain | `string` | Your site's domain name, as declared by you in Plausible's settings. | `location.hostname` | 90 | | hashMode | `boolean` | Enables tracking based on URL hash changes. | `false` | 91 | | trackLocalhost | `boolean` | Enables tracking on *localhost*. | `false` | 92 | | apiHost | `string` | Plausible's API host to use. Change this if you are self-hosting. | `https://plausible.io` | 93 | ||||| 94 | | enableAutoPageviews | `boolean` | Enables automatic pageview tracking in SPAs. [Learn more](https://github.com/plausible/plausible-tracker#automatically-tracking-page-views) | `true` | 95 | | enableAutoOutboundTracking | `boolean` | Enables automatic outbound link click tracking. [Learn more](https://github.com/plausible/plausible-tracker#outbound-link-click-tracking) | `false` | 96 | 97 | ### Integration 98 | The `plausible-tracker` package provides various methods to track specific events, for example [`trackPageview()`](https://github.com/plausible/plausible-tracker/blob/master/README.md#automatically-tracking-page-views) and [`trackEvent()`](https://github.com/plausible/plausible-tracker/blob/master/README.md#tracking-custom-events-and-goals). You can find all the available methods and options in [the plausible-tracker documentation](https://github.com/plausible/plausible-tracker/blob/master/README.md). 99 | The `Plausible` instance is exposed to your Vue.js or NuxtJS app in the following ways: 100 | - `Vue.$plausible` (Vue.js only) 101 | - `this.$plausible` inside Vue components 102 | - `context.app.$plausible` inside asyncData, fetch, plugins, middleware, nuxtServerInit (NuxtJS only) 103 | - `this.$plausible` inside Vuex stores (NuxtJS only) 104 | 105 | ### Proxying 106 | To use proxying as described in the [Plausible 'Using a proxy' documentation](https://plausible.io/docs/proxy/introduction), you need to adjust the `apiHost` configuration option accordingly. 107 | Using vue-plausible only requires to proxy the `/api/event` endpoint since the frontend code is already bundled from `plausible-tracker`. 108 | 109 | Please note that event endpoint path always ends with `/api/event`. See the following example: 110 | ```ts 111 | plausible: { 112 | apiHost: 'https:///stats' // Reports events to https:///stats/api/event 113 | } 114 | ``` 115 | 116 | ### Opt out 117 | 118 | To exclude yourself from the analytics, `plausible-tracker` offers an opt-out mechanism that can be activated by setting the `localStorage.plausible_ignore` value to `true`. 119 | 120 | More information can be found in the [Plausible documentation](https://plausible.io/docs/excluding-localstorage). 121 | 122 | ## Author 123 | I'm [Moritz Sternemann](https://github.com/moritzsternemann), a computer-science student at [Technical University of Munich](https://www.tum.de/). 124 | - GitHub: [@moritzsternemann](https://github.com/moritzsternemann) 125 | - Email: [opensource@moritzsternemann.de](mailto:opensource@moritzsternemann.de) 126 | - Twitter: [@strnmn](https://twitter.com/strnmn) 127 | 128 | ## License 129 | This project is available under the MIT license. See the [LICENSE](LICENSE) file for more information. 130 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-plausible", 3 | "version": "1.3.2", 4 | "description": "Plausible analytics as Vue.js and NuxtJS plugins", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Moritz Sternemann", 8 | "url": "https://github.com/moritzsternemann", 9 | "email": "opensource@moritzsternemann.de" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/moritzsternemann/vue-plausible.git" 14 | }, 15 | "main": "./lib/cjs/index.js", 16 | "module": "./lib/esm/index.js", 17 | "types": "./lib/types/index.d.ts", 18 | "files": [ 19 | "lib/" 20 | ], 21 | "keywords": [ 22 | "analytics", 23 | "plausible", 24 | "plausible analytics", 25 | "tracking", 26 | "vue", 27 | "nuxt", 28 | "plugin" 29 | ], 30 | "scripts": { 31 | "build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json", 32 | "prepublishOnly": "npm run build", 33 | "release": "standard-version --sign", 34 | "release:pre": "standard-version --sign --prerelease pre" 35 | }, 36 | "dependencies": { 37 | "plausible-tracker": "^0.3.4" 38 | }, 39 | "devDependencies": { 40 | "@nuxt/types": "^2.15.0", 41 | "nuxt": "^2.15.0", 42 | "standard-version": "^9.0.0", 43 | "typescript": "^4.0.5", 44 | "vue": "^2.6.12", 45 | "vuex": "^3.5.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/extend.ts: -------------------------------------------------------------------------------- 1 | import Plausible from 'plausible-tracker' 2 | import { PlausibleModuleOptions } from './module-options' 3 | 4 | declare module 'vue/types/vue' { 5 | // this.$plausible inside Vue components 6 | interface Vue { 7 | $plausible: ReturnType 8 | } 9 | } 10 | 11 | declare module '@nuxt/types' { 12 | // module configuration in nuxt.config.ts 13 | interface NuxtOptions { 14 | plausible?: PlausibleModuleOptions 15 | } 16 | 17 | // nuxtContext.app.$plausible inside asyncData, fetch, plugins, middleware, nuxtServerInit 18 | interface NuxtAppOptions { 19 | readonly $plausible: ReturnType 20 | } 21 | 22 | // nuxtContext.$plausible 23 | interface Context { 24 | readonly $plausible: ReturnType 25 | } 26 | } 27 | 28 | declare module '@nuxt/types/config/runtime' { 29 | // runtime config in nuxt.config.ts 30 | interface NuxtRuntimeConfig { 31 | plausible?: PlausibleModuleOptions 32 | } 33 | } 34 | 35 | declare module 'vuex/types/index' { 36 | // this.$plausible inside Vuex stores 37 | interface Store { 38 | readonly $plausible: ReturnType 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import './extend' 2 | 3 | export { PlausibleModuleOptions } from './module-options' 4 | export { default as VuePlausible } from './vue-plugin' 5 | export { default } from './nuxt-module' 6 | -------------------------------------------------------------------------------- /src/module-options.ts: -------------------------------------------------------------------------------- 1 | import { PlausibleInitOptions } from 'plausible-tracker/build/module/lib/tracker' 2 | 3 | export declare type PlausibleModuleOptions = PlausibleInitOptions & { 4 | /** 5 | * If true, pageviews of SPAs that use JS-based routing will be automatically tracked. 6 | */ 7 | readonly enableAutoPageviews?: boolean 8 | /** 9 | * If true, outbound link clicks will be automatically tracked. 10 | */ 11 | readonly enableAutoOutboundTracking?: boolean 12 | } 13 | -------------------------------------------------------------------------------- /src/nuxt-module.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import { Module } from '@nuxt/types' 3 | import { PlausibleModuleOptions } from './module-options' 4 | 5 | // default options, fallback to plausible-tracker defaults 6 | const defaultOptions: PlausibleModuleOptions = { 7 | domain: undefined, 8 | hashMode: undefined, 9 | trackLocalhost: undefined, 10 | apiHost: undefined, 11 | enableAutoPageviews: true, 12 | enableAutoOutboundTracking: false 13 | } 14 | 15 | const PlausibleModule: Module = function (moduleOptions) { 16 | const options = { 17 | ...defaultOptions, 18 | ...this.options.plausible, 19 | ...moduleOptions 20 | } 21 | 22 | this.addPlugin({ 23 | src: path.resolve(__dirname, '../esm/nuxt-plugin.js'), 24 | mode: 'client', 25 | ssr: false, 26 | fileName: 'vue-plausible.client.js', 27 | options 28 | }) 29 | } 30 | 31 | export default PlausibleModule 32 | 33 | export const meta = require('../../package.json') 34 | -------------------------------------------------------------------------------- /src/nuxt-plugin.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from '@nuxt/types' 2 | import Plausible from 'plausible-tracker' 3 | import { PlausibleModuleOptions } from './module-options' 4 | 5 | const PlausiblePlugin: Plugin = (context, inject) => { 6 | const optionsDomain = '<%= options.domain %>' 7 | const optionsHashMode = '<%= options.hashMode %>' as any 8 | const optionsTrackLocalhost = '<%= options.trackLocalhost %>' as any 9 | const optionsApiHost = '<%= options.apiHost %>' 10 | const optionsEnableAutoPageviews = '<%= options.enableAutoPageviews %>' as any 11 | const optionsEnableAutoOutboundTracking = '<%= options.enableAutoOutboundTracking %>' as any 12 | 13 | let options = { 14 | hashMode: optionsHashMode === 'true', 15 | trackLocalhost: optionsTrackLocalhost === 'true', 16 | apiHost: optionsApiHost.length ? optionsApiHost : 'https://plausible.io', 17 | enableAutoPageviews: optionsEnableAutoPageviews === 'true', 18 | enableAutoOutboundTracking: optionsEnableAutoOutboundTracking === 'true', 19 | // Override plugin configuration with Nuxt Runtime config without re-building 20 | ...context.$config?.plausible 21 | } as PlausibleModuleOptions 22 | 23 | if (optionsDomain.length) { 24 | options = { 25 | ...options, 26 | domain: optionsDomain 27 | } 28 | } 29 | 30 | const plausible = Plausible(options) 31 | 32 | if (options.enableAutoPageviews === true) { 33 | plausible.enableAutoPageviews() 34 | } 35 | if (options.enableAutoOutboundTracking === true) { 36 | plausible.enableAutoOutboundTracking() 37 | } 38 | 39 | if (inject) { 40 | // Nuxt 2 41 | inject('plausible', plausible) 42 | } else { 43 | // Nuxt 3 44 | // @ts-ignore 45 | context.provide('plausible', plausible) 46 | } 47 | } 48 | 49 | export default PlausiblePlugin 50 | -------------------------------------------------------------------------------- /src/vue-plugin.ts: -------------------------------------------------------------------------------- 1 | import { PluginFunction } from 'vue' 2 | import Plausible from 'plausible-tracker' 3 | import { PlausibleModuleOptions } from './module-options' 4 | 5 | declare module 'vue/types/vue' { 6 | interface VueConstructor { 7 | $plausible: ReturnType 8 | } 9 | 10 | interface Vue { 11 | $plausible: ReturnType 12 | } 13 | } 14 | 15 | const VuePlausible: PluginFunction = (Vue, options) => { 16 | const plausible = Plausible(options) 17 | 18 | if (options?.enableAutoPageviews === true) { 19 | plausible.enableAutoPageviews() 20 | } 21 | if (options?.enableAutoOutboundTracking === true) { 22 | plausible.enableAutoOutboundTracking() 23 | } 24 | 25 | Vue.$plausible = plausible 26 | Vue.prototype.$plausible = plausible 27 | } 28 | 29 | export default VuePlausible 30 | -------------------------------------------------------------------------------- /tsconfig-cjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig-esm.json", 3 | "compilerOptions": { 4 | "module": "CommonJS", 5 | "declaration": false, 6 | "declarationDir": null, 7 | "declarationMap": false, 8 | "outDir": "./lib/cjs" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig-esm.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2015", 4 | "module": "ES2020", 5 | "moduleResolution": "node", 6 | "lib": [ 7 | "es2015", 8 | "dom" 9 | ], 10 | "strict": true, 11 | "esModuleInterop": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "experimentalDecorators": true, 14 | "noImplicitAny": true, 15 | "declaration": true, 16 | "declarationDir": "./lib/types", 17 | "declarationMap": true, 18 | "outDir": "./lib/esm" 19 | }, 20 | "include": [ 21 | "./src" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // VSCode currently doesn't support a tsconfig file with a different name. 3 | "extends": "./tsconfig-esm.json" 4 | } 5 | --------------------------------------------------------------------------------