Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Mine Monero XMR Cryptocurrency With CoinHive In A Vue.js Application

Cryptocurrency and the blockchain has become a very popular subject lately with everyone trying to buy, sell, and even mine various types of coins. There are multiple ways to mine cryptocurrency, but did you know that you could mine directly from a web browser using JavaScript?

There is a popular library and service called CoinHive that lets you mine with JavaScript and get Monero XMR payouts over time. You could include this JavaScript library in web applications, mobile applications, and even desktop applications.

So why would you want to mine coins from a web browser? When it comes to the web, the most popular way for publishers to earn money is through advertisements. However, not everyone wants to see ads when their browsing the web. An alternative to this would be to have users mine for you while their session is open. This is just one of many use-cases.

We’re going to see how to create a Vue.js web application that mines Monero in the web browser of every visitor.

Before we get too involved in the coding, I wan’t to make something clear. Mining cryptocurrency from someones web browser without their knowledge can be considered shady or even malicious. CoinHive is not malicious or malware, but many developers use it to be malicious by creating malware. Think about what you want to accomplish and do something positive.

We plan to create a simple web application as seen in the image below.

Mine Monero with Vue.js and CoinHive

The HTML UI will update every second with the hashes found, hashes accepted, and the hashes per second. This is a very simple example of what you can do and present the user with. In many scenarios you won’t display anything because the user won’t need to know your statistics, only that it is happening.

Creating a Vue.js Web Application with the Vue CLI

While you don’t have to, we’re going to be creating our Vue.js web application using the Vue CLI. It makes life incredibly convenient when working with Vue.js. From the CLI, execute the following command:

vue init webpack vue-coinhive-project

The above command will create a project based on Webpack. The CLI will ask several questions and it is important to say no when prompted about the router and no when prompted about any testing. For this project it doesn’t really matter if you choose a compiler with runtime project or just a runtime project.

With the project created, we can now work towards including CoinHive and mining for XMR coins.

Including CoinHive in Your Project to Mine from the Web Browser

To be successful, you’re going to need a CoinHive account. Create an account and create a new site, which is essentially a new project to be tracked.

Keep track of the public application key because we’ll be using it within our Vue.js project. Before we open the project, we need to download the CoinHive SDK. You have two options when it comes to the SDK. You can get the version that prompts users about mining or the version that is silent. We’re going to be using the silent version.

Download the silent version and copy the coinhive.min.js file to the project’s static directory.

With the account in place and the library ready to go, we can focus on our application. Open the project’s index.html file and include the following HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>CoinHive Project</title>
        <style>
            body {
                background-color: #F0F0F0;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <script src="/static/coinhive.min.js"></script>
    </body>
</html>

Notice that we’ve included the coinhive.min.js file that we downloaded. Now open the project’s src/App.vue file and include the following:

<template>
    <div id="app">
        <p>h / s: {{ statistics.hashesPerSecond }}</p>
        <p>Total Hashes: {{ statistics.totalHashes }}</p>
        <p>Accepted Hashes: {{ statistics.acceptedHashes }}</p>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                miner: new CoinHive.Anonymous("Eomcy25ZfLfW5EZZqMNrEPxSNFgrRcEm", { throttle: 0.8 }),
                statistics: {
                    hashesPerSecond: 0,
                    totalHashes: 0,
                    acceptedHashes: 0
                }
            }
        },
        mounted() {
            this.miner.start();
            this.updateStatistics();
        },
        methods: {
            updateStatistics() {
                setTimeout(() => {
                    this.statistics = {
                        hashesPerSecond: this.miner.getHashesPerSecond(),
                        totalHashes: this.miner.getTotalHashes(),
                        acceptedHashes: this.miner.getAcceptedHashes()
                    }
                    this.updateStatistics();
                }, 1000);
            }
        }
    }
</script>

<style>
    #app {
        text-align: center;
        color: #555555;
        margin: auto;
        margin-top: 60px;
        background-color: #FFFFFF;
        padding: 20px;
        width: 986px;
        border: 2px solid #555555;
    }
</style>

There is a lot going on in the above code so let’s break it down by Vue block, starting with the <script> block.

<script>
    export default {
        name: 'app',
        data() {
            return {
                miner: new CoinHive.Anonymous("Eomcy25ZfLfW5EZZqMNrEPxSNFgrRcEm", { throttle: 0.8 }),
                statistics: {
                    hashesPerSecond: 0,
                    totalHashes: 0,
                    acceptedHashes: 0
                }
            }
        },
        mounted() {
            this.miner.start();
            this.updateStatistics();
        },
        methods: {
            updateStatistics() {
                setTimeout(() => {
                    this.statistics = {
                        hashesPerSecond: this.miner.getHashesPerSecond(),
                        totalHashes: this.miner.getTotalHashes(),
                        acceptedHashes: this.miner.getAcceptedHashes()
                    }
                    this.updateStatistics();
                }, 1000);
            }
        }
    }
</script>

In the data method we are initializing our component variables. The miner variable will be our anonymous miner with our public application key and a set throttle. The higher the throttle, the less stress people will experience on their CPUs. For example, 0.8 throttle means 80% CPU idle and 20% CPU load. Play around with the values so your users are kept happy.

The updateStatistics method will update our variables every second. When the statistics are updated, the updateStatistics method is called recursively.

When the application mounts, the mounted method is called which starts the miner and starts updating the statistics. Not much JavaScript was involved to get mining to happen from our web browser.

Now let’s jump into the <template> block of our component:

<template>
    <div id="app">
        <p>h / s: {{ statistics.hashesPerSecond }}</p>
        <p>Total Hashes: {{ statistics.totalHashes }}</p>
        <p>Accepted Hashes: {{ statistics.acceptedHashes }}</p>
    </div>
</template>

In the HTML we are only displaying the content of our variables that are being updated every second. Nothing complicated is happening in the HTML.

Run the application and see the results in your CoinHive dashboard.

Conclusion

You just saw how to mine Monero XMR coins from a web browser with CoinHive. Having visitors mine coins for you is a great alternative to showing advertisements or requesting payments. Everyone who visits your application works for you until they leave. It is a great exchange for time and resources.

Take caution when implementing mining in your web applications. Make sure your users are aware that it is happening otherwise it can seem malicious.

Interested in creating your own cryptocurrency wallet with Vue.js? Check out my previous article titled, Create a Cross-Platform Desktop Ripple XRP Wallet with Vue.js and Electron.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Subscribe

Subscribe to my newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

The Polyglot Developer
The Polyglot Developer

Support This Site

Close

Subscribe To Our Newsletter

Stay up to date on the latest in web, mobile, and game development, plus receive exclusive content by subscribing to The Polyglot Developer newsletter.

Unsubscribe at any time without hassle.