Getting Started
Configuration
Configure your build tools and environment for Hydra SDK
Hydra SDK leverages WebAssembly (WASM) for high-performance Cardano operations. This guide covers how to configure your build tools and environment for optimal performance.
Full Examples
For complete working examples with full configuration, check out our examples repository:
- React + Vite Example - Complete React application setup
- Vue.js + TypeScript Example - Complete Vue.js application setup
- Examples Repository - All examples on GitHub
Nuxt 3
For Nuxt.js projects, configure your nuxt.config.ts:
import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineNuxtConfig({
ssr: false, // Disable SSR for wallet applications
vite: {
plugins: [
wasm(),
topLevelAwait(),
nodePolyfills({
include: ['buffer'],
globals: {
Buffer: true,
global: false,
process: false
}
})
],
optimizeDeps: {
exclude: ['@hydra-sdk/cardano-wasm']
}
}
})
Vue.js with Vite
Configure your vite.config.js for Vue projects:
💡 See the complete Vue.js example for a full working setup.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineConfig({
plugins: [
vue(),
wasm(),
topLevelAwait(),
nodePolyfills({
include: ['buffer'],
globals: {
Buffer: true,
global: false,
process: false
}
})
],
optimizeDeps: {
exclude: ['@hydra-sdk/cardano-wasm']
}
})
React with Vite
For React projects using Vite, update your vite.config.js:
💡 See the complete React example for a full working setup.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
export default defineConfig({
plugins: [
react(),
wasm(),
topLevelAwait(),
nodePolyfills({
include: ['buffer'],
globals: {
Buffer: true,
global: false,
process: false
}
})
],
optimizeDeps: {
exclude: ['@hydra-sdk/cardano-wasm']
}
})
Next.js Configuration
Configure Next.js in your next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.experiments = {
...config.experiments,
asyncWebAssembly: true,
}
config.resolve.fallback = {
...config.resolve.fallback,
crypto: false,
stream: false,
util: false,
buffer: require.resolve('buffer')
}
}
return config
},
// Disable static optimization for wallet pages
experimental: {
esmExternals: 'loose'
}
}
module.exports = nextConfig
For Next.js 13+ with app directory, also create a globals.d.ts:
declare global {
var Buffer: typeof import('buffer').Buffer
}
export {}