productdevbookcom / v-plausible

Plausible Analytics module for Nuxt 3 or Vue 3

Plausible Vue

This module productdevbook team created.

Plausible integration for Nuxt

Features

• Zero-config required
• Auto-import composables usePlausible()

Setup

pnpm add v-plausible

yarn add v-plausible

pnpm add v-plausible

Usage Vue 3

import { createPlausible } from 'v-plausible/vue'

const plausible = createPlausible({
  init: {
    domain: 'domain.com',
    apiHost: 'https://host.com',
    trackLocalhost: true,
  },
  settings: {
    enableAutoOutboundTracking: true,
    enableAutoPageviews: true,
  },
  partytown: false,
})

app.use(plausible)

Usage Nuxt 3

export default defineNuxtConfig({
  modules: [
    'v-plausible'
  ],
  plausible: {
    init: {
      domain: 'localhost',
      apiHost: 'https://site.com',
      trackLocalhost: true
    },
    // If this is loaded you can make it true, https://github.com/nuxt-modules/partytown
    partytown: false,
  }
})

Composables

<script setup lang="ts">
const { trackEvent } = usePlausible()
</script>

<template>
  <div>
    <button @click="trackEvent('nuxt')">
      click me
    </button>
  </div>
</template>

<script setup lang="ts">
const { trackPageview } = usePlausible()
</script>

Init Default

Plausible() accepts some options that you may want to provide:

Option	Type	Description	Default
domain	string	Your site's domain, as declared by you in Plausible's settings	location.hostname
hashMode	bool	Enables tracking based on URL hash changes.	false
trackLocalhost	bool	Enables tracking on localhost.	false
apiHost	string	Plausible's API host to use. Change this if you are self-hosting.	'https://plausible.io'

Settings Default

Option	Type	Description	Default
enableAutoPageviews	bool	Your site's domain, as declared by you in Plausible's settings	true
enableAutoOutboundTracking	bool	Enables tracking based on URL hash changes.	false

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

MIT License © 2022-PRESENT productdevbook

💚 Credits

Nuxt 3 Plugin danielroe

Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.

Sponsors

License

MIT License © 2022-PRESENT productdevbook

v-plausible's Issues

Incorrect value for the "data-domain" attribute of the script in the header

Describe the bug

Currently the plugin is setting the script in the page header with the wrong value of the "data-domain" attribute. It is actually set as the url of the api set in the "plausible.init.apiHost" option of the plugin options and not in the "plausible.init.domain" option.

Because of this, the statistics do not appear in the plausible dashboard as this attribute has an incorrect value.

Script generate by plugin

Script generated by plausible dashboard

Options

  plausible: {
    init: {
      apiHost: 'https://analytics.naeko.moe',
      trackLocalhost: false,
      domain: 'https://next.naeko.moe',
    },
    settings: {
      enableAutoPageviews: true,
      enableAutoOutboundTracking: true,
    },
  }

Reproduction

https://next.naeko.moe

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 6.08 GB / 15.74 GB
  Binaries:
    Node: 20.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.5.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

can't install the packge with node16

Describe the bug

try ti install the package while you are using node16, you will get this error

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "=>3.3.0" of package "vue@=>3.3.0": Tags may not have any characters that encodeURIComponent encodes.

but it's working fine with node14

Reproduction

.

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 66.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.140
    Safari: 16.6

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Support for Plausible events

Clear and concise description of the problem

There currently doesn't seem to be any support for creating and sending Plausible events (https://plausible.io/docs/events-api).

I'm currently trying to migrate from vue-plausible because I need Vue 3 support, but can't find any information about how to send events like it is possible with vue-plausible

Suggested solution

Add a way of creating events from a function call on the v-plausible instance?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

POST information to wrong URL

Describe the bug

The POST call should be made to
host/api/event instead its making the call to host/stats/api/event because of that its not able to shoot insights on plausible

My plausbile init

const plausible = createPlausible({
  init: {
    domain: 'nimitsavant.me',
    apiHost: 'https://ana.idta.in/stats',
    trackLocalhost: true,
  },
  settings: {
    enableAutoOutboundTracking: true,
    enableAutoPageviews: true,
  },
  partytown: false,
})```

### Reproduction

Added normal https://ana.idta.in as apiHost and nimitsavant.me

### System Info

```Shell
System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-9300H CPU @ 2.40GHz
    Memory: 698.68 MB / 7.86 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.12 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.112)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency vue-tsc to v2

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vite to v4.5.3 [security]
• fix(deps): update dependency nuxt to v3.12.4 [security]
• chore(deps): update dependency vue-tsc to ^1.8.27
• chore(deps): update dependency @vitejs/plugin-vue to ^4.6.2
• chore(deps): update dependency typescript to ^5.6.2
• chore(deps): update root (@antfu/eslint-config, @nuxt/kit, @nuxt/module-builder, @nuxt/schema, @nuxt/test-utils, @vitejs/plugin-vue, @vue-macros/volar, @vue/test-utils, bumpp, defu, eslint, happy-dom, plausible-tracker, typescript, unconfig, unplugin-vue-macros, vite-plugin-dts, vue)
• fix(deps): update dependency vue to ^3.5.6
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @vitejs/plugin-vue to v5
• chore(deps): update root (major) (@antfu/eslint-config, @vitejs/plugin-vue, @vitest/coverage-v8, eslint, happy-dom, jsdom, vite-plugin-dts, vitest)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v3
• davelosert/vitest-coverage-report-action v2

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v3

npm

package.json

• @nuxt/kit ^3.7.4
• defu ^6.1.2
• plausible-tracker ^0.3.8
• @antfu/eslint-config 1.0.0-beta.18
• @nuxt/module-builder ^0.5.2
• @nuxt/schema ^3.7.4
• @nuxt/test-utils ^3.7.4
• @vitejs/plugin-vue ^4.4.0
• @vitest/coverage-v8 ^0.34.6
• @vue-macros/volar ^0.16.0
• @vue/test-utils ^2.4.1
• bumpp ^9.2.0
• eslint 8.50.0
• happy-dom ^12.8.0
• jsdom ^22.1.0
• typescript ^5.2.2
• unbuild ^2.0.0
• unconfig ^0.3.11
• unplugin-vue-macros ^2.6.1
• vite ^4.4.10
• vite-plugin-dts ^3.6.0
• vitest ^0.34.6
• vue ^3.3.4
• vue ^3.3.4

playground-nuxt/package.json

• nuxt ^3.7.4

playground-vue/package.json

• vue ^3.3.4
• @vitejs/plugin-vue ^4.3.4
• typescript ^5.2.2
• vite ^4.4.9
• vue-tsc ^1.8.15

---

• Check this box to trigger a request for Renovate to run again on this repository

Load plugin from component/App.vue

Clear and concise description of the problem

When my application starts up, I request a configuration file from the server which includes the Plausible configuration. Only after I've received that can I actually call createPlausible with the correct parameters. However, to use v-plausible, I need to load it via app.use(createPlausible({})) in the main.js file which is executed before I even load the configuration. Within my App.vue, from what I understand, I can no longer load the plugin, because I no longer have access to app.

Is there a way to set/change the plausible configuration within v-plausible after the plugin has been loaded?

Suggested solution

Provide a way to update the configuration of plausible after plugin load.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.