Set up Coil with Gridsome

Everybody hates ads

and creators hate adblockers...

There must be a middle ground to find. If you're like me, you're likely to lean towards a service like YouTube Red or whatever they're calling it now. You pay a monthly fee, no longer see advertisements, and that monthly fee is spread out evenly among the creators you watch based on view time.

I would argue that this is the most favorable solution out there for bloggers, for these reasons:

1. Seamless
2. Sleek
3. Simple

Seamless:

Why is it seamless? Well, I've already implemented it on my blog here, and you probably didn't know! Nothing has changed. With the Coil extension installed, you'll see it "saturate" and it will notify you that this content is "Web-Monetized". CSS-Tricks is the website featured in the example

This little green speech bubble let's you know your money is being put towards content you like.

Sleek:

I think sleek speaks for itself! I don't have to do anything! I don't have to give them an email, a password, a login, a social, nothing. It's already taken care of.

Simple:

I list simple because of how simple it is for bloggers and developers to implement. So let's go through that real quick here.

When you sign up as a creator with Coil, you have to choose a "Digital Wallet". I'm not a huge fan of online-crypto-whoozy-whatsits, so I signed up with Stronghold.

When you signup through the Coil creator portal, you are asked for the "payment pointer". Follow the instructions on Stronghold, or the digital wallet you signed up with, to get this before moving forward. Got it? Good!

Now its as simple as adding it to the head as a meta tag!

Bish! Bash! Bosh!

Here's mine if you want to confirm it's there: https://frankie.tech/

<meta
  name="monetization"
  content="$pay.stronghold.co/1a19885d42feebf4dc0b9efac6fa2fb3318"
/>

It's just that simple.

Gridsome

But we're developers. Sure we can just manually put things in the head of the index.html, but whats fun about that?! I agree, so here's how I did it with Gridsome. I've followed the guide on the Gridsome website, so do that first then come back.

First, I went into my gridsome.server.js, and add to my site variable:

const site = {
    ...
    monetization: '$pay.stronghold.co/1a19885d42feebf4dc0b9efac6fa2fb3318',
};

Then I load all of that along with all of the other "metadata" site variables using this exported function:

module.exports = function(api) {
    api.loadSource(async (store) => {
        for (let [key, value] of Object.entries(site)) {
            store.addMetadata(key, value);
        }
    });
};

Next, I opened up App.vue and added a static-query:

<static-query>
query {
    metadata {
        ...
        monetization
    }
}
</static-query>

<script>
export default {
    metaInfo() {
        return {
            meta: [
                ...
                {
                    key: 'monetization',
                    name: 'monetization',
                    content: this.$static.metadata.monetization,
                },
            ],
        };
    },
};
</script>

Now whenever Gridsome generates your site/blog/whatever, this monetization link will be automatically put in the head of your site.

Thats it! Seamless! Sleek! Simple! I hope more people will adopt technologies like Coil and that the Web-Monetization API is adopted into the Web Standards.

Some other relevant links:
CSS Tricks Article
Web Monetization in Vue App by Jasmin Virdi