title: Embedding mapbox-gl object in Vue page?
body: <p>I want to embed a mapbox-gl map in my Vue page. How do I get it to create the new object and attach it to the DOM? I need to create the new mapboxgl.Map() object and associate it with the DOM element.</p>
  
  <p>Thanks!</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div id="map"&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      head () {
          return {
              script: [
                  { src: 'https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js' }
              ],
              link: [
                  { rel: 'stylesheet',
                  href: "https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" }
              ]
          }
      }, 
      map () {
          return new mapboxgl.Map({
              container: 'map',
              center: [10.18440, -0],
              zoom: 0.89,
              interactive: false,
              attributionControl:false
              });
          } 
      }
  &lt;/script&gt;
  
  &lt;style&gt;
      #map {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
      }
  &lt;/style&gt;
  </code></pre>