Nimiq Web Client in Nuxt ​

The Nimiq Web Client ships with support for Nuxt.

Installation ​

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

Currently, Vite does not support WebAssembly out of the box. To enable WebAssembly support, you need to install the vite-plugin-wasm plugin. Learn more here.

Update your nuxt.config.js:

javascript
import wasm from "vite-plugin-wasm"; 
import topLevelAwait from "vite-plugin-top-level-await"; 

export default defineNuxtConfig({
  plugins: [
    wasm(), 
    topLevelAwait(), 
  ],

  vite: { 
    optimizeDeps: { 
      exclude: ['@nimiq/core-web'], 
    }, 
  } 
})
warning

Ensure the package is only run client-side: either set ssr: false in your Nuxt config, import this package only in client-side plugins, or wrap it in <ClientOnly>.

Now you are ready to go!

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

await init()

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

await client.waitForConsensusEstablished​()

Contribute ​

You can help us improve this guide by contributing to the Nimiq Web Client documentation on GitHub. Simply click the Edit this page button at the bottom of the page to suggest changes.