[feature] New @reown vue package don't support vue Refs.

[ultraKelevra]

What problem does this new feature solve?

The problem this feature solves is clearer code and easier time. In short, a better UX for the developer (in my opinon)

Not having access to the reactive properties is pretty lame. Please bring them back.

I like to use reactive properties. I think they are VERY useful, and the current version (@reown) no longer supports them. This seems odd for a library that has Vue integration. (At the beginning I thought it was a bug)

Describe the solution you'd like

I really liked how you could call "useWallet()" or "useAccount()" and the object's fields it returned were "Refs" most of the time. Meaning that every field that was a "Ref", was reactive. You could feed it into any Vue component, or pass it along through a chain of properties from parent to child nodes all the way to whatever component needed information from the wallet. Or combine into computed properties which themselves were also reactive.

For instance, you could call:

// address and isConnected were reactive
// they used to change automatically when the user connected their wallet or changed account
const {address, isConnected} = useAddress();

// this bool is modified by the user by a toggle input
const someToggle = ref("false");

// so if the wallet is connected and the user toggled some input ON, more interface shows up
const showButton = computed( () => someToggle.value && isConnected.value );

I used to do this for conditional menus, tags, progress indicators, etc. Now I can't. And to be honest, I feel a bit lost with the new way stuff is being implemented to return the resulting value instead of a reactive field. I'm supposed to listen events all the time / call "useWallet()" on every function that has to check the connection state or the user address?

I know that the new approach seems to be precisely that... But I feel like this is a downgrade. I would like to at least have some option to enable reactive properties back.

[evvvritt]

Ok I think I got vue reactivity working using "@wagmi/vue": "^0.0.49", with "@reown/appkit": "^1.1.0":

Install @wagmi/vue @tanstack/vue-query

Initialize reown appkit vue in a config.js

// config.js
import { createAppKit } from '@reown/appkit/vue'

import { base } from '@reown/appkit/networks'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

// 1. Get projectId from https://cloud.reown.com
export const projectId = 'YOUR_ID'

// 2. Create a metadata object - optional
const metadata = {
  // ...
}

const networks = [base]

// 3. Create Wagmi Adapter
const wagmiAdapter = new WagmiAdapter({
  ssr: true,
  projectId,
  networks,
})

// export wagmiConfig for use around the app
export const wagmiConfig = wagmiAdapter.wagmiConfig

// 4. Create modal
createAppKit({
  adapters: [wagmiAdapter],
  networks,
  metadata,
  projectId,
  features: {
    analytics: true // Optional - defaults to your Cloud configuration
  }
})

Import in your main.js file, and use WagmiPlugin

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './config'
import { WagmiPlugin } from '@wagmi/vue'
import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { wagmiConfig } from './config'

const app = createApp(App)

const queryClient = new QueryClient()
app.use(WagmiPlugin, { config: wagmiConfig })
app.use(VueQueryPlugin, { queryClient })

app.mount('#app')

Then you can use @wagmi/vue methods in your components:

import { useAccount } from '@wagmi/vue`
const { address, isConnected } = useAccount()

So maybe vue reactivity isn't actually necessary in the appkit library?

[rtomas]

already solved the import react library -> @tanstack/vue-query

[rtomas]

import { useAccount } from '@wagmi/vue` const { address, isConnected } = useAccount() So maybe vue reactivity isn't actually necessary in the appkit library?

Now, we are multichain. So it's depends in what your are doing on your dApp. But if you are using only eth chains, it would be ok.

[rtomas]

@evvvritt do you have a minimal workable repository with your proposal to see ?

Would you mind sharing it with me ?

[evvvritt]

@rtomas I have it integrated in a private project's repo but not a public minimal version. I would just do what I did above – or is that configuration not running?

[hellohasan]

@ultraKelevra Yes sir, I also check this a major issue const {address, isConnected} = useAddress(); are not reactive? Its should be reactive, as its not reactive I use their old version "@web3modal/ethers": "^5.1.11", now i face this also making issue on mobile browser, when my users try to purchase with any wallet its said insufficient fund but same wallet work good on desktop browser.

[rtomas]

It would be great if you can give me feedback from this example : https://github.com/reown-com/web-examples/tree/feat/create-vue-wagmi-example/dapps/appkit/vue-wagmi (also vue-solana example in other directory)

Also make a PR for docs -> https://github.com/reown-com/reown-docs/pull/136

Any feedback is welcome. cc @hellohasan @evvvritt @ultraKelevra