# Quickstart
# Using as ES module
# Installation
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.53.0/mapbox-gl.css"
rel="stylesheet"
/>
# Using in browser
# Installation
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.53.0/mapbox-gl.css"
rel="stylesheet"
/>
<!-- Vue-mapbox CSS -->
<link
href="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.css"
rel="stylesheet"
/>
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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>
All components will be placed in global VueMapbox object (VueMapbox.MglMap
etc.)
# Migration from version 0.1.x
In version 0.2
you don't need to register VueMapbox as Vue plugin.
So you don't need this code anymore:
import VueMapbox from "vue-mapbox";
import Mapbox from "mapbox-gl";
Vue.use(VueMapbox, { mapboxgl: Mapbox });
Now you're ready for mapping. See how to create a map.