Mapbox GL JS Vue.js

A Vue.js Mapbox component.



npm install mapbox-gl-vue --save


This package does not include the Mapbox GL JS and CSS files. They need to be included in the <head> of your HTML file. See Mapbox GL quickstart guide here:

If you decide to pull in Mapbox Gl via npm and use a module bundler you need to require it globally from your main js file like this: window.mapboxgl = require('mapbox-gl');

In your main js file:

import Mapbox from 'mapbox-gl-vue';
const app = new Vue({
    el: '#app',
    components: {
        'mapbox': Mapbox

In your HTML file:

<!-- #app -->
<div id="app">


If you are using Vueify in your build script the Mapbox component can be included as follows:

Vue.component('mapbox', require('mapbox-gl-vue/src/components/Mapbox.vue'));
const app = new Vue({
    el: '#app'


CSS needs to be added for the map to show up. The #map container needs a height and a width. Example:

#map {
	width: 100%;
	height: 500px;