ol-map.vue

<!-- ol-map.vue -->
<template>
  <div :style="style"></div>
</template>

<style scoped>
  #themap {
    width:100%;
    height:100%;
    margin:0px;
    padding: 0px;
  }
</style>

<script>
  const ol = require("openlayers");
  module.exports = {
    name: "OLMap",
    props: {
      style: String,
      autoCenter: Boolean
    },
    mounted() {
      this.olmap = new ol.Map({
        target: this.$el,
        loadTilesWhileAnimating: true,
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 13
        })
      });
      // http://openlayers.org/en/latest/apidoc/ol.Map.html#on
      this.olmap.on("moveend", (evt) => {
        // floating openlayer event to inside the vue's ViewModel
        this.$emit("moveend", evt);
      });
      if ("geolocation" in navigator) {
        /* geolocation is available */
        navigator.geolocation.getCurrentPosition((pos) => {
          if (this.autoCenter) {
            const lon = pos.coords.longitude;
            const lat = pos.coords.latitude;
            this.olmap.getView().setCenter(ol.proj.fromLonLat([pos.coords.longitude, pos.coords.latitude]));
          }
        }, (err) => {
          console.log(err);
        });
      }
    },
    data() {
      return {
        olmap: null
      };
    }
  };
</script>