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:

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

Installation

Quick Start

Install the Nimiq Web Client and required Vite plugins:

bash
pnpm add @nimiq/core
pnpm add -D vite-plugin-top-level-await vite-plugin-wasm
bash
npm install @nimiq/core
npm install -D vite-plugin-top-level-await vite-plugin-wasm
bash
yarn add @nimiq/core
yarn add -D vite-plugin-top-level-await vite-plugin-wasm
bash
bun add @nimiq/core
bun add -D vite-plugin-top-level-await vite-plugin-wasm

Configuration

Basic Vite Setup

Update your vite.config.js or vite.config.ts:

javascript
import { defineConfig } from 'vite'
import wasm from 'vite-plugin-wasm'

export default defineConfig({
  plugins: [wasm()],
  worker: {
    format: 'esnext',
    plugins: () => [wasm()],
  },

  optimizeDeps: {
    exclude: ['@nimiq/core'],
  },

  // Additional build configuration for Nimiq
  build: {
    target: 'esnext',
    rollupOptions: {
      output: {
        format: 'esnext',
      },
    },
  },
})

Usage Example

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

await init()

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

await client.waitForConsensusEstablished()
Built with the Nimiq Vitepress Theme
Copy page
Create issue