Nuxt Web3 Starter

A Nuxt3 starter template with web3 integration. This template is based on the Nuxt UI template.

• Look at Nuxt docs and Nuxt UI docs to learn more.

Features

• Wallet connection with web3Onboard by blocknative
• Minimal custom EthereumClient implementation, ready for expansion
• Dark/Light mode switch
• Minimalistic design with Tailwind CSS
• Responsive menu
• Media queries composable for mobile, tablet and desktop
• Event logging
• Contract interaction methods
• Basic ERC721 ABI
• Notifications

Custom Components

• Wallet widget
• Hero
• Section

Default Wallets

• Injected
• Coinbase Wallet
• MetaMask

For different wallets support please refer to the web3Onboard documentation

Environment Variables

The following environment variables are required to be set in a .env file in the root of the project:

NUXT_TESTNET_CONTRACT= #ADD YOUR TESTNET CONTRACT ADDRESS
NUXT_MAINNET_CONTRACT= #ADD YOUR MAINNET CONTRACT ADDRESS
NUX_ENV= #ADD YOUR ENVIRONMENT (production, development)

• The contract addresses are used to interact with the contract on the respective networks
• The environment variable is used to determine the network to interact with

Setup

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.