Nimiq Web Client Nuxt Integration
Integrate Nimiq Web Client with Nuxt 3 for full-stack blockchain applications.
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-wasmbash
npm install @nimiq/core
npm install -D vite-plugin-top-level-await vite-plugin-wasmbash
yarn add @nimiq/core
yarn add -D vite-plugin-top-level-await vite-plugin-wasmbash
bun add @nimiq/core
bun add -D vite-plugin-top-level-await vite-plugin-wasmConfiguration
Basic Nuxt Setup
Update your nuxt.config.ts:
typescript
import wasm from 'vite-plugin-wasm'
export default defineNuxtConfig({
vite: {
build: { target: 'esnext' },
plugins: [wasm()],
worker: { plugins: () => [wasm()] },
optimizeDeps: {
exclude: ['@nimiq/core'],
},
},
// Only if you are using SSR or @nimiq/core in the server,
// otherwise use `ssr: false` or `<ClientOnly />`
nitro: {
experimental: {
wasm: true
},
},
})Usage Example
Client-Side Only
The Nimiq Web Client must run in the browser. Use one of these approaches:
- Wrap components with
<ClientOnly> - Use
.client.tsfilename suffix - Set
ssr: falsein page meta
js
import { Client, ClientConfiguration } from '@nimiq/core'
const config = new ClientConfiguration()
const client = await Client.create(config.build())
await client.waitForConsensusEstablished()With Client-Only Wrapper
vue
<template>
<ClientOnly>
<NimiqWallet />
</ClientOnly>
</template>