Documentation

src/module.ts

@@ -1,19 +1,53 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, addImports, createResolver, useLogger } from '@nuxt/kit'
+import { defu } from 'defu'
+import { fileURLToPath } from 'url'
 
-// Module options TypeScript interface definition
-export interface ModuleOptions {}
+const logger = useLogger('nuxt:wideangle')
+
+export interface ModuleOptions {
+  siteId?: string
+  domain?: string
+  fingerprint?: boolean
+  supressDnt?: boolean
+  includeParams?: string[]
+  excludePaths?: string[]
+  ignoreHash?: boolean
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'wideangle',
-    configKey: 'myModule'
+    configKey: 'wideangle',
+    compatibility: {
+      nuxt: '^3'
+    }
+  },
+  defaults: {
+    domain: "stats.wideangle.co",
+    fingerprint: false,
+    supressDnt: false,
+    includeParams: [],
+    excludePaths: [],
+    ignoreHash: false
   },
-  // Default configuration options of the Nuxt module
-  defaults: {},
   setup (options, nuxt) {
+    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+    nuxt.options.build.transpile.push(runtimeDir)
+
+    logger.info(`Module options: ${JSON.stringify(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'))
+    nuxt.options.runtimeConfig.public.wideangle = defu(nuxt.options.runtimeConfig.public.wideangle, options);
+
+    addImports({
+      name: "useWaaEvent",
+      as: "useWaaEvent",
+      from: resolver.resolve('./runtime/composables/useWaaEvent')
+    });
+
+    addPlugin({
+      src: resolver.resolve('./runtime/plugin.client')
+    });
+
   }
 })

src/runtime/composables/useWaaEvent.ts

@@ -0,0 +1,10 @@
+import { useNuxtApp } from '#imports';
+
+export function useWaaEvent (name: string, params?: Record<string, any>) {
+  const waa = useNuxtApp().$waa
+  if(waa && waa.value) {
+    waa.value.dispatchEvent(name, params);
+  } else {
+    console.debug("[WAA] Wide Angle Analytics is not yest initialized");
+  }
+}

src/runtime/plugin.client.ts

@@ -0,0 +1,30 @@
+import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
+import { ref } from 'vue';
+import { initWideAngle } from 'wideangle-vuejs';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if(process.server) {
+    console.warn("[WAA] Plugin will not be enabled on server side.");
+    return;
+  }
+
+  const { wideangle: options } = useRuntimeConfig().public
+  console.debug(`[WAA] Initializing Wide Angle Analytics with: ${JSON.stringify(options)}`);
+  if(options.siteId == null) {
+    throw new Error("[WAA] Wide Angle Analytics requires the site ID.");
+  }
+  const waa = ref()
+  initWideAngle(options)
+    .then(waaInstance => {
+      waa.value = waaInstance;
+      console.debug("[WAA] Wide Angle Analytics instance available");
+    }).catch(e => { console.error("[WAA] Failed to load Wide Angle Plugin", e)});
+
+  return {
+    provide: {
+      waa
+    }
+  }
+})
+
+

src/runtime/plugin.ts

@@ -1,5 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  console.log('Plugin injected by wideangle!')
-})