TON Wallet Integration with ton-ui-vue for vue/nuxt

General
1

As blockchain technology continues to grow, integrating TON wallets into web applications is becoming increasingly important. For Vue.js and Nuxt.js developers, ton-ui-vue offers a powerful solution for seamlessly connecting TON wallets with your projects. This guide will walk you through the setup, usage, and advanced features of ton-ui-vue, ensuring you can leverage its full potential.

Why Use ton-ui-vue?

ton-ui-vue is designed to simplify the process of integrating TON wallets into your Vue.js applications. It provides a set of pre-built components, hooks, and customizable interfaces that make it easy to add wallet functionality without dealing with the complexities of blockchain technology. The package is also fully compatible with Nuxt.js, allowing you to maintain wallet connections in server-side rendered applications.

Getting Started with ton-ui-vue

Installation

To begin using ton-ui-vue, install it using npm or yarn:

npm install ton-ui-vue @tonconnect/ui
# or
yarn add ton-ui-vue @tonconnect/ui
Basic Setup

Once installed, create the TonConnectUIProvider in your main.ts file to provide the necessary contexts for your app:

import { createApp } from 'vue';
import App from './App.vue';
import {
    createTonConnectUIProvider,
    TonConnectUIContext,
    TonConnectUIOptionsContext
} from 'ton-ui-vue';

const { tonConnectUI, setOptions } = createTonConnectUIProvider({
    manifestUrl: 'https://your-manifest-url'
});

const app = createApp(App);

app.provide(TonConnectUIContext, tonConnectUI);
app.provide(TonConnectUIOptionsContext, setOptions);

app.mount('#app');

This setup enables your application to easily connect with TON wallets using the provided context.

Using the Connect Button

Adding a connect button to your application is straightforward with the TonConnectButton component:

1 Like