> For the complete documentation index, see [llms.txt](/llms.txt)

# Vue

Set up dApp Kit in a Vue application.



This guide walks you through integrating dApp Kit into a Vue application using Web Components and
direct store access.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm i @mysten/dapp-kit-core @mysten/sui @nanostores/vue
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mysten/dapp-kit-core @mysten/sui @nanostores/vue
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mysten/dapp-kit-core @mysten/sui @nanostores/vue
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mysten/dapp-kit-core @mysten/sui @nanostores/vue
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Setup [#setup]

### Step 1: Create a dApp Kit instance [#step-1-create-a-dapp-kit-instance]

```ts
// src/dapp-kit.ts
import { createDAppKit } from '@mysten/dapp-kit-core';
import { SuiGrpcClient } from '@mysten/sui/grpc';

const GRPC_URLS = {
	testnet: 'https://fullnode.testnet.sui.io:443',
};

export const dAppKit = createDAppKit({
	networks: ['testnet'],
	createClient: (network) => new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] }),
});
```

### Step 2: Register web components [#step-2-register-web-components]

Import the web components in your app entry point:

```ts
// src/main.ts
import '@mysten/dapp-kit-core/web';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
```

### Step 3: Use the connect button [#step-3-use-the-connect-button]

```vue
<script setup lang="ts">
import { dAppKit } from './dapp-kit';
</script>

<template>
	<div>
		<h1>My Sui dApp</h1>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />
	</div>
</template>
```

### Step 4: Access connection state [#step-4-access-connection-state]

Use `@nanostores/vue` for reactive state:

```vue
<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { dAppKit } from './dapp-kit';

const connection = useStore(dAppKit.stores.$connection);
const network = useStore(dAppKit.stores.$currentNetwork);
</script>

<template>
	<div>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />

		<div v-if="connection.account">
			<p>Wallet: {{ connection.wallet?.name }}</p>
			<p>Address: {{ connection.account.address }}</p>
			<p>Network: {{ network }}</p>
		</div>
		<p v-else>Connect your wallet to get started</p>
	</div>
</template>
```

### Step 5: Execute transactions [#step-5-execute-transactions]

```vue
<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';
import { dAppKit } from './dapp-kit';

const connection = useStore(dAppKit.stores.$connection);

async function handleTransfer() {
	const tx = new Transaction();
	tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], connection.value.account!.address);

	try {
		const result = await dAppKit.signAndExecuteTransaction({ transaction: tx });

		if (result.FailedTransaction) {
			throw new Error(`Transaction failed: ${result.FailedTransaction.status.error?.message}`);
		}

		alert(`Transaction: ${result.Transaction.digest}`);
	} catch (error) {
		console.error('Transaction failed:', error);
	}
}
</script>

<template>
	<div>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />

		<button v-if="connection.account" @click="handleTransfer">Send Transaction</button>
	</div>
</template>
```

## Complete example [#complete-example]

```vue
<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { Transaction, coinWithBalance } from '@mysten/sui/transactions';
import { dAppKit } from './dapp-kit';

const connection = useStore(dAppKit.stores.$connection);
const network = useStore(dAppKit.stores.$currentNetwork);

async function handleTransfer() {
	if (!connection.value.account) return;

	const tx = new Transaction();
	tx.transferObjects([coinWithBalance({ balance: 1_000_000 })], connection.value.account.address);

	try {
		const result = await dAppKit.signAndExecuteTransaction({ transaction: tx });

		if (result.FailedTransaction) {
			throw new Error(`Transaction failed: ${result.FailedTransaction.status.error?.message}`);
		}

		alert(`Transaction successful: ${result.Transaction.digest}`);
	} catch (error) {
		console.error('Transaction failed:', error);
	}
}
</script>

<template>
	<div class="app">
		<h1>My Sui dApp</h1>
		<mysten-dapp-kit-connect-button :instance="dAppKit" />

		<div v-if="connection.account" class="wallet-info">
			<p>Wallet: {{ connection.wallet?.name }}</p>
			<p>Address: {{ connection.account.address }}</p>
			<p>Network: {{ network }}</p>
			<button @click="handleTransfer">Send Test Transaction</button>
		</div>
		<p v-else>Connect your wallet to get started</p>
	</div>
</template>
```

## Web components [#web-components]

Vue works with dApp Kit's Web Components through property binding:

| Component      | Usage                                                                  |
| -------------- | ---------------------------------------------------------------------- |
| Connect Button | `<mysten-dapp-kit-connect-button :instance="dAppKit" />`               |
| Connect Modal  | `<mysten-dapp-kit-connect-modal :instance="dAppKit" :open="isOpen" />` |

See [Web Components](/dapp-kit/web-components/connect-button) for full documentation.

## Available stores [#available-stores]

Access these stores through `dAppKit.stores`:

| Store             | Description                                       |
| ----------------- | ------------------------------------------------- |
| `$connection`     | Connection state with wallet, account, and status |
| `$currentNetwork` | Current network string                            |
| `$currentClient`  | SuiClient for current network                     |
| `$wallets`        | List of available wallets                         |

See [State Management](/dapp-kit/state) for full documentation.

## Example application [#example-application]

See the complete
[Vue example](https://github.com/MystenLabs/ts-sdks/tree/main/packages/dapp-kit/examples/vue/simple)
on GitHub.

## Next steps [#next-steps]

* [Web Components](/dapp-kit/web-components/connect-button) - Component documentation
* [State Management](/dapp-kit/state) - Store details
* [Actions](/dapp-kit/actions/connect-wallet) - All available actions
* [Theming](/dapp-kit/theming) - Customize appearance