Skip to main content

Vue Provider

Vue provider for Aioha that uses Vue's provide/inject to provide reactive states in your Vue components.

Installation​

pnpm i @aioha/providers @aioha/aioha

Usage​

  1. Initialize Aioha and setup provider at the root of your application. This is usually done in App.vue.
src/App.vue
<script setup lang="ts">
import { AiohaProvider } from '@aioha/providers/vue'
import { initAioha } from '@aioha/aioha'

const aioha = initAioha()
// ...
</script>

<template>
  <AiohaProvider :aioha="aioha">
    <TheRestOfYourApplication />
  </AiohaProvider>
</template>
  1. Use Aioha anywhere within AiohaProvider through the useAioha() composable.
src/components/AiohaPage.vue
<script setup lang="ts">
import { useAioha } from '@aioha/providers/vue'

const { aioha, user, provider, otherUsers } = useAioha()
// ...
</script>

<template>
  <p>Current User: {{user}}</p>
  <p>Current Provider: {{provider}}</p>
  <p v-for="(value, key) in otherUsers" :key="key">{{key}}: {{value}}</p>
</template>

Alternatively using Vue's inject() function:

src/components/AiohaPage.vue
<script setup lang="ts">
import { inject } from 'vue'
import { AiohaCtx, UserCtx, ProviderCtx, OtherUsersCtx } from '@aioha/providers/vue'

const aioha = inject(AiohaCtx)
const user = inject(UserCtx)
const provider = inject(ProviderCtx)
const otherUsers = inject(OtherUsersCtx)
// ...
</script>

<template>
  <p>Current User: {{user}}</p>
  <p>Current Provider: {{provider}}</p>
  <p v-for="(value, key) in otherUsers" :key="key">{{key}}: {{value}}</p>
</template>

Using Events​

Listen for events using lifecycle hooks within Vue's composition API.

src/components/YourComponent.vue
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useAioha } from '@aioha/providers/vue'

const { aioha } = useAioha()

const handler = () => {
  // handle your event here
}

onMounted(() => {
  aioha.on('sign_tx_request', handler)
})

onUnmounted(() => {
  aioha.off('sign_tx_request', handler)
})
// ...
</script>

SSR Apps​

If you are using a framework that uses SSR (server-side rendering) such as Nuxt, you may need to setup Aioha separately in a onMounted().

src/App.vue
<script setup lang="ts">
import { AiohaProvider } from '@aioha/providers/vue'
import { Aioha } from '@aioha/aioha'

const aioha = new Aioha()

onMounted(() => {
  // See options: https://aioha.dev/docs/core/usage#instantiation
  aioha.setup()
})
// ...
</script>

<template>
  <AiohaProvider :aioha="aioha">
    <TheRestOfYourApplication />
  </AiohaProvider>
</template>