> `@alphpro/web3-vue` is a series of renderless components and hooks to provide easy access to the Alephium blockchain
npm install @alphpro/web3-vue> @alphpro/web3-vue is a series of renderless components and hooks to provide easy access to the Alephium blockchain
``shinstall library
bun add @alphpro/web3-vue
Setup
Simply import components as needed from
or initialize the plugin to install the components globally`html
`~ or ~
ts
// main.ts
import AlphProWeb3 from "@alphpro/web3-vue";createApp(App)
.use(AlphProWeb3) // install components globally
.mount("#app");
`Components
$3
Alephium Provider should be placed on the furthest edge of your app that you will be using any Alephium features. For most dapps this means wrap your entire app with it for simplicity. Its responsible for resuming with auto-connect, and providing all children components with Alephium functionality
html
`$3
Alephium Connect can be used anywhere, any time (as long as its a child of AlephiumConnectionProvider). Through its slots API it provides connect, disconnect functionality
Now Add a Connect Button
html
>
`It also provides easy access to the currently connected account
html
Hello {{ account.address }}
Balance: {{ balances.balance }}
`How you want to show your connect options is completely up to you, one common pattern is to have the 'Connect' button to simply open a modal, and this modal is where the actual connection takes place. Several helper functions are available to make it easy to create such a modal.
html
connectExtension,
connectMobile,
connectDesktop,
connectWalletConnect
}"
>
`$3
When creating a dApp, execution of a TxScript is probably something you will encounter. Using the AlephiumExecute component you can provide the generated Artifact & Options and will have access to a simple
function. Managing signer/provider will be handled behind the scenes. a set of events will be emitted so that you can easily track transaction status`html
:fields="fields"
v-slot="{ execute }"
@txInitiated="handleNewTransaction"
@txConfirmed="handleConfirmedTransaction"
@txFailed="handleFailedTransaction"
>
`Hooks
If you require access to the blockchain from within
tags, a set of hooks are also provided for more raw access. These are what power the above components and are capable of managing more advanced use-cases when needed.`ts
import { useConnect, useAccount, useProvider } from "@alphpro/web3-vue";const { connect, disconnect, autoConnect } = useConnect();
const { account, balances, fetchBalances } = useAccount();
const { getProvider } = useProvider();
`Tips & Troubleshooting
$3
1. Balances will be fetched automatically on connection, and refreshed after every successful transaction. Generally you shouldn't need to manually fetch balances, however in some scenarios it may be desired and can be done by simply calling
from useAccount()2. access to the reactive
is available from useProvider() however due to management of vue internals, in some cases this will cause issues. The solution is to call the getProvider() getter on demand when needed, and this will return the users untouched provider which you can sign transactions manually for example.$3
Install Buffer
`sh
bun add buffer
`
Add it to your index.html
ts
import { Buffer } from "buffer";
window.Buffer = Buffer;
``