DEV Community

loading...

Web Monetization in VuePress

shadowtime2000 profile image shadowtime2000 Originally published at h.shadowtime2000.com on ・1 min read

Web Monetization in VuePress

So, you have probably heard of web monetization right now. It allows you to monetize your website without ads. One important name in it is Coil. Coil is a browser extension which allows you to connect with that web monetization API and give money to the content creator. This article will show you how to use web monetization with VuePress.

With Config

This is a relatively simple way to do it. You just need to add this to the config:

module.exports = {
    ...,
    head: [
        ["meta", { name: "monetization", content: "$payoutprovider.com/myAccount" }]
    ],
    ...
}
Enter fullscreen mode Exit fullscreen mode

You would of course replace the payout provider and your account.

With Plugin

You can also use vuepress-plugin-web-monetization.

With this you can specify the payout provider and account in the plugin config:

plugins: {
    "web-monetization": {
        "address": "$payoutProvider.com/myAccount"
    }
}
Enter fullscreen mode Exit fullscreen mode

You can also then specify the payout provider in markdown files:

---
monetization: "$payoutProvider.com/myAccount"
---

Put your content here.
Enter fullscreen mode Exit fullscreen mode

The monetization address in the config will be used if it is not specified in the front matter.

Conclusion

We went over two different ways you can monetize your content using web monetization in VuePress:

  1. Simple head option in the config
  2. Using the plugin for more flexibility.

Discussion

pic
Editor guide