DEV Community

Vu Minh Thang
Vu Minh Thang

Posted on

Using Web Monetization with Gridsome

What I built

I built a developer portfolio website. I would like to hide sensitive information (e.g. contact information) from public.

Submission Category: Exciting Experiments


Link to Code

GitHub logo ittus / vue-developer-profile

Developer's portfolio built with Gridsome + VueJS

Developer profile

Developer profile's built with Gridsome + VueJS

Checkout demo

Gridsome + Vue


Buy Me A Coffee


  • Fork this repository
  • Run following command
npm install
npm run develop


npm run build


Most of information is pulled from profile.json file. Please change it to your information.

Portfolio section

Portfolio (or project) data is read from Markdown file in /src/data/projects folder. Feel free to use any Markdown syntax in there.



How I built it

Integrated Web Monetization (Coil) and Gridsome is quite easy.
First I created index.html and in src folder and add Coil meta's tag

<!DOCTYPE html>
<html ${htmlAttrs}>
    <meta name="monetization" content="$">
  <body ${bodyAttrs}>

Then I add the code to check if user is a paid user or not

  data: () => ({
    isPaid: false
  created() {
    if (process.isClient) {
      if (document.monetization) {
        document.monetization.addEventListener('monetizationstart', event => {
          if (document.monetization.state === 'started') {
            this.isPaid = true

and then I can use the isPaid flag in other conditional statement

    downloadResume() {
      if (!this.isPaid) {
         // do something
      } else {
        // do something else

You can see more detail implementation in my Github repository

Additional Resources/Info

Web Monetization is a nice idea for me. I hope it will be adopted soon by other developers and content creators. Using Coil, it's very easy to add it to your website.

Top comments (1)

sergix profile image
Peyton McGinnis • Edited