NFT & Gaming Components
Rich components for NFT displays, galleries, gaming assets, and marketplace interactions.
The NFT & Gaming component category provides comprehensive interfaces for digital asset management, from simple NFT displays to complex gaming asset interactions and marketplace integrations.
Components Overview
- NFTGallery - Responsive gallery for NFT collections
- NFTCard - Individual NFT display with metadata
- GameAssets - Gaming-specific asset management
- QuestTracker - Game quest and achievement tracking
- Marketplace - NFT marketplace integration
- CollectionStats - Collection analytics and floor prices
Key Features
- Multi-Standard Support: ERC-721, ERC-1155, SPL tokens, and gaming assets
- Rich Metadata: IPFS integration with high-resolution image loading
- Marketplace Integration: OpenSea, LooksRare, X2Y2, and custom marketplaces
- Gaming Focused: Special handling for game items, characters, and achievements
- Performance Optimized: Lazy loading, virtual scrolling, and image optimization
- Mobile Gaming: Touch-optimized interactions for mobile gaming
Quick Start
Display a user's NFT collection with the gallery component:
<template>
<div class="space-y-6">
<NFTGallery
:nfts="userNFTs"
:columns="{ xs: 1, sm: 2, md: 3, lg: 4 }"
@nft-click="handleNFTClick"
@load-more="loadMoreNFTs"
/>
<NFTCard
v-if="selectedNFT"
:nft="selectedNFT"
variant="detailed"
show-metadata
show-traits
@list-for-sale="handleListForSale"
/>
</div>
</template>
<script setup>
const userNFTs = ref([
{
id: '1',
name: 'Cool Ape #1234',
image: 'ipfs://QmX...',
collection: 'Bored Ape Yacht Club',
traits: [
{ trait_type: 'Background', value: 'Blue' },
{ trait_type: 'Eyes', value: 'Laser' }
],
floorPrice: 15.5,
lastSale: 18.2
}
// ... more NFTs
])
const selectedNFT = ref(null)
const handleNFTClick = (nft) => {
selectedNFT.value = nft
}
const loadMoreNFTs = async () => {
// Load more NFTs for infinite scroll
}
const handleListForSale = (listingData) => {
console.log('Listing NFT:', listingData)
}
</script>
Common Patterns
Gaming Asset Management
<GameAssets
:assets="gameInventory"
:categories="['weapons', 'armor', 'consumables']"
enable-trading
@use-item="handleUseItem"
@trade-item="handleTradeItem"
/>
Collection Overview
<CollectionStats
:collection="collectionData"
:user-holdings="userHoldings"
show-floor-price
show-volume
@view-collection="viewFullCollection"
/>
Quest System
<QuestTracker
:quests="activeQuests"
:completed="completedQuests"
@claim-reward="handleClaimReward"
@start-quest="handleStartQuest"
/>
Advanced Features
Virtual Scrolling for Large Collections
<template>
<NFTGallery
:nfts="largeCollection"
virtual-scroll
:item-height="300"
:buffer="10"
@scroll-end="loadMore"
/>
</template>
<script setup>
const largeCollection = ref([]) // Thousands of NFTs
const loadMore = async () => {
// Load next batch of NFTs
}
</script>
Marketplace Integration
<template>
<Marketplace
:listings="marketplaceListings"
:filters="filterOptions"
@buy="handlePurchase"
@make-offer="handleOffer"
/>
</template>
<script setup>
const marketplaceListings = ref([])
const filterOptions = ref({
priceRange: [0, 100],
collections: [],
traits: {}
})
const handlePurchase = async (listing) => {
// Handle NFT purchase
}
const handleOffer = async (offer) => {
// Handle offer submission
}
</script>
Gaming Character Display
<template>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<NFTCard
:nft="gameCharacter"
variant="character"
show-stats
show-equipment
/>
<GameAssets
:assets="characterEquipment"
variant="equipment-slots"
@equip="handleEquip"
@unequip="handleUnequip"
/>
</div>
</template>
Gaming-Specific Features
Character Stats and Equipment
<NFTCard
:nft="character"
:stats="characterStats"
:equipment="equippedItems"
variant="character"
/>
Item Crafting
<GameAssets
:materials="craftingMaterials"
:recipes="availableRecipes"
enable-crafting
@craft="handleCrafting"
/>
Achievement System
<QuestTracker
:achievements="userAchievements"
:progress="questProgress"
variant="achievements"
/>
Performance Optimization
Image Loading Strategy
<NFTGallery
:lazy-load="true"
:placeholder="'/nft-placeholder.png'"
:high-res-on-hover="true"
/>
Collection Caching
<NFTGallery
:cache-strategy="'aggressive'"
:preload-adjacent="3"
/>
Marketplace Features
Listing Management
<Marketplace
:user-listings="userListings"
enable-bulk-operations
@update-price="handlePriceUpdate"
@cancel-listing="handleCancelListing"
/>
Offer System
<NFTCard
:nft="selectedNFT"
:offers="nftOffers"
enable-offers
@accept-offer="handleAcceptOffer"
/>
Mobile Gaming Optimization
Touch Interactions
<GameAssets
touch-optimized
:gesture-controls="true"
@swipe="handleSwipeGesture"
@long-press="handleLongPress"
/>
Mobile Gallery
<NFTGallery
mobile-optimized
:columns="{ xs: 1, sm: 2 }"
swipe-navigation
/>
Integration Examples
Complete NFT Portfolio
<template>
<div class="space-y-8">
<!-- Portfolio Overview -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2">
<NFTGallery :nfts="featuredNFTs" variant="featured" />
</div>
<div>
<CollectionStats :collections="topCollections" />
</div>
</div>
<!-- Gaming Assets -->
<div v-if="gameAssets.length">
<h2 class="text-2xl font-bold mb-4">Gaming Assets</h2>
<GameAssets :assets="gameAssets" enable-trading />
</div>
<!-- Active Quests -->
<div v-if="activeQuests.length">
<h2 class="text-2xl font-bold mb-4">Active Quests</h2>
<QuestTracker :quests="activeQuests" />
</div>
</div>
</template>
Related Components
- NFTGallery - Collection display and management
- GameAssets - Gaming asset management
- Marketplace - NFT marketplace integration