cannot get to work with nuxt

[mgiraldo]

i already tried what is described in #43 and #32 and am trying to get to a simple hello world example using nuxt.

this is what i did:

• installed mapbox-gl and vue-mapbox-gl (with yarn add mapbox-gl mapbox-gl-vue)
• i have a pages/test.vue which contains the following template (i want to display stamen rastertiles):

<template>
  <no-ssr>
    <mapbox
      access-token=""
      :map-options="{
        center: [-122.420679, 37.772537],
        zoom: 13,
        style: {
          sources: {
            stamen: {
              type: 'raster',
              tiles: ['http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'],
              tileSize: 256,
              attribution: `Map tiles by <a target='_top' rel='noopener' href='http://stamen.com'>Stamen Design</a>, under <a target='_top' rel='noopener' href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a target='_top' rel='noopener' href='http://openstreetmap.org'>OpenStreetMap</a>, under <a target='_top' rel='noopener' href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>`
            }
          },
          layers: [
            {
              id: 'stamen',
              type: 'raster',
              source: 'stamen',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        }
      }"
      @map-init="mapInited"
      @map-load="mapLoaded"
    >
    </mapbox>
  </no-ssr>
</template>

• this is the js:

<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  head: {
    script: [
      { src: 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js' }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css'
      }
    ]
  },
  components: { Mapbox },
  methods: {
    mapInited(map) {
      console.log('inited', map)
    },
    mapLoaded(map) {
      console.log('loaded', map)
    }
  }
}
</script>

• and the css:

<style lang="scss" scoped>
#map {
  height: 100vh;
}
</style>

the mapInited event gets called but not the mapLoaded. i only see an empty map with controls:

any idea what i am missing?

[mgiraldo]

ok i figured it out! just in case anyone needs it (need to follow #43 first) this is my code now, a bit more streamlined because the plugin takes care of most of that (i'm using a maptiler map):

<template>
  <no-ssr>
    <mapbox
      access-token=""
      :map-options="{
        center: [-122.420679, 37.772537],
        zoom: 13,
        style:
          'https://api.maptiler.com/maps/basic/style.json?key=MY_KEY'
      }"
      @map-init="mapInited"
      @map-load="mapLoaded"
    >
    </mapbox>
  </no-ssr>
</template>

export default {
  methods: {
    mapInited(map) {
      console.log('inited', map)
    },
    mapLoaded(map) {
      console.log('loaded', map)
    }
  }
}