nuxt 2 接入web3modal 登陆

1.0 版本

<template>
  <div>
     <button @click="login">Login</button>
    <button @click="initWeb3Modal">logoout</button>

  </div>
</template>

<script>
import Web3Modal from 'web3modal'
import Web3 from 'web3'

export default {
  data() {
    return {
      web3: null,
      connected: false,
      address: '',
      web3Modal: null
    }
  },
  mounted() {
    this.initWeb3Modal()
  },
  methods: {
    async initWeb3Modal() {
      this.web3Modal = new Web3Modal({
        cacheProvider: true, // 是否缓存提供商信息
        disableInjectedProvider: false, // 是否禁用浏览器上已注入的提供商（例如 MetaMask）
        fullScreen: false, // 是否使用全屏模式显示 Web3Modal 登录框
        network: 'mainnet', // 连接的区块链网络（例如 mainnet，rinkeby，ropsten）
        theme: 'light', // 选择 Web3Modal 登录框的主题，可选值有“light”（浅色主题）和“dark”（深色主题）
      })
      const provider = await this.web3Modal.connect()
      this.web3 = new Web3(provider)
      this.getCurrentAccount()
    },
    async getCurrentAccount() {
      const accounts = await this.web3.eth.getAccounts()
      console.log('accounts', accounts)
      return accounts[0]
    },
    async login() {
      const provider = await this.web3Modal.connect()
      this.web3 = new Web3(provider)
      this.getCurrentAccount()
    },
    }
  }
}
</script>

可以直接拿去用，亲测有效

2.0版本

<template>
  <div>
     <client-only>
      <w3m-core-button
      icon="false"
      label=""

      />
      <button @click="sign">
        Sign
      </button>
    </client-only> 
 <button @click="logoout">退出</button>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  configureChains,
  createClient,
  getAccount,
  signMessage,
  disconnect
} from '@wagmi/core'
import { goerli, mainnet } from '@wagmi/core/chains'
import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider
} from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
// import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect'

Vue.config.ignoredElements = ['w3m-core-button']

export default {
  name: 'IndexPage',
  data() {
    return {
      web3Modal: null
    }
  },
  mounted() {
    // define constants
    const projectId = '***'
    const chains = [mainnet]

    // configure wagmi client
    const { provider } = configureChains(chains, [
      walletConnectProvider({
        projectId
      })
    ])
    const wagmiClient = createClient({
      autoConnect: true,
      showQrModal: false,
      connectors: [...modalConnectors({ appName: 'web3Modal', chains })],
      provider
    })

    // create ethereum and modal clients
    const ethereumClient = new EthereumClient(wagmiClient, chains)
    const web3Modal = new Web3Modal(
      {
        projectId,
        themeZIndex: '9999',
        // termsOfServiceUrl: " ",
        enableAccountView: false
      },

      ethereumClient
    )

    web3Modal.subscribeModal(({ open }) => {
      const account = getAccount()
      console.log(account)
    })
    this.web3Modal = web3Modal
    console.log('web3Modal', web3Modal)
  },
  methods: {
    initWeb3Modal() {
      this.web3Modal.openModal()
    },
    async logoout() {
      await disconnect()

      const account = getAccount()
      console.log(account)
    },

    async sign() {
      const signature = await signMessage({
        message: 'Hello, World!'
      })
      console.log(signature)
    }
  }
}
</script>

nuxt 需要配置一下

 transpile: ['@web3modal', '@walletconnect', '@wagmi',/^element-ui/],

package：
    "@wagmi/core": "^0.9.5",
    "@web3modal/ethereum": "^2.1.1",
    "@web3modal/html": "^2.1.1",

也可以直接使用，完事

寻找web3 远程工作就来
https://www.bolejobs.co/