Getting Started With Vue

The @happy.tech/vue package provides Vue-specific functionality, to be used instead or in addition to those provided in @happy.tech/core.

Install

Using a package manager

npm install @happy.tech/core @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

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>

More

Don't forget to check the "Getting started with Javascript/Typescript" page, as it includes features you'll want to use on top of the features in the Vue package.