Vue support

[reslear]

I propose to describe an example of use with Vue and Vagmi

[xzilja]

We'll be adding support to Vue very soon and with that will also add an example 👌 web3modal relies on @wagmi/core internally and exposes its own hooks / compostables (that are mostly identical to wagmi/ract and vagmi, but with few changes to help us support cross framework / chain features that we will release in the future).

Once Vue is supported, your experience will be identical to current react implementation, you'd just need to change your framework package i.e.

npm i @web3modal/vue @web3modal/ethereum

[Droppix]

Hi,

Currently, there is no framework, compatible with vue 2.x, in how long can we expect to have access to an alpha/beta version? Thks

[reslear]

I don't think it's worth focusing on vue 2

[xzilja]

We'll support vue, but likely starting from v3. In terms of when it depends on how soon we stabilise / finalise all features with react being main test framework. Otherwise we'll have to re-do apis on vanilla + 2 frameworks. But shouldn't be too long :)

[callmejm]

cant wait to see vue version release 👍👍

[mohdxnizamv]

how i can get source for vue version

[crypblizz8]

Hey there, we now have our Vanilla JS version which can be implemented on Vue. As mentioned above, we will be looking to add Vue support in a later release.

[SpiritusDeos]

Hi, do we have an ETA regarding a Vue support ? @crypblizz8 @0xAsimetriq

[donnyquixotic]

I see that Vue support was removed from the 2.2.0 milestone, any update on when support will be added?

[xzilja]

Had to re-prioritise, but Vue is next framework we aim to add official library for, meanwhile you can use @web3modal/html with it.

[thirdman]

pls.

[MaxVast]

Hello, Can you tell us when the version with VueJS will be ready? I tried to integrate @web3modal/html version but it doesn't work. Best, Max

[BigtoC]

Consider using vue-dapp for now?

[xzilja]

I tried to integrate @web3modal/html version but it doesn't work.

Might be able to help if you expand on this i.e. some repor repo or codesanbox

[MaxVast]

I managed to integrate the @web3modal/html package with vueJs v3 and with npm, with npm no problem, with yarn I have an problem : "Error: ClientCtrl has no client set", whatever it wasn't easy. Is there a date set for integration with VueJS like for React ?

[xzilja]

No set date yet

[MaxVast]

No set date yet

Okay, thanks for you reply ! Best,

[scholtz]

v1.0 has been sunset. Wallets and Dapps must upgrade to v2.0 before June 28

I hope it is some kind of joke that v1 will not be supported while vue support for v2 is not there yet.

[xzilja]

@scholtz V1 never had vue support, at least not officially. Any HTML route https://docs.walletconnect.com/2.0/web/about-web3modal will work with Vue as well (been this way since we released web3modal v2)

[haidarabdillah]

any update on v2?

[dataexcess]

How can I use web3Modal with nuxt 3 ?? there must be some simple example?? using use-wagmi plugin I did not manage to replace the connector with web3modal (as is the case in the react example), also following the html example it is not working... please help

[xzilja]

@dataexcess just follow html docs https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/installation (but you need to understand how things work in scope of view i.e. when to initialise things etc.)

[dataexcess]

I tried... I don't see the modal opening...

<template>
    <div>
        <button
            @click="connect"
        >
            Connect Wallet
        </button>
    </div>
</template>

