vue-mint-button
v1.2.3
Published
VueJS component for web3 minting
Downloads
27
Readme
vue-mint-button
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.
Installation
#npm
npm install --save vue-mint-button
#yarn
yarn add vue-mint-button
Usage
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" :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)
- 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()
.
Example
<template>
<div id="app">
<MintButton :ABI="abi" :price="price" :network="network" :method="method" :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"
};
},
};
</script>