Embedding mapbox-gl object in Vue page? - vue.js

Question

I want to embed a mapbox-gl map in my Vue page. How do I get it to create the new object and attach it to the DOM? I need to create the new mapboxgl.Map() object and associate it with the DOM element.
Thanks!
My code:
<template>
<div id="map">
</div>
</template>
<script>
export default {
head () {
return {
script: [
{ src: 'https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js' }
],
link: [
{ rel: 'stylesheet',
href: "https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" }
]
}
},
map () {
return new mapboxgl.Map({
container: 'map',
center: [10.18440, -0],
zoom: 0.89,
interactive: false,
attributionControl:false
});
}
}
</script>
<style>
#map {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
</style>

Answer 1

Have you try on mounted event ?
export default {
head () {
...
},
methods: {
map: function () {
mapboxgl.accessToken = '<your access token here>'; // optional
return new mapboxgl.Map({
container: 'map',
center: [10.18440, -0],
zoom: 0.89,
interactive: false,
attributionControl:false,
// set your own style:
style: 'http://osm-liberty.lukasmartinelli.ch/style.json' // free
//style: 'mapbox://styles/mapbox/streets-v9'// access token required
});
}
},
mounted () {
let map = this.map()
map.addControl(new mapboxgl.NavigationControl());
}
}
it works fine ^^