Usage #

The dapp object is available anywhere in your Vue project.

It is always safe to be accessed (but not to be used, see Safers).

The below headings will show you how to access it from different contexts :

From Javascript #

Using the Composition API #

If your are using the Vue's Composition API you can access the dapp object with a simple import statement :

import { dapp } from "tulipe";

function getSignerAddress() {
  return dapp.signer.address
}

Using the Options API #

If your are using the Vue's Options API you can access the dapp object without import at this.dapp :

export default {
  methods: {
    getSignerAddress() {
      return this.dapp.signer.address
    }
  },
}

However you can still import the dapp object explicitly if your prefer :

import { dapp } from "tulipe";

export default {
  methods: {
    getSignerAddress() {
      return dapp.signer.address
    }
  },
}

From templates #

In template you can access the dapp object without any imports as it has been registered as Vue's globalProperties :

<template>
  <dapp.signer.OnSafe>
    <p>Wallet address : {{ dapp.signer.address }}</p>
  </dapp.signer.OnSafe>
</template>

Again, if you prefer, you can still import it explicitly in <script> :

<script setup>
import { dapp } from "tulipe";
</script>

<template>
  <dapp.signer.OnSafe>
    <p>Wallet address : {{ dapp.signer.address }}</p>
  </dapp.signer.OnSafe>
</template>