# # 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.