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({
  ssr: false, // Nimiq Web Client is client-side only. You can wrap the parts of you are that use the WebClient using <ClientOnly>

  vite: { 
    plugins: [ 
      wasm(), 
      topLevelAwait(), 
    ], 

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

The Web Client cannot run in the server. To ensure that the package only runs on the client side, you have three options:

  • Set ssr: false in your Nuxt config. If you use this option, consider also using loading template.
  • 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.