<script setup>
import { configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

const projectId = process.env.WALLETCONNECT_PROJECT_ID
const chains = [mainnet, sepolia]

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: w3mConnectors({ projectId, chains }),
    publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

const connect = () => {
    console.log('did click connect...')
    web3modal.openModal()
}
</script>

[dataexcess]

On page load I also get these errors:

GET https://explorer-api.walletconnect.com/w3m/v1/getDesktopListings?projectId=undefined&page=1&entries=9&version=2 401
N @ ExplorerUtil.ts:15
getDesktopListings @ ExplorerUtil.ts:23
getRecomendedWallets @ ExplorerCtrl.ts:58
preloadListings @ w3m-explorer-context.ts:34
preloadData @ w3m-explorer-context.ts:56
lt @ w3m-explorer-context.ts:17
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
__enqueueUpdate @ reactive-element.ts:1235
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1210
_initialize @ reactive-element.ts:948
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
Me @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
setup @ Web3Connector.client.vue:26
clone.setup @ client-only.js:53
callWithErrorHandling @ vue.js:1567
setupStatefulComponent @ vue.js:8633
setupComponent @ vue.js:8594
mountComponent @ vue.js:6999
hydrateNode @ vue.js:6028
hydrateChildren @ vue.js:6182
hydrateElement @ vue.js:6138
hydrateNode @ vue.js:6016
hydrateSubTree @ vue.js:7075
componentUpdateFn @ vue.js:7095
run @ vue.js:425
instance.update @ vue.js:7214
setupRenderEffect @ vue.js:7222
mountComponent @ vue.js:7012
hydrateNode @ vue.js:6028
hydrateSuspense @ vue.js:2955
hydrateNode @ vue.js:6068
hydrateSubTree @ vue.js:7075
componentUpdateFn @ vue.js:7095
run @ vue.js:425
instance.update @ vue.js:7214
setupRenderEffect @ vue.js:7222
mountComponent @ vue.js:7012
hydrateNode @ vue.js:6028
hydrate2 @ vue.js:5922
mount @ vue.js:5215
app.mount @ vue.js:10558
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 21 more frames
Web3Connector.client.vue:26 TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at Object.getRecomendedWallets (ExplorerCtrl.ts:59:40)
    at async Promise.all (:3000/index 0)
    at async lt.preloadListings (w3m-explorer-context.ts:34:7)
    at async Promise.all (:3000/index 0)
    at async lt.preloadData (w3m-explorer-context.ts:56:9)
preloadData @ w3m-explorer-context.ts:59
await in preloadData (async)
lt @ w3m-explorer-context.ts:17
_clone @ lit-html.ts:1129
_commitTemplateResult @ lit-html.ts:1543
_$setValue @ lit-html.ts:1384
render @ lit-html.ts:2183
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
__enqueueUpdate @ reactive-element.ts:1235
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1210
_initialize @ reactive-element.ts:948
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
Me @ index.ts:23
initUi @ client.ts:31
await in initUi (async)
c @ client.ts:25
setup @ Web3Connector.client.vue:26
clone.setup @ client-only.js:53
callWithErrorHandling @ vue.js:1567
setupStatefulComponent @ vue.js:8633
setupComponent @ vue.js:8594
mountComponent @ vue.js:6999
hydrateNode @ vue.js:6028
hydrateChildren @ vue.js:6182
hydrateElement @ vue.js:6138
hydrateNode @ vue.js:6016
hydrateSubTree @ vue.js:7075
componentUpdateFn @ vue.js:7095
run @ vue.js:425
instance.update @ vue.js:7214
setupRenderEffect @ vue.js:7222
mountComponent @ vue.js:7012
hydrateNode @ vue.js:6028
hydrateSuspense @ vue.js:2955
hydrateNode @ vue.js:6068
hydrateSubTree @ vue.js:7075
componentUpdateFn @ vue.js:7095
run @ vue.js:425
instance.update @ vue.js:7214
setupRenderEffect @ vue.js:7222
mountComponent @ vue.js:7012
hydrateNode @ vue.js:6028
hydrate2 @ vue.js:5922
mount @ vue.js:5215
app.mount @ vue.js:10558
initApp @ entry.js:55
await in initApp (async)
(anonymous) @ entry.js:64
Show 17 more frames
Web3Connector.client.vue:26     GET https://explorer-api.walletconnect.com/w3m/v1/getInjectedListings?projectId=undefined 401

and also a bunch of recurring errors like this (even when not using web3modal):

null:2247 {context: 'core'} {context: 'core/relayer'} Error: WebSocket connection closed abnormally with code: 3000 (Authorization error: Project ID is missing)
    at JsonRpcProvider.onClose (null:6163:33)
    at EventEmitter4.<anonymous> (null:6188:49)
    at EventEmitter4.emit (null:185:9)
    at WsConnection.onClose (null:6322:17)
    at socket.onclose (null:6314:38)

[xzilja]

Answer is in the error, your projectId is invalid, it's undefined

[dataexcess]

You are correct. I forgot to add the .public before accessing my nuxt runtimeConfig env variable! :) Thnx

[xzilja]

After a long while 😅 we got vue support coming in next major release of web3modal (3.0.0) no concrete deadline yet, but we are wrapping things up there. There is a vue example on v3 branch https://github.com/WalletConnect/web3modal/tree/V3/examples/vue-wagmi

I want to ask participants of this issue to have a look at implementation (in essence it's just a simple composable for web3modal, everything else comes from @wagmi/core package). Does this look ok to you?

[haidarabdillah]

After a long while 😅 we got vue support coming in next major release of web3modal (3.0.0) no concrete deadline yet, but we are wrapping things up there. There is a vue example on v3 branch https://github.com/WalletConnect/web3modal/tree/V3/examples/vue-wagmi

I want to ask participants of this issue to have a look at implementation (in essence it's just a simple composable for web3modal, everything else comes from @wagmi/core package). Does this look ok to you?

true legend sir thanks a lot

[ssotomayor]

@0xAsimetriq

After a long while 😅 we got vue support coming in next major release of web3modal (3.0.0) no concrete deadline yet, but we are wrapping things up there. There is a vue example on v3 branch https://github.com/WalletConnect/web3modal/tree/V3/examples/vue-wagmi

I want to ask participants of this issue to have a look at implementation (in essence it's just a simple composable for web3modal, everything else comes from @wagmi/core package). Does this look ok to you?

On a regular Vue 3 app (not Nuxt) i'm having issues importing them, getting:

Missing file extension for "@web3modal/wagmi/vue"
eslint[import/extensions](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/extensions.md)

Unable to resolve path to module '@web3modal/wagmi/vue'.
eslint[import/no-unresolved](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/no-unresolved.md)

Package Manager: NPM Node: 16 Typescript: 5.1.6

[xzilja]

@ssotomayor Looks like your eslint rules are asking to add .js at the end of an import. Exports for wagmi package are defined here https://github.com/WalletConnect/web3modal/blob/V3/packages/wagmi/package.json#L10 loos to be the same as ones in wagmi. Do you see anything that might be triggering that rule?