Back to homepage

Web3.0 template project using Vue.js, Typescript, and TailwindCSS

Published

I've decided to create a template I could use as a starting point for any web 3.0 project. This way I'd not need to re-do things like installing TailwindCSS or creating a button to connect to a Metamask wallet.

Tech stack

  • Vue.js (v3)
    • Vite (dev environment)
    • Vue Router
    • Pinia (state management)
  • TypeScript
  • TailwindCSS (styling)

You can find all of the code in this GitHub repository.

Template project features

This template aims to be a starting point for other projects so it'll have the most basic features:

  • Navbar with "Connect Wallet" button
  • Wallet data available globally
  • Two pages to showcase that wallet data is available globally

Metamask connect button

The connect button is placed in the NavBar component and I decided to save the account information globally. For that, I used Pinia, which has become the default state management library for Vue.js applications.

I created a basic store in /src/stores/wallet.ts which looks like this:

import { defineStore } from 'pinia';

interface WalletData {
  address: string;
}

export const useWalletStore = defineStore('wallet', {
  state: () => {
    return {
      address: '',
    };
  },

  actions: {
    //@ts-ignore
    saveWalletData(payload: WalletData) {
      this.address = payload.address;
    },
  },
});

The connect Wallet button on the NavBar component will trigger the connectWallet() method, which will dispatch the saveWalletData action from the store:

// Script inside NavBar.vue component

import { defineComponent, ref } from 'vue';

import { useWalletStore } from '../stores/wallet';

export default defineComponent({
  setup() {
    const walletStore = useWalletStore();
    const isOpen = ref < boolean > false;

    const connectWallet = async () => {
      try {
        // @ts-expect-error Window.ethereum not typed
        const data = await window.ethereum.request({
          method: 'eth_requestAccounts',
        });
        console.log('data :>> ', data);

        walletStore.saveWalletData({ address: data[0] });
        console.log('DApp connected to your wallet 💰');
      } catch (error) {
        console.error('Error connecting DApp to your wallet');
        console.error(error);
      }
    };
    return {
      connectWallet,
      walletStore,
      isOpen,
    };
  },
});

Once done the project will look like this:

Template project for a Web3 app

Conclusion

Having this as a starting point, I can just clone this repo and start coding smart contracts with ethers and hardhat.

This is a very basic template project and I plan to add other features, like checking if Metamask is connected to the correct blockchain. I'll try to update the project and, as mentioned, you can find all of the code in this GitHub repository. Feel free to use this on your own projects.

TAGS

If you enjoyed this article consider sharing it on social media or buying me a coffee ✌️

Buy Me A Coffee