Vue component for web3 connection and minting NFTs, developed by YOMI
https://yomi.digital
You can see a demo of vue-mint-button here:
https://vue-mint-button.yomi.digital
This component has been developed to facilitate the connection to Metamask, the minting of NFTs and consequently the transaction.
Through this component you can choose different networks for minting including:
- Ethereum
- Rinkeby
- Polygon
- Mumbai
- Ganache
In addition, a link to the transaction txid is provided.
ATTENTION: This component is only compatible with VueJS projects.
To use vue-mint-button, just follow this guide.
#npm
npm install --save vue-mint-button
#yarn
yarn add vue-mint-button
1. Import component locally:
import MintButton from "vue-mint-button"
/* ... */
components: {
MintButton,
},2. Component :
<template>
<div id="app">
<MintButton :ABI="abi" :price="price" :network="network" :method="method" :parameters="parameters" :explorerUrl="explorerUrl" :contract="contract" />
</div>
</template>Pay attention: For the correct functioning of vue-mint-button you will need to enter the following data:
- ABI (smart contract details)
- Network (ethereum, rinkeby, polygon, mumbai, ganache)
- Method (the minting function)
- Parameters (an array of parameters if needed for the method)
- Price (price per NFT)
- Contract (address of the smart contract)
- Url (txid link)
You can use them as you like, via props or within data().
<template>
<div id="app">
<MintButton :ABI="abi" :price="price" :network="network" :method="method" :parameters="parameters" :explorerUrl="explorerUrl" :contract="contract" />
</div>
</template>
<script>
import MintButton from "vue-mint-button";
export default {
name: "App",
components: {
MintButton,
},
data() {
return {
abi: [
{
inputs: [
{
internalType: "uint256",
name: "number",
type: "uint256",
},
{
internalType: "bool",
name: "isTest",
type: "bool",
},
],
name: "safeMint",
outputs: [],
stateMutability: "payable",
type: "function",
payable: true,
},
],
price: 0.1,
contract: "0x2A8555f5cd838356295637b336C90368EA1ED995",
network: "ethereum",
method: "safeMint",
parameters: []
};
},
};
</script>A live example can be found in demo folder.