How can I solve this problem?

[piordev555]

I just got problem with implementing web3 integration with Vue3.
I tried to use web3 npm module. But I got webpack error on there.
So I solved with ethers.js npm module.
Is there anyway to use web3 module in Vue3?

[Kelvin-1013]

Copy

Web3 Integration with Vue 3

This document provides a guide for integrating Web3.js into a Vue 3 application. If you encounter issues with Webpack, this guide will help you configure your project accordingly.

Prerequisites

• Node.js installed on your machine
• Vue CLI installed
• Basic knowledge of Vue.js and Ethereum

Installation

1. Create a Vue 3 Project (if you haven't already):

   vue create my-vue3-app
   cd my-vue3-app

Install Web3.js:

Run the following command to install the Web3.js library:

Copy
npm install web3
Webpack Configuration
If you encounter errors related to Webpack while using Web3.js, you may need to adjust your Webpack configuration. Create or modify the vue.config.js file in your project root:

Copy
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
fallback: {
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer/"),
"assert": require.resolve("assert/"),
"crypto": require.resolve("crypto-browserify"),
"os": require.resolve("os-browserify/browser"),
}
}
}
};
Using Web3.js in Your Component
You can create a Vue component that utilizes Web3.js. Below is a simple example:

Copy

Web3 Integration

Connect Wallet

Connected Account: {{ account }}

<script> import Web3 from 'web3'; export default { data() { return { account: null, web3: null, }; }, methods: { async connectWallet() { if (window.ethereum) { this.web3 = new Web3(window.ethereum); try { // Request account access await window.ethereum.request({ method: 'eth_requestAccounts' }); const accounts = await this.web3.eth.getAccounts(); this.account = accounts[0]; } catch (error) { console.error("User denied account access", error); } } else { console.error("No Ethereum provider found. Install MetaMask."); } }, }, }; </script> <style scoped> /* Add your styles here */ </style>