Reactive

Appearance

Getting Started ​

Overview ​

@growae/reactive-vue provides Vue composables for interacting with the Aeternity blockchain. Built on top of @growae/reactive and TanStack Vue Query, it offers reactive refs, automatic caching, and loading states.

Quick Start ​

1. Install ​

bash
npm install @growae/reactive-vue @tanstack/vue-query
bash
yarn add @growae/reactive-vue @tanstack/vue-query
bash
pnpm add @growae/reactive-vue @tanstack/vue-query

2. Set Up Plugin ​

typescript
// main.ts
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import { ReactivePlugin } from '@growae/reactive-vue'
import { createConfig } from '@growae/reactive'
import { testnet } from '@growae/reactive/networks'
import { superhero } from '@growae/reactive/connectors'
import App from './App.vue'

const config = createConfig({
  networks: [testnet],
  connectors: [superhero()],
})

const app = createApp(App)
app.use(VueQueryPlugin)
app.use(ReactivePlugin, { config })
app.mount('#app')

3. Use Composables ​

vue
<script setup lang="ts">
import { useConnect, useBalance } from '@growae/reactive-vue'

const { connect, connectors } = useConnect()
const { data: balance } = useBalance({ address: 'ak_2dA...' })
</script>

<template>
  <div>
    <button
      v-for="connector in connectors"
      :key="connector.id"
      @click="connect({ connector })"
    >
      {{ connector.name }}
    </button>
    <p v-if="balance">Balance: {{ balance.ae }} AE</p>
  </div>
</template>

Default TTL ​

All transaction composables (useSpend, useSendTransaction, useCallContract) default to a TTL of 300 blocks (~15 hours). Override per-call:

typescript
const { mutate: send } = useSpend()

send({
  recipient: 'ak_...',
  amount: '1.0',
  ttl: 0, // no expiration
})

Next Steps ​