Add ui-vue package.

[DanielKOcean]

Add Ton Connect Vue Kit.

[siandreev]

Hi, thanks for your suggestion.

Unfortunately, we do not plan to create such a package ourselves in the near future. However, we will gladly include community developments in the SDK.

[d0rich]

I just implemented this UI kit in Vue looking on React implementation: https://github.com/d0rich/esprit/tree/d-frontend/apps/d.d0rich.me/src/features/tonconnect

Here you can find not only tonconnect ui, but some other TON libs.

And I wanted to keep it in Pinia storage. More reliable way is to make it simple composable.

[wizidot]

I just implemented this UI kit in Vue looking on React implementation: https://github.com/d0rich/esprit/tree/d-frontend/apps/d.d0rich.me/src/features/tonconnect

Here you can find not only tonconnect ui, but some other TON libs.

And I wanted to keep it in Pinia storage. More reliable way is to make it simple composable.

Your link is dead . but i've found this repo (not tested) https://github.com/TownSquareXYZ/tonconnect-ui-vue/tree/main

[anoncodemonkey]

I just implemented this UI kit in Vue looking on React implementation: https://github.com/d0rich/esprit/tree/d-frontend/apps/d.d0rich.me/src/features/tonconnect
Here you can find not only tonconnect ui, but some other TON libs.
And I wanted to keep it in Pinia storage. More reliable way is to make it simple composable.

Your link is dead . but i've found this repo (not tested) https://github.com/TownSquareXYZ/tonconnect-ui-vue/tree/main

I am trying to npm install this but it would not work.

[wizidot]

yes me too, it doesn't work with vue 3/Nuxt/TypeScript...
So i've implemented the cdn script :

onMounted(() => {
    console.log('Mounted')
    if (props.project.isConnected==false) {
  useHead({
      script: [
          {
              src: 'https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js',
              type: 'text/javascript',
              onload(el) {
                //console.log('tonconnect-ui.min.js LOADED')
                initializeTonConnect();                
              },
          },
      ],
  }, { mode: 'client' });
}
});

and

const  initializeTonConnect = async ()  => {
    tonConnectUI.value= new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'https://xxx/tonconnect-manifest.json',
        buttonRootId: 'ton-connect'
    });
    const unsubscribeModal = await tonConnectUI.value.onModalStateChange(
    (state) => {
              // update state/reactive variables to show updates in the ui
        // state.status will be 'opened' or 'closed'
        // if state.status is 'closed', you can check state.closeReason to find out the reason
        if( state.status=="opened"){
          getWallet()
        }
    }
);
const unsubscribe = tonConnectUI.value.onStatusChange(
    (walletAndwalletInfo) => {
       //console.log('onStatusChange',walletAndwalletInfo)
       if(walletAndwalletInfo.account){
          props.project.isConnected=true;
          tonConnexionStatus.value = Boolean(walletAndwalletInfo.account.address!='')
          changeAddress(walletAndwalletInfo);
          
       }
    } 
);

[mahdi4187]

hey guys

i use this, works for first view page in nuxt 3 but after page change and back to page get this error

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "tc-root" has already been used with this registry

please guide me

[wizidot]

Ok, i think you have two buttonRootId no ?
This error happened to me when I wanted to put two tonconnect buttons on the same page.

[mahdi4187]

<template>
  <div id="ton-connect"></div>
</template>

No only have one div

[mahdi4187]

#218

I fully explained in the above link