Getting Started With Vue

Install

npm

npm install @happy.tech/vue

Setup

After installing, you will need to initialize the HappyChainPlugin.

import { HappyChainPlugin } from "@happy.tech/vue"
import { createApp } from "vue"
import App from "./App.vue"
 
createApp(App)
    .use(HappyChainPlugin)
    .mount("#app")

Usage

Getting the Active User with the Composition API

The useHappyWallet composable returns the current authenticated user's data as HappyUser, or undefined when no user is connected.

<script setup lang="ts">
import { useHappyWallet } from "@happy.tech/vue"
const { user } = useHappyWallet()
</script>
 
<template>
<div v-if="user"> 
    <h1>{{ user.name }}</h1>
    <h2>{{ user.address}}</h2>
    <img :src="user.avatar" />
</div>
</template>