Simplify API to access utm parameters (#27)

* feat(composables): create useNuxtUTM composable

* feat(module): add import for useNuxtUTM composable

* refactor(playground): use composable

* chore: update Readme

Author: hakenprog

README.md

@@ -53,14 +53,25 @@ That's it! You can now use Nuxt UTM in your Nuxt app ✨
 
 ## Usage
 
+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:
+
 ```vue
 <script setup>
 import { useNuxtApp } from "nuxt/app";
 const { $utm } = useNuxtApp();
 </script>
 ```
 
-The `$utm` will contain an array of UTM parameters collected for use. Each element in the array represents a set of UTM parameters collected from a URL visit, and is structured as follows:
+Regardless of the option you choose to use the module, the `utm' object will contain an array of UTM parameters collected for use. Each element in the array represents a set of UTM parameters collected from a URL visit, and is structured as follows
 
 ```js
 [

playground/app.vue

@@ -1,10 +1,10 @@
 <template>
   <div>Nuxt 3 UTM module playground!</div>
-  <pre>{{ $utm }}</pre>
+  <pre>{{ utm }}</pre>
 </template>
 
 <script setup>
-import { useNuxtApp } from "nuxt/app";
+import { useNuxtUTM } from '#imports';
 
-const { $utm } = useNuxtApp();
+const utm = useNuxtUTM();
 </script>

src/module.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, addPlugin, createResolver } from "@nuxt/kit";
+import { defineNuxtModule, addPlugin, addImports, createResolver } from "@nuxt/kit";
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {}
@@ -15,5 +15,9 @@ export default defineNuxtModule<ModuleOptions>({
 
     // 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'),
+    })
   },
 });

src/runtime/composables.ts

@@ -0,0 +1,6 @@
+import { useNuxtApp } from '#imports'
+
+export const useNuxtUTM = () => {
+  const nuxtApp = useNuxtApp()
+  return nuxtApp.$utm
+}