Set up Coil with Gridsome
Tags: vue, javascript, webmonetization, gridsome
Published: 2020-05-28 01:19:41

## 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](https://css-tricks.com/site-monetization-with-coil-and-removing-ads-for-supporters/) is the website featured in the example_

![screenshot of Coils browser extension monetizing content](https://dev-to-uploads.s3.amazonaws.com/i/vgqptne9qb9rxqr6bx2o.png)

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](https://stronghold.co).

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/](https://frankie.tech/)

<pre><code>&lt;meta
  name="monetization"
  content="$pay.stronghold.co/1a19885d42feebf4dc0b9efac6fa2fb3318"
/>
</code></pre>

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:

```js
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:

```js
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`:

```js
<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](https://webmonetization.org/) is adopted into the Web Standards.

Some other relevant links:
[CSS Tricks Article](https://css-tricks.com/site-monetization-with-coil-and-removing-ads-for-supporters/)
[Web Monetization in Vue App](https://dev.to/jasmin/web-monetization-in-vue-app-using-plugin-4092) by [Jasmin Virdi](https://twitter.com/JASMINVIRDI)