@archway-kit/vue v0.4.28

Installation

Please note that this library only supports Vue 3.

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:

  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.

Documentation

UserToolbar

Shows a button to connect your wallet (Keplr, Cosmostation or Leap) and after a successful connection, it displays the connected account info and a disconnect button.

<script setup lang="tsx">
  import { ConstantineChainInfo } from '@archway-kit/wallet';
</script>

<template>
  <UserToolbar :chain-info="ConstantineChainInfo" />
</template>

Then the connected account can be accessed from the useWallet() hook, and the authentication status from the useAuth() hook:

<script setup lang="tsx">
  import { useWallet } from '@archway-kit/vue';

  const { isAuthenticated, address, name, connectedWallet, isLoading, disconnect } = useWallet();
</script>

The UserToolbar component also receives the following props for further customization:

• showWalletName: { type: Boolean, default: true }
• connectButtonClassName: { type: String, default: '' }
• disconnectButtonClassName: { type: String, default: '' }
• primaryButtonClassName: { type: String, default: '' }
• cancelButtonClassName: { type: String, default: '' }

More

For full documentation about the Archway Network and its ecosystem, visit Archway Docs.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Archway Kit on GitHub