[Compatibility] Support for SSR (Nuxt, VuePress, Gridsome)

[matthewmorek]

After trying to implement Mapbox using this component (as well as the original vue-mapbox), I got blocked by lack of support for SSR.

The component is so problematic for SSR that even when forced to load only on the client (safeguarding with <ClientOnly/> element in Gridsome and importing it via dynamic import, it's impossible to not have unhandled promise rejection errors while building the site.

MglMap: async () =>
  await import("v-mapbox")
    .then((m) => m.MglMap)
    .catch(),

Where would one start when it comes to making this component compatible with SSR? I'll be happy to contribute, but I also noticed that there's quite a few outstanding PRs, and so I wonder whether it won't become stale.

[michisp]

Hey,
for Nuxt I've created a mapbox.js file inside the plugins folder which registers the Components i need.
Inside the nuxt.config.js I've added this plugin in client-mode. After that you have to add the css files to the layout, page or component and you are ready to use mapbox inside the -tag

/plugins/mapbox.js

/* eslint-disable import/no-extraneous-dependencies */
import Vue from 'vue';
import {
  MglMap,
  MglGeolocateControl,
  MglGeojsonLayer,
  MglMarker,
} from 'v-mapbox';

Vue.component('MglMap', MglMap);
Vue.component('MglGeolocateControl', MglGeolocateControl);
Vue.component('MglMarker', MglMarker);
Vue.component('MglGeojsonLayer', MglGeojsonLayer);

/nuxt.config.js
plugins: [ { src: '~/plugins/mapbox', mode: 'client' }, ],