@archway-kit/vue
Vue components to interact with the Archway network
## Installation
Please note that **this library only supports Vue 3**.
```sh
npm install @archway-kit/vue
```
It also requires the Vue project to have the following tools installed:
- Tailwind CSS (https://tailwindcss.com/docs/guides/vite or https://tailwindcss.com/docs/guides/nuxtjs)
Then you have to add the following value to the content array in your `tailwind.config.js` file:
```js
content: [
// ...
"./node_modules/@archway-kit/vue/dist/*.js"
],
plugins: [
// ...
require('@archway-kit/tailwind-plugin')({
// ...plugin config
}),
]
```
See details about configuring the Archway tailwind plugin [here](../@archway-kit-tailwind-plugin/README.md).
## Documentation
### UserToolbar
Shows a button to connect your wallet (Keplr, Cosmostation, Leap, WalletConnect) and after a successful connection, it displays the connected account info and a disconnect button.
```html
```
Then the connected account can be accessed from the `useWallet()` composable:
```html
```
#### WalletConnect
To enable WalletConnect wallets in `UserToolbar`, install `walletconnectVuePlugin` from this package, providing you WalletConnect Project ID (you can create one [here](https://cloud.walletconnect.com)), along with some additional app-level config:
```ts
vueApp.use(walletconnectVuePlugin, {
// required
projectId: yourProjectId,
// optional
/** Custom WalletConnect relay URL */
relayUrl: 'wss://relay.walletconnect.com',
/** Your dapp metadata to show when connecting to a wallet */
appMetadata: {
name: 'MyDapp',
description: 'Your brand new super dapp on Archway!',
url: 'https://mydapp.com'
icons: ['https://mydapp.com/logo.png']
},
/** Methods to ask permission from wallet to call */
methods: ['cosmos_signDirect', 'cosmos_signAmino', 'cosmos_getAccounts'],
/** Enable additional console.log messages from WalletConnect */
debug: true,
/**
* Additional Chain IDs to request connection for.
* Useful for bridges when you may need to sign a tx on other chain using the same WalletConnect session
*/
chainIds: [/* "cosmoshub-1", "mocha-4" etc ... */]
});
```
### More
For full documentation about the Archway Network and its ecosystem, visit [Archway Docs](https://docs.archway.io).
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
[Discuss Archway Kit on GitHub](https://github.com/archway-network/archway-kit/discussions)