Nimiq Web Client Vite Integration

Integrate Nimiq Web Client with Vite for fast blockchain development with minimal configuration.

Quick Start with Templates

Get started instantly with our pre-configured starter templates:

npx degit onmax/nimiq-starter/starters/vue-ts my-nimiq-app
cd my-nimiq-app && pnpm install && pnpm dev

npx degit onmax/nimiq-starter/starters/react-ts my-nimiq-app
cd my-nimiq-app && pnpm install && pnpm dev

Installation

Install the Nimiq Web Client:

pnpm add @nimiq/core

npm install @nimiq/core

yarn add @nimiq/core

bun add @nimiq/core

Configuration

The Nimiq Web Client includes a Vite plugin that automatically configures WebAssembly support and all required optimizations.

!TIP View the plugin source code for implementation details.

Update your vite.config.ts:

import nimiq from '@nimiq/core/vite'import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [nimiq()],})

The plugin automatically configures:

• WebAssembly support with vite-plugin-wasm
• Worker configuration for WASM modules (opt-out via { worker: false })
• Build target optimizations (esnext)
• Dependency exclusions for @nimiq/core

pnpm add -D vite-plugin-top-level-await

npm install -D vite-plugin-top-level-await

yarn add -D vite-plugin-top-level-await

bun add -D vite-plugin-top-level-await

import nimiq from '@nimiq/core/vite'
import { defineConfig } from 'vite'
import topLevelAwait from 'vite-plugin-top-level-await'
export default defineConfig({
  plugins: [
    nimiq(),
    topLevelAwait(),  ],
})

Usage Example

import { Client, ClientConfiguration } from '@nimiq/core'

const config = new ClientConfiguration()
const client = await Client.create(config.build())

await client.waitForConsensusEstablished()

Next steps

Once your client is connected, see the guides to start building. For other integration options, see Nuxt, Next.js, ESM, or CommonJS.