Skip to content

Commit 0c53f74

Browse files
committed
Update Vite integration docs with plugin
1 parent ea0804c commit 0c53f74

File tree

1 file changed

+68
-30
lines changed

1 file changed

+68
-30
lines changed

web-client/integrations/vite.md

Lines changed: 68 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,67 +20,105 @@ cd my-nimiq-app && pnpm install && pnpm dev
2020

2121
## Installation
2222

23-
### Quick Start
24-
25-
Install the Nimiq Web Client and required Vite plugins:
23+
Install the Nimiq Web Client:
2624

2725
::: code-group
2826

2927
```bash [pnpm]
3028
pnpm add @nimiq/core
31-
pnpm add -D vite-plugin-top-level-await vite-plugin-wasm
3229
```
3330

3431
```bash [npm]
3532
npm install @nimiq/core
36-
npm install -D vite-plugin-top-level-await vite-plugin-wasm
3733
```
3834

3935
```bash [yarn]
4036
yarn add @nimiq/core
41-
yarn add -D vite-plugin-top-level-await vite-plugin-wasm
4237
```
4338

4439
```bash [bun]
4540
bun add @nimiq/core
46-
bun add -D vite-plugin-top-level-await vite-plugin-wasm
4741
```
4842

4943
:::
5044

5145
## Configuration
5246

53-
### Basic Vite Setup
47+
The Nimiq Web Client includes a Vite plugin that automatically configures WebAssembly support and all required optimizations.
48+
49+
> [!TIP]
50+
> View the [plugin source code](https://github.com/nimiq/core-rs-albatross/blob/main/web-client/dist/vite.js) for implementation details.
51+
52+
Update your `vite.config.ts`:
53+
54+
::: code-group
55+
56+
```ts [vite.config.ts]
57+
import nimiq from '@nimiq/core/vite' // [!code ++]
58+
import { defineConfig } from 'vite'
59+
60+
export default defineConfig({
61+
plugins: [nimiq()], // [!code ++]
62+
})
63+
```
64+
65+
:::
66+
67+
The plugin automatically configures:
68+
- WebAssembly support with `vite-plugin-wasm`
69+
- Worker configuration for WASM modules (opt-out via `{ worker: false }`)
70+
- Build target optimizations (`esnext`)
71+
- Dependency exclusions for `@nimiq/core`
72+
73+
<details>
74+
<summary>Legacy Browser Support</summary>
75+
76+
Modern browsers (Chrome 89+, Firefox 89+, Safari 15+, Edge 89+) support top-level await natively. If you need to support older browsers, install `vite-plugin-top-level-await`:
77+
78+
::: code-group
79+
80+
```bash [pnpm]
81+
pnpm add -D vite-plugin-top-level-await
82+
```
83+
84+
```bash [npm]
85+
npm install -D vite-plugin-top-level-await
86+
```
5487

55-
Update your `vite.config.js` or `vite.config.ts`:
88+
```bash [yarn]
89+
yarn add -D vite-plugin-top-level-await
90+
```
91+
92+
```bash [bun]
93+
bun add -D vite-plugin-top-level-await
94+
```
5695

57-
```javascript
96+
:::
97+
98+
Then add it to your Vite config:
99+
100+
::: code-group
101+
102+
```ts [vite.config.ts]
103+
import nimiq from '@nimiq/core/vite'
58104
import { defineConfig } from 'vite'
59-
import wasm from 'vite-plugin-wasm' // [!code ++]
105+
import topLevelAwait from 'vite-plugin-top-level-await' // [!code ++]
60106
61107
export default defineConfig({
62-
plugins: [wasm()], // [!code ++]
63-
worker: { // [!code ++]
64-
format: 'esnext', // [!code ++]
65-
plugins: () => [wasm()], // [!code ++]
66-
}, // [!code ++]
67-
68-
optimizeDeps: { // [!code ++]
69-
exclude: ['@nimiq/core'], // [!code ++]
70-
}, // [!code ++]
71-
72-
// Additional build configuration for Nimiq // [!code ++]
73-
build: { // [!code ++]
74-
target: 'esnext', // [!code ++]
75-
rollupOptions: { // [!code ++]
76-
output: { // [!code ++]
77-
format: 'esnext', // [!code ++]
78-
}, // [!code ++]
79-
}, // [!code ++]
80-
}, // [!code ++]
108+
plugins: [
109+
nimiq(),
110+
topLevelAwait(), // [!code ++]
111+
],
81112
})
82113
```
83114

115+
:::
116+
117+
> [!NOTE]
118+
> Top-level await is required for ES modules when using dynamic WASM imports. The plugin transforms top-level await to work in older browsers.
119+
120+
</details>
121+
84122
## Usage Example
85123

86124
<!--@include: ../_demo.web.md-->

0 commit comments

Comments
 (0)