nuxt-modules / plausible Goto Github PK

Hi there,
I have the module installed, but Im getting this on the dashboard,

Do I need to add the snippet as well? Or is it something that the module should handle?

<script defer data-domain="alvarosaburido.dev" src="https://plausible.io/js/script.js"></script>

Thanks

Is there a way to make the new revenue tracking work?

https://plausible.io/docs/ecommerce-revenue-tracking

When using this module and proxy the requests like advised in the documentation of plausible, it counts users x times as unique.

my configs:

plausible: {
    apiHost: "",
    trackLocalhost: false,
    autoOutboundTracking: false,
},

"rewrites": [
    {
      "source": "/js/script.js",
      "destination": "https://analytics.mydomain.de/js/plausible.js"
    },
    {
      "source": "/api/event",
      "destination": "https://analytics.mydomain.de/api/event"
    }
]

Due to the GDPR in Europe, it would be nice to have a way to no auto initiate the plugin until the user accepts the GDPR/Cookie Consent.

Is there a possibility to do it?

Should/Could I try to do a PR?

Thanks in advance

Hello,

I'm not sure if this feature must be here of within the plausible analytics but could be nice to remove utm query in order to avoid users to share links with a wrong query.

Hey @johannschopplich

We really like your module with the Nuxt team and actually are using it on nuxt.com.

Would you be up to move it to nuxt-modules organization? 😊

Plausible allows excluding specific pages from being tracked. Is it possible to use that feature with this module? I did not see anything in the module options.

Hello,

I'm trying to use useTrackEvent in my Nuxt package (which is based on Nuxt Module, inside my turborepo monorepo to be shared between my differents Nuxt3 apps).

I got this error: Cannot find name 'useTrackEvent'. in vscode but also in CLI.

How can i import this composable to fix the typing? From where?

Thank's in advance.

With autoOutboundTracking enabled Links marked with target="_blank" don't open in a new tab anymore.

We've encountered an issue integrating Plausible Analytics in a Nuxt 3 application, specifically during testing with vitest. Despite following documentation and trying various mocking strategies, we're unable to successfully mock useTrackPageview and related functionalities for our unit tests. This results in tests failing due to Nuxt instance availability errors or incorrect mock implementations.

Steps to Reproduce

• Integrate Plausible Analytics in a Nuxt 3 application.
• Implement unit testing for components or functionalities utilizing Plausible's useTrackPageview or useTrackEvent.
• Attempt to mock Plausible's functionalities using Vitest.

Expected Behavior

Mocks for Plausible's useTrackPageview and useTrackEvent should correctly simulate their functionalities, allowing for successful execution of unit tests without encountering Nuxt instance availability errors.

Actual Behavior

Tests fail with errors related to Nuxt instance availability or incorrect mock implementations. Specifically, we encountered errors like [nuxt] instance unavailable when trying to mock useTrackPageview.
Tried Solutions

Mocking @nuxtjs/plausible and #app (for useNuxtApp) globally in our Vitest setup file.
Adjusting mock implementations to closely match the signatures and behaviors of Plausible's functions.
Ensuring mocks for $plausible are included as part of the object returned by useNuxtApp.

Despite these efforts, the issue persists, indicating a potential gap in documentation or support for this specific use case.
Additional Context

Nuxt 3 version: 3.4.14
Vitest version: 1.2.2
@nuxtjs/plausible version: 0.2.4

Relevant configuration snippets and code samples:

// @vitest-environment happy-dom
import { describe, it, expect, vi } from "vitest";
import { mount } from "@vue/test-utils";
import { useHead } from "@unhead/vue";
import NewMessage from "@/pages/m/new.vue";
import type { PlausibleOptions, EventOptions } from "plausible-tracker";

// Mock Nuxt 3 app
vi.mock("#app", () => ({
  useNuxtApp: vi.fn(() => ({
    $config: {},
    $plausible: {
      trackLocalhost: false,
      autoPageviews: false,
      autoOutboundTracking: true,
      trackPageview: vi.fn(
        (eventData?: PlausibleOptions, options?: EventOptions) => {}
      ),
      trackEvent: vi.fn(
        (
          eventName: string,
          options?: EventOptions,
          eventData?: PlausibleOptions
        ) => {}
      ),
    },
  })),
}));

