Installation
Get started with SupaWeb3 in your Vue or Nuxt application.
Prerequisites
Before installing SupaWeb3, make sure you have:
- Node.js 18+ - Required for modern JavaScript features
- Vue 3.3+ - SupaWeb3 is built for Vue 3 with Composition API
- TypeScript (recommended) - For the best development experience
Package Installation
SupaWeb3 is distributed via npm.
Install Core Package
Terminal
# npm
npm install @supaweb3/ui
# pnpm
pnpm add @supaweb3/ui
# yarn
yarn add @supaweb3/ui
Vue 3 Setup
Basic Setup
components/WalletExample.vue
<template>
<div>
<WalletConnectButton
variant="default"
size="lg"
@connect="handleConnect"
@disconnect="handleDisconnect"
/>
<TokenSwap
v-if="connected"
:from-token="fromToken"
:to-token="toToken"
@swap="handleSwap"
/>
</div>
</template>
<script setup>
import { WalletConnectButton, TokenSwap } from '@supaweb3/ui'
import '@supaweb3/ui/style.css'
const connected = ref(false)
const fromToken = ref({ symbol: 'ETH', balance: 0 })
const toToken = ref({ symbol: 'USDC', balance: 0 })
const handleConnect = (wallet) => {
connected.value = true
console.log('Connected to:', wallet.name)
}
const handleDisconnect = () => {
connected.value = false
console.log('Wallet disconnected')
}
const handleSwap = (swapData) => {
console.log('Swap executed:', swapData)
}
</script>
Global Configuration
Create a plugin to configure SupaWeb3 globally:
plugins/supaweb3.client.ts
import { createSupaWeb3 } from '@supaweb3/ui'
export default defineNuxtPlugin(() => {
const supaweb3 = createSupaWeb3({
theme: 'dark',
defaultChain: 'ethereum',
walletConnectProjectId: 'your-project-id'
})
return {
provide: {
supaweb3
}
}
})
Nuxt 3 Integration
For the best Nuxt experience, use the dedicated Nuxt module:
Install Nuxt Module
Terminal
# Install the Nuxt module
pnpm add @supaweb3/nuxt
Configure Nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@supaweb3/nuxt'
],
css: [
'@supaweb3/ui/style.css'
],
supaweb3: {
// Global configuration
theme: 'dark',
defaultChain: 'ethereum',
walletConnect: {
projectId: process.env.WALLETCONNECT_PROJECT_ID
}
}
})
Auto-imports
The Nuxt module automatically imports all SupaWeb3 components:
pages/app.vue
<template>
<div>
<!-- No imports needed! -->
<WalletConnectButton />
<PortfolioOverview :total-value="portfolioValue" />
<NFTGallery :nfts="userNFTs" />
</div>
</template>
<script setup>
// Components are auto-imported
const portfolioValue = ref(125430.50)
const userNFTs = ref([])
</script>
Styling Configuration
Tailwind CSS Setup
IMPORTANT: SupaWeb3 components use Tailwind utility classes. You must configure Tailwind to scan the SupaWeb3 package files, otherwise components will render unstyled.
For Tailwind v4 (with @nuxt/ui):
The @supaweb3/nuxt module automatically configures Tailwind v4 to scan component source files. No additional configuration needed!
For Tailwind v3 (with @nuxtjs/tailwindcss):
SupaWeb3 includes a Tailwind preset for consistent styling:
tailwind.config.js
module.exports = {
presets: [
require('@supaweb3/config')
],
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
'./app.vue',
// ⚠️ REQUIRED: Scan SupaWeb3 components
'./node_modules/@supaweb3/ui/**/*.{js,mjs,vue}'
]
}
Custom Theme
Override default theme colors:
nuxt.config.ts
export default defineNuxtConfig({
supaweb3: {
theme: {
colors: {
primary: '#8b5cf6',
secondary: '#06b6d4',
accent: '#f59e0b'
}
}
}
})
Environment Variables
Create a .env file for Web3 configuration:
.env
# WalletConnect Project ID (get from https://cloud.walletconnect.com)
WALLETCONNECT_PROJECT_ID=your_project_id
# Alchemy API Key (for blockchain data)
ALCHEMY_API_KEY=your_alchemy_key
# Default Network
DEFAULT_CHAIN=ethereum
# Enable debug mode
SUPAWEB3_DEBUG=true
Verification
Test your installation with this simple component:
components/TestInstallation.vue
<template>
<div class="p-6 space-y-4">
<h2 class="text-2xl font-bold">SupaWeb3 Installation Test</h2>
<WalletConnectButton @connect="onConnect" />
<div v-if="wallet" class="text-green-600">
✅ SupaWeb3 installed successfully!
<p>Connected to: {{ wallet.name }}</p>
</div>
</div>
</template>
<script setup>
const wallet = ref(null)
const onConnect = (connectedWallet) => {
wallet.value = connectedWallet
}
</script>
That's it! You're now ready to build amazing Web3 UX with SupaWeb3 🚀
Next Steps
- Explore the Component Gallery to see all available components
- Check out Usage Examples for common patterns
- Read about Web3 Integration for blockchain connectivity