Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a option to enable disable the module #17

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,33 @@ That's it! You can now use Nuxt UTM in your Nuxt app ✨

## Usage

You can use ```useNuxtUTM``` composable to access the UTM object:
### Configuration

You can configure the module by passing options in your `nuxt.config.ts`:

```js
export default defineNuxtConfig({
modules: ["nuxt-utm"],
utm: {
enabled: true, // defaults to true
},
});
```

#### Options

- `enabled`: Boolean (default: `true`) - Controls whether UTM tracking is active. When set to `false`, the module won't track any UTM parameters or add any functionality to your app.

### Accessing UTM Data

You can use `useNuxtUTM` composable to access the UTM object:

```vue
<script setup>
const utm = useNuxtUTM();
</script>
```

> Remember: You don't need to import the composable because nuxt imports it automatically.

Alternatively, you can get the UTM information through the Nuxt App with the following instructions:
Expand Down Expand Up @@ -106,7 +126,7 @@ In the `$utm` array, each entry provides a `timestamp` indicating when the UTM p

### Devenv

You can take advantage of [devenv.sh](https://devenv.sh) to quickly create the development environment for this this project. Use it in combination with [direnv](https://direnv.net/) to quickly load all the environment while navigating into the project directory in your shell.
You can take advantage of [devenv.sh](https://devenv.sh) to quickly create the development environment for this this project. Use it in combination with [direnv](https://direnv.net/) to quickly load all the environment while navigating into the project directory in your shell.

```bash
# Install dependencies
Expand Down
9 changes: 8 additions & 1 deletion playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
export default defineNuxtConfig({
app: {
head: {
title: "Nuxt UTM Playground",
},
},
modules: ["../src/module"],
utm: {},
utm: {
enabled: true,
},
devtools: { enabled: true },
});
33 changes: 21 additions & 12 deletions src/module.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,32 @@
import { defineNuxtModule, addPlugin, addImports, createResolver } from "@nuxt/kit";
import {
defineNuxtModule,
addPlugin,
addImports,
createResolver,
} from "@nuxt/kit";

// Module options TypeScript interface definition
export interface ModuleOptions {}
export interface ModuleOptions {
enabled: boolean;
}

export default defineNuxtModule<ModuleOptions>({
meta: {
name: "utm",
configKey: "utm",
},
// Default configuration options of the Nuxt module
defaults: {},
setup() {
defaults: {
enabled: true,
},
setup(options) {
const resolver = createResolver(import.meta.url);

// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
addPlugin(resolver.resolve("./runtime/plugin"));
addImports({
name: 'useNuxtUTM',
from: resolver.resolve('runtime/composables'),
})
if (options.enabled) {
// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
addPlugin(resolver.resolve("./runtime/plugin"));
addImports({
name: "useNuxtUTM",
from: resolver.resolve("runtime/composables"),
});
}
},
});
12 changes: 12 additions & 0 deletions test/fixtures/disabled/app.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<div>
<h1>UTM Tracker</h1>
<pre>{{ $utm }}</pre>
</div>
</template>

<script setup>
import { useNuxtApp } from "nuxt/app";

const { $utm } = useNuxtApp();
</script>
8 changes: 8 additions & 0 deletions test/fixtures/disabled/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import UtmModule from "../../../src/module";

export default defineNuxtConfig({
modules: [UtmModule],
utm: {
enabled: false,
},
});
43 changes: 43 additions & 0 deletions test/integration.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,46 @@ describe("ssr", async () => {
});
});
});

describe("Module configuration", () => {
describe("when enabled", async () => {
await setup({
rootDir: fileURLToPath(new URL("./fixtures/basic", import.meta.url)),
server: true,
browser: true,
setupTimeout: 60000,
build: true,
});

it("should track UTM parameters", async () => {
const page = await createPage(
"/?utm_source=test_source&utm_medium=test_medium"
);
const rawData = await page.evaluate(() =>
window.localStorage.getItem("nuxt-utm-data")
);
const entries = JSON.parse(rawData ?? "[]");
expect(entries.length).toBeGreaterThan(0);
});
});

describe("when disabled", async () => {
await setup({
rootDir: fileURLToPath(new URL("./fixtures/disabled", import.meta.url)),
server: true,
browser: true,
setupTimeout: 60000,
build: true,
});

it("should not track UTM parameters", async () => {
const page = await createPage(
"/?utm_source=test_source&utm_medium=test_medium"
);
const rawData = await page.evaluate(() =>
window.localStorage.getItem("nuxt-utm-data")
);
expect(rawData).toBeNull();
});
});
});
Loading