Nuxt compatibility

[TheNoim]

This module doesn't seem to be compatible with Nuxt, because of map-promisified.

This is where the error happens:

(https://raw.githubusercontent.com/soal/map-promisified/master/dist/mapPromisify.js)

If I try to patch temporarily it and refactor the dist version to a normal module without window, then the error moves to this line:

Which is this line: https://github.com/soal/map-promisified/blob/master/src/promisifyMethod.ts#L27

I am not sure if this is a incorrect use of map-promisified by vue-mapbox or a bug in map-promisified.

nuxt: v2.4.3

[hoanglamyeah]

Nuxt have a special option for JS to be run only on client-side with ssr: false option: https://nuxtjs.org/guide/plugins#client-side-only

[ProjectINT]

I have same issue, can't add this module to nuxt. May somebody show example how to add as plugin with ssr: false? Or another way. I have done a few tries, but not solve this.

[michisp]

Just create a mapbox.js file in the plugins folder and initialize the components:

plugins/mapbox.js

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

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

Vue.prototype.$mapbox = Mapbox;

nuxt.config.js

plugins: [
    { src: '~/plugins/mapbox', mode: 'client' },
],

./compnents/Map.vue

<template>
  <div
    class="map"
  >
    <no-ssr>
      <MglMap
        :access-token="accessToken"
        :map-style="mapStyle"
        :center="center"
        :zoom="zoom"
        @load="onMapLoaded"
      >
        <MglGeolocateControl ref="geolocateControl" />
      </MglMap>
    </no-ssr>
  </div>
</template>

[ProjectINT]

Thank you very much for your solution, it works.

[transfluxus]

@michisp unfortunately this doent work for me.
I am getting the error message:

the page keeeps on loading forever (even tho I deactivate all privacy related browser plugins that could interfer.

[michisp]

@michisp unfortunately this doent work for me.
I am getting the error message:

the page keeeps on loading forever (even tho I deactivate all privacy related browser plugins that could interfer.

@transfluxus It seems like you do something mapbox specific on the server-side. Which nuxt version are you using? To use mode: 'client' in the nuxt.config.js you need nuxt >= 2.4. Else you have to use ssr: false which is deprecated in the next major release.

[transfluxus]

I think it is 2.4.5.
The mode for the plugin is client. In general (in the top of the nuxt.config.js it is universal .
Thanks for the fast response. appreciate it a lot.

[transfluxus]

I have 2 other plugins, they are just defined as string:

  plugins: [
    '@/plugins/vuetify',
    '~plugins/element-ui',
    { src: '~/plugins/mapbox', mode: 'client' },
],

[michisp]

@transfluxus Okay, i can't really tell you what's the problem. It could be something in your component. Don't forget that everything before the mounted lifecycle (created() for example) will also be executed on the server-side.

[transfluxus]

mmh, I created a new page just to test the map:

<template>
  <div
    class="map"
  >
    <no-ssr>
      <MglMap
        :access-token="accessToken"
        :map-style="mapStyle"
        :center="center"
        :zoom="zoom"
        @load="onMapLoaded"
      >
        <MglGeolocateControl ref="geolocateControl"/>
      </MglMap>
    </no-ssr>
  </div>
</template>

<script>
  import Mapbox from "mapbox-gl";
  import {MglMap} from "vue-mapbox";

  export default {
    name: "Map",
    components: {
      MglMap
    },
    data() {
      return {
        accessToken: "sk.eyJ1IjoicmFtaW4taWN0YSIsImEiOiJjanR6czVzYnUwazcyNDRtZ3htdmRla2x2In0.Gbsf8uPdWVWfTudW_vzhGA", // your access token. Needed if you using Mapbox maps
        mapStyle: 'mapbox://styles/mapbox/streets-v11', // your map style,
        location: null
      };
    },

    created() {
      // We need to set mapbox-gl library here in order to use it in template
      this.mapbox = Mapbox;
    }
  };
</script>

[transfluxus]

haha, I can trash that token :D

[michisp]

@transfluxus: Should be look like this:

<template>
  <div
    class="map"
  >
    <no-ssr>
      <MglMap
        :access-token="accessToken"
        :map-style="mapStyle"
        :center="center"
        :zoom="zoom"
        @load="onMapLoaded"
      >
        <MglGeolocateControl ref="geolocateControl"/>
      </MglMap>
    </no-ssr>
  </div>
</template>

<script>
  export default {
    name: "Map",
    data() {
      return {
        accessToken: "test", // your access token. Needed if you using Mapbox maps
        mapStyle: 'mapbox://styles/mapbox/streets-v11', // your map style,
        location: null
      };
    },
  };
</script>

You don't have to import mapbox and mapbox-vue because it's also done inside the nuxt.config.js. Just define your components like I did it in the ~/plugins/mapbox.js

[transfluxus]

I see the world!
climate change research thanks you 1000 times!

[transfluxus]

Hi,
after getting it to work I wanted to start displaying data on the map.
But however, besides the loaded style I cannot add anything to the map.

I see the Controls in the dom, but not in the Vue component tree (in the dev-addon).
e.g.

        <MglNavigationControl ref="navigationControl" position="bottom-right" />
        <MglGeolocateControl/>

        <MglPopup :coordinates="popupCoordinates">
          <span>Hello world!</span>
        </MglPopup>

no iead what ref means...

also I have to add all components in the plugin file:

import { MglMap, MglGeolocateControl, MglNavigationControl, MglPopup } from 'vue-mapbox';
import Mapbox from 'mapbox-gl';

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

If I import and add them to my map component/page the page wont load with window not defined error message.

[transfluxus]

ok, so the css import was missing, which can also be included in the page:

    head() {
        return {
            link: [{
                href: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css",
                rel: "stylesheet"
            }]
        }
    },