Web Monetization in VuePress

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" }]
    ],
    ...
}

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"
    }
}

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

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

Put your content here.

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.