You can install vue-mapbox via npm. Take note that you need to install mapbox-gl as peer dependency:
npm install --save vue-mapbox mapbox-gl
Add mapbox CSS file to <head></head>
block of your HTML file (e.g. index.html
)
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
You need to set up vue-mapbox as a plugin for Vue and pass mapbox-gl as argument:
import Vue from 'vue'
import VueMapbox from 'vue-mapbox'
import Mapbox from 'mapbox-gl'
Vue.use(VueMapbox, { mapboxgl: Mapbox })
new Vue({
el: '#app',
render: h => h(require('./App'))
})
Add Vue, MapboxGL and Vue-mapbox scripts on your page:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<!-- Vue-mapbox -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"></script>
<!-- ... -->
</head>
</html>
Register plugin and add base map component to your application:
Vue.use(VueMapbox.plugin, { mapboxgl: window.mapboxgl })
All components will be placed in global VueMapbox object (VueMapbox.MglMap
etc.)
Now you're ready for mapping. See how to create a map.