How to create mapbox gl with vuejs - vue.js

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<MglMap :accessToken="accessToken" :mapStyle="mapStyle" />
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";
export default {
components: {
MglMap
},
data() {
return {
accessToken: "pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw", // your access token. Needed if you using Mapbox maps
mapStyle: "mapbox://styles/aishwerya/ckc5ufmlw0nu11ip289o79bkl" // your map style
};
},
created() {
// We need to set mapbox-gl library here in order to use it in template
this.mapbox = Mapbox;
}
};
</script>
I created the mapbox-gl map but it showing blank screen
I have tried with this link but it didnt worked
I dont what Im missing it clearly shows me blank screen

Answer 1

Here is a simple way to integrate the mapbox application using Vue 2. This example doesn't require NPM or import statements. I would be careful about including your api key on public forums. I have included your api key in order for this example to work.
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<style>
#project { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
<div id="project"></div>
<script>
var mapping = new Vue({
el: '#project',
data: {
map: ''
},
mounted(){
mapboxgl.accessToken = 'pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw';
//create a new mapbox instance
this.map = new mapboxgl.Map({
container: 'project',
'style' : 'mapbox://styles/mapbox/light-v10'
});
//fit the united states to the screen
this.map.fitBounds([[-135, 47], [-60, 25]]);
}
});
</script>