Nuxt 3 SSR

[edwh]

How much does SSR work? I'm using Nuxt3, and what seems to happen is that the outer div for the map is rendered, but none of the map content is rendered until it loads on the client.

Here's a demo:

https://stackblitz.com/edit/github-ubdbme-weqwmx?file=app.vue

If you load up that in a new window, and then do Ctrl+U to view the source that has been rendered on the server, you can see this:

<div style="width:100%;height:500px;&#39;width:500px;" class="ourmap"></div>

I also see errors when running a nuxt SSR pre-render, with window is not defined in leaflet:

var requestFn = window.requestAnimationFrame || getPrefixed("RequestAnimationFrame") || timeoutDefer;

(Thanks for working on this, btw)

[ssinno28]

I believe I got it working by registring all of the components in a client plugin, doesn't seem like it supports SSR:

import { defineNuxtPlugin } from 'nuxt/app';
import * as VueLeaflet from '@vue-leaflet/vue-leaflet';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('l-circle', VueLeaflet.LCircle);
  nuxtApp.vueApp.component('l-circle-marker', VueLeaflet.LCircleMarker);
  nuxtApp.vueApp.component('l-control', VueLeaflet.LControl);
  nuxtApp.vueApp.component(
    'l-control-attribution',
    VueLeaflet.LControlAttribution
  );
  nuxtApp.vueApp.component('l-control-layers', VueLeaflet.LControlLayers);
  nuxtApp.vueApp.component('l-control-scale', VueLeaflet.LControlScale);
  nuxtApp.vueApp.component('l-control-zoom', VueLeaflet.LControlZoom);
  nuxtApp.vueApp.component('l-feature-group', VueLeaflet.LFeatureGroup);
  nuxtApp.vueApp.component('l-geo-json', VueLeaflet.LGeoJson);
  nuxtApp.vueApp.component('l-grid-layer', VueLeaflet.LGridLayer);
  nuxtApp.vueApp.component('l-icon', VueLeaflet.LIcon);
  nuxtApp.vueApp.component('l-icon-default', VueLeaflet.LIconDefault);
  nuxtApp.vueApp.component('l-image-overlay', VueLeaflet.LImageOverlay);
  nuxtApp.vueApp.component('l-layer-group', VueLeaflet.LLayerGroup);
  nuxtApp.vueApp.component('l-map', VueLeaflet.LMap);
  nuxtApp.vueApp.component('l-marker', VueLeaflet.LMarker);
  nuxtApp.vueApp.component('l-polygon', VueLeaflet.LPolygon);
  nuxtApp.vueApp.component('l-polyline', VueLeaflet.LPolyline);
  nuxtApp.vueApp.component('l-popup', VueLeaflet.LPopup);
  nuxtApp.vueApp.component('l-rectangle', VueLeaflet.LRectangle);
  nuxtApp.vueApp.component('l-tile-layer', VueLeaflet.LTileLayer);
  nuxtApp.vueApp.component('l-tooltip', VueLeaflet.LTooltip);
  nuxtApp.vueApp.component('l-lwms-tile-layer', VueLeaflet.LWMSTileLayer);
});

[ssinno28]

@benoitdemaegdt I did not find a way to get it to work with SSR, but if you register it as a plugin like above it should work (albeit its only client side).

[ssinno28]

I ran into the same issue as you, window is not defined :(

[benoitdemaegdt]

Same issue : window is not defined.

Did you find out how to make it work with SSR ?

https://github.com/nuxt/framework/issues/5245

[novvac]

I use nuxt 3 SSR together with the Leaflet map. First, make sure you have the vue-leaflet and leaflet installed (use devDependencies). Next, import the required components into the component where you want to use the map and add a CSS file from leaflet:

import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';
import 'leaflet/dist/leaflet.css';

Then add the map in the template. Remember about client-only :)

<client-only>
    <l-map
        v-model="zoom"
        v-model:zoom="zoom"
        :center="[50.0411622,21.9985728]"
        :zoom-snap="0.25"
    >
        <l-tile-layer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        ></l-tile-layer>
    </l-map>
</client-only>

[edwh]

The README for this project says:

Note that unlike the [Vue 2 version](https://github.com/vue-leaflet/Vue2Leaflet), this library is fully compatible with SSR.

I interpreted that as meaning you could actually render a map in SSR. I'm still unclear whether it is the intention of this project that this should be the case.

If that isn't the intention, and you need to render all maps on the client using <client-only>, then it would be good to clarify the README.

[novvac]

Good question :)
I didn’t take it that way, but maybe you’re right. I also use client-only for my project. If I find out something, I will know in this discussion.

[mikeu]

Indeed @novvac, there is a reason that the readme does not claim the goal of this project is to refactor Leaflet itself to make that library compatible with SSR!

That said, it's an excellent point @edwh that the readme should include <client-only> in its description of SSR. I've added that to my todo list, and it'll will likely be part of an update stemming from this discussion about SSR support.