DEV Community


Posted on

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


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

screenshot of Coils browser extension monetizing content

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


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.


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:


It's just that simple.


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: '$',
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

query {
    metadata {

export default {
    metaInfo() {
        return {
            meta: [
                    key: 'monetization',
                    name: 'monetization',
                    content: this.$static.metadata.monetization,
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)