used vue mixin to implement the web monetization latest spec

enhanceApp.js

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import('vue').VueConstructor} Vue
+ * @param {{ Vue: Vue }} param0
+ */
+export default ({ Vue }) => {
+  /** @type {string} */
+  const LINK_SELECTOR = 'link[rel="monetization"]';
+
+  /**
+   * Creates or updates the monetization link tag
+   * @param {string} href - The payment pointer URL
+   */
+  const updateMonetizationLink = (href) => {
+    try {
+      // Remove existing link if present
+      const existingLink = document.querySelector(LINK_SELECTOR);
+      if (existingLink) {
+        existingLink.remove();
+      }
+
+      // Create and add new link
+      const link = document.createElement("link");
+      link.setAttribute("rel", "monetization");
+      link.setAttribute("href", href);
+      document.head.appendChild(link);
+    } catch (error) {
+      console.warn("Failed to update monetization link:", error);
+    }
+  };
+
+  Vue.mixin({
+    mounted() {
+      const address = this.$page?.frontmatter?.monetization || MONETIZATION_ADDRESS;
+
+      if (!address) return;
+
+      // Validate and format payment pointer
+      const formattedAddress = address.startsWith("$") ? `https://${address.slice(1)}` : address;
+
+      updateMonetizationLink(formattedAddress);
+    },
+
+    beforeDestroy() {
+      try {
+        const link = document.querySelector(LINK_SELECTOR);
+        if (link) {
+          link.remove();
+        }
+      } catch (error) {
+        console.warn("Failed to cleanup monetization link:", error);
+      }
+    },
+  });
+};

index.js

@@ -1,15 +1,11 @@
-module.exports = (options = {}, context) => {
-  return {
-    extendPageData ($page) {
-      // Should we use the address from the site config or from the frontmatter?
-      // For more better understandability it's referred to as 'address'
-      // ..in the config while 'monetization' in the frontmatter.
-      const address = $page.frontmatter.monetization || options.address
+const path = require("path");
 
-      // Add the meta tag
-      let meta = $page.frontmatter.meta || []
-      meta.push({ 'name': 'monetization', 'content': address })
-      $page.frontmatter.meta = meta
-    }
-  }
-}
+module.exports = (options = {}) => {
+  return {
+    define: {
+      MONETIZATION_ADDRESS: options.address || null,
+    },
+    // client-side app enhancement file is
+    enhanceAppFiles: path.resolve(__dirname, "enhanceApp.js"),
+  };
+};