Vue DAPP

Abstract

1. Introduction

Empower dapp developers with Vue integration for crypto wallets

2. Objective

A Vue.js library for connecting ethereum wallets.

This project demonstrates how TypeScript, Ethereum, Vue.js can be applied to a real-world Blockchain & Cloud Computing problem.

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/ethaccount/vue-dapp.git
cd vue-dapp

npm install pinia @vue-dapp/core @vue-dapp/modal

import { createPinia } from 'pinia'
app.use(createPinia())

<script lang="ts" setup>
import { BrowserWalletConnector, useVueDapp } from '@vue-dapp/core'
import { VueDappModal, useVueDappModal } from '@vue-dapp/modal'
import '@vue-dapp/modal/dist/style.css'

const { addConnectors, isConnected, wallet, disconnect } = useVueDapp()

addConnectors([new BrowserWalletConnector()])

function onClickConnectButton() {
	if (isConnected.value) disconnect()
	else useVueDappModal().open()
}
</script>

<template>
	<button @click="onClickConnectButton">{{ isConnected ? 'Disconnect' : 'Connect' }}</button>


status: {{ wallet.status }}


isConnected: {{ isConnected }}


error: {{ wallet.error }}




		<div>chainId: {{ wallet.chainId }}


address: {{ wallet.address }}

	</div>

	<VueDappModal dark auto-connect />
</template>

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add a CI/CD pipeline with GitHub Actions
• Deploy to a public test network or cloud free tier
• Add monitoring and cost alerts

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Why does this problem need a blockchain or cloud-native design?
2. Explain the smart contract / infrastructure components and how they interact.
3. How are gas costs or cloud costs kept under control?
4. How is the system secured (keys, IAM, access control)?
5. How would the solution scale to many more users?

9. Source Code & License

This project is developed by ethaccount and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.