Configuration

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:

Nuxt 3

For Nuxt.js projects, configure your nuxt.config.ts:

typescript
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.

javascript
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.

javascript
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:

javascript
/** @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:

typescript
declare global {
  var Buffer: typeof import('buffer').Buffer
}

export {}