From f1ca0985b3741b9b6d7266bb85c252de75090a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Sat, 18 May 2024 10:20:26 -0300
Subject: [PATCH 1/6] chore(playground): add a title to the playground app.
---
playground/nuxt.config.ts | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index d725d31..9e8f45d 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,4 +1,9 @@
export default defineNuxtConfig({
+ app: {
+ head: {
+ title: "Nuxt UTM Playground",
+ },
+ },
modules: ["../src/module"],
utm: {},
devtools: { enabled: true },
From 2e4665672a57c1143aa451440ce62add63091b29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Sat, 18 May 2024 11:17:26 -0300
Subject: [PATCH 2/6] feat(config): add option to enable disable the module.
---
playground/nuxt.config.ts | 4 +++-
src/module.ts | 33 +++++++++++++++++++++------------
2 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 9e8f45d..101d727 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -5,6 +5,8 @@ export default defineNuxtConfig({
},
},
modules: ["../src/module"],
- utm: {},
+ utm: {
+ enabled: true,
+ },
devtools: { enabled: true },
});
diff --git a/src/module.ts b/src/module.ts
index 90d6cbf..3e60f05 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -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, nuxt) {
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"),
+ });
+ }
},
});
From 56797dfd4e9da94a108fc73857df250c2c2e1258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Thu, 21 Nov 2024 12:20:08 -0300
Subject: [PATCH 3/6] test: add module enable/disable tests
- Add test cases to verify UTM tracking behavior when module is enabled
- Add test cases to verify UTM tracking is disabled when module is configured off
- Create new test fixture for disabled module configuration
This ensures the module's `enabled` configuration option works as expected.
---
test/fixtures/disabled/app.vue | 12 +++++++++
test/fixtures/disabled/nuxt.config.ts | 8 ++++++
test/integration.test.ts | 37 +++++++++++++++++++++++++++
3 files changed, 57 insertions(+)
create mode 100644 test/fixtures/disabled/app.vue
create mode 100644 test/fixtures/disabled/nuxt.config.ts
diff --git a/test/fixtures/disabled/app.vue b/test/fixtures/disabled/app.vue
new file mode 100644
index 0000000..4d31aac
--- /dev/null
+++ b/test/fixtures/disabled/app.vue
@@ -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>
diff --git a/test/fixtures/disabled/nuxt.config.ts b/test/fixtures/disabled/nuxt.config.ts
new file mode 100644
index 0000000..dbca3cd
--- /dev/null
+++ b/test/fixtures/disabled/nuxt.config.ts
@@ -0,0 +1,8 @@
+import UtmModule from "../../../src/module";
+
+export default defineNuxtConfig({
+ modules: [UtmModule],
+ utm: {
+ enabled: false,
+ },
+});
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 0a642ba..0f850b3 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -113,3 +113,40 @@ describe("ssr", async () => {
});
});
});
+
+describe("Module configuration", () => {
+ describe("when enabled", async () => {
+ await setup({
+ rootDir: fileURLToPath(new URL("./fixtures/basic", import.meta.url)),
+ browser: 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)),
+ browser: 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();
+ });
+ });
+});
From 8ad69611d03c1d8b490e12ff6530b04fe03ce8b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Thu, 21 Nov 2024 12:22:15 -0300
Subject: [PATCH 4/6] docs: add module configuration docs to README
---
README.md | 24 ++++++++++++++++++++++--
1 file changed, 22 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 049530f..98efdfc 100644
--- a/README.md
+++ b/README.md
@@ -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:
@@ -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
From 3bab6162f9657bf9636cb4e8a89d61389d8a8967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Thu, 21 Nov 2024 12:26:03 -0300
Subject: [PATCH 5/6] fix: remove unused nuxt parameter in module setup
---
src/module.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/module.ts b/src/module.ts
index 3e60f05..c7c234f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -17,7 +17,7 @@ export default defineNuxtModule<ModuleOptions>({
defaults: {
enabled: true,
},
- setup(options, nuxt) {
+ setup(options) {
const resolver = createResolver(import.meta.url);
if (options.enabled) {
From 3a7699d4aee0e56d4bbbe7ace8d6544696eb1b80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sadjow=20Le=C3=A3o?= <sadjow@gmail.com>
Date: Thu, 21 Nov 2024 12:30:19 -0300
Subject: [PATCH 6/6] fix: configure test environment for browser tests
- Enable server option in test setup
- Add setupTimeout to prevent timeouts during test setup
- Enable build option to ensure Nuxt app is built
- Keep browser testing enabled for localStorage tests
---
test/integration.test.ts | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/test/integration.test.ts b/test/integration.test.ts
index 0f850b3..e1d7e86 100644
--- a/test/integration.test.ts
+++ b/test/integration.test.ts
@@ -118,7 +118,10 @@ 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 () => {
@@ -136,7 +139,10 @@ describe("Module configuration", () => {
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 () => {