Skip to content

Commit 2b732cc

Browse files
committed
docs: add SSR / Nuxt note
closes #358
1 parent 256dd87 commit 2b732cc

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

Diff for: docs/get-started.md

+39
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ bun add vue3-openlayers # install this library
3737

3838
:::
3939

40+
Please ensure you are aware of potential issues with [Server-Side-Rendering (SSR)](#server-side-rendering).
41+
4042
## Usage: As Plugin
4143

4244
To use `vue3-openlayers` in your application as a Plugin for global component availability,
@@ -118,6 +120,43 @@ import { Map, Layers, Sources } from "vue3-openlayers";
118120

119121
:::
120122

123+
## Server Side Rendering
124+
125+
Be aware that the Vue3Openlayers map cannot be rendered at server side.
126+
Disabling SSR resolves this issue.
127+
The following example shows how to disable Vue3Openlayers when running SSR using Nuxt.js.
128+
129+
**Example Nuxt config**
130+
131+
The first approach is to disable the whole affected route where the map is rendered:
132+
133+
```ts
134+
export default defineNuxtConfig({
135+
// ...
136+
routeRules: {
137+
'/sales': { ssr: false },
138+
},
139+
// ...
140+
})
141+
```
142+
143+
You can also specifically render the map only at client side, by putting inside the `ClientOnly` component:
144+
145+
```vue
146+
<template>
147+
<ClientOnly>
148+
<Map.OlMap style="min-width: 400px; min-height: 400px;">
149+
<Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326"/>
150+
<Layers.OlTileLayer>
151+
<Sources.OlSourceOsm/>
152+
</Layers.OlTileLayer>
153+
</Map.OlMap>
154+
</ClientOnly>
155+
</template>
156+
```
157+
158+
see also: [Issue #358](https://github.com/MelihAltintas/vue3-openlayers/issues/358)
159+
121160
## Debug Mode
122161

123162
You can activate the `debug` mode, to log events receiving from OpenLayers and props passed to OpenLayers on the console.

0 commit comments

Comments
 (0)