// Mock for @nuxtjs/plausible
vi.mock("@nuxtjs/plausible", () => ({
  useTrackPageview: vi.fn(
    (eventData?: PlausibleOptions, options?: EventOptions) => {}
  ),
  useTrackEvent: vi.fn(
    (
      eventName: string,
      options?: EventOptions,
      eventData?: PlausibleOptions
    ) => {}
  ),
}));

// Mock for useHead
vi.mock("@unhead/vue");
vi.mocked(useHead).mockImplementation(vi.fn());

describe("Creating NewMessage", () => {
  const wrapper = mount(NewMessage);

  it("renders without crashing", () => {
    expect(wrapper.exists()).toBe(true);
  });

  it("displays warning message when the textarea max limits reach", async () => {
    const textarea = wrapper.find("textarea");
    await textarea.setValue("0".repeat(256));
    expect(wrapper.find(".warning").exists()).toBe(true);
    expect(wrapper.find(".warning").text()).toBe("0 characters left.");
  });
});

Test Result:

 FAIL  tests/pages/m/new.spec.ts [ tests/pages/m/new.spec.ts ]
Error: [nuxt] instance unavailable
 ❯ Module.useNuxtApp node_modules/nuxt/dist/app/nuxt.js:218:13
    216|   Object.defineProperty(obj, key, { get: () => val });
    217| }
    218| export function defineAppConfig(config) {
       |             ^
    219|   return config;
    220| }
 ❯ Module.useTrackPageview node_modules/@nuxtjs/plausible/dist/runtime/composables/useTrackPageview.mjs:6:27

Request

Guidance on correctly mocking Plausible Analytics for unit tests in a Nuxt 3 application, or any updates to the documentation or package that could help address this issue.

Thank you

Hi there! I wanted to use Plausible in a Nuxt project and exclude some of my routes from being automatically tracked as pageview.

Since this is currently not possible with the plausible-tracker, I thought of setting autoPageviews: false and manually tracking them, excluding the paths I don't want to manually.

But where would be the best option to do that? In a Nuxt client middleware? Or in a route watcher in app.vue? Or maybe the page:finish hook? From the implementation of this nuxt module, it wasn't super clear for me on how to do it.

Appreciate your input!

Hi, awesome module!

But my questions is how would i intergrate Proxying Plausible through Vercel with this module
https://plausible.io/docs/proxy/guides/vercel

Thanks!

Hej Plausible Team,

I'm curious that I am totally missunderstanding your doc's but I'm currently running into issues with my .env setup.

Currently following is the base:

.env
NUXT_PUBLIC_PLAUSIBLE_DOMAIN="webpage.com" NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.webpage.com" //just examples
.env is placed in project's root. Other variables in .env file are working well like

NUXT_PUBLIC_SUPABASE_URL="" NUXT_PUBLIC_SUPABASE_KEY=""

in nuxt.config.ts (also root of the project)

modules: [
[...],
"@nuxtjs/plausible",
],

I tried different approaches like:

plausible: { domain: process.env.NUXT_PLAUSIBLE_DOMAIN, apiHost: process.env.NUXT_PLAUSIBLE_API_HOST, },

or accessing via runtimeConfig:

runtimeConfig: { public: { PLAUSIBLE_DOMAIN: process.env.NUXT_PUBLIC_PLAUSIBLE_DOMAIN, PLAUSIBLE_API_HOST: process.env.NUXT_PUBLIC_PLAUSIBLE_API_HOST, }, },

or even both combined.

If I place the URL and apiHost hardcoded in the plausible section it works fine. If I run my application with

yarn run start

Also fine (will be set in nuxt.public plausible section) ain't tracking because of settings to ignore localhost.

Building the docker image on server, it runs. Going trough a Gitlab Pipleline, these values are setted to default.

Please Can you help me?

Best Regards,

Chris

We could use to automatically handle 404 event.

• https://nuxt.com/docs/getting-started/error-handling#error-page
• https://plausible.io/docs/error-pages-tracking-404

(need to try if it could works)