Nimiq Web Client Nuxt Integration

Integrate Nimiq Web Client with Nuxt for full-stack blockchain applications.

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 nuxt.config.ts:

import nimiq from '@nimiq/core/vite'
export default defineNuxtConfig({
  vite: {    plugins: [nimiq()],  },
  // Only if you are using SSR or @nimiq/core in the server,
  // otherwise use `ssr: false` or `<ClientOnly />`
  nitro: {    experimental: {      wasm: true,    },  },})

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 topLevelAwait from 'vite-plugin-top-level-await'
export default defineNuxtConfig({
  vite: {
    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()

With Client-Only Wrapper

<template>
  <ClientOnly>
    <NimiqWallet />
  </ClientOnly>
</template>

Next steps

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