$ npx create-vite-app <project-name>$ cd <project-name>$ npm install$ npm run dev

import { ref, onMounted } from "vue";export const useWebMonetization = () => {  const isMonetized = ref(false);  const isLoading = ref(true);  onMounted(() => {    if (!document.monetization) {      // No web monetization polyfill is installed (e.g. Coil).      isLoading.value = false;      isMonetized.value = false;      return;    }    // Check the value of document.monetization.state    // to see if a user is web monetized.    const { state } = document.monetization;    if (state === "stopped") {      // Not currently sending micropayments, nor trying to.      isLoading.value = false;      isMonetized.value = false;    }    // Determine when Web Monetization has started actively paying    document.monetization.addEventListener("monetizationstart", (event) => {      isLoading.value = false;      isMonetized.value = true;    });  });  return {    isMonetized,    isLoading,  };}

<template>    <div>      <div v-if="isLoading">        Loading...      </div>      <div v-else-if="isMonetized">        Some exclusive content!      </div>      <div v-else>        Show ads here!      </div>    </div></template><script>import { useWebMonetization } from "./use-web-monetization";export default {  setup() {    const { isLoading, isMonetized } = useWebMonetization();    return {      isLoading,      isMonetized,    };  }};</script>