title: How to import a javascript modules in rails 5 with webpacker gem
body: <p>Good day all,</p>
  
  <p>Am pretty new to Vue.js and im experimenting with Vue.js in rails 5 using the webpacker gem. In a new rails 5 app i included the webpacker gem to Gem file and installed webpacker and then vue.js like so</p>
  
  <pre><code> rails webpacker:install
   rails webpacker:install:vue
  </code></pre>
  
  <p>Both components installed and when i start the servers all is well and it displays "Hello Vue" etc. FYI i also use "foreman" gem to start both rails server and webpack-dev server</p>
  
  <p>Now the thing is im trying to include "GoogleMapsApi.js" into this project but am finding it very hard to import this module.This is a javascript module thats on Github which basically loads Google Maps Api. I downloaded and copied it into the below directory</p>
  
  <pre><code>{Rails.root}/app/javascript/packs
  </code></pre>
  
  <p><a href="https://gist.github.com/mavame/b833b50085dc856acbccbb34ab1dbe92" rel="nofollow noreferrer">https://gist.github.com/mavame/b833b50085dc856acbccbb34ab1dbe92</a></p>
  
  <p>This is how my "app.vue" looks like. ps this file was created when i installed vue with webpack install command</p>
  
  <pre><code>   &lt;template&gt;
       &lt;div id="app"&gt;
         &lt;div id="map_canvas"&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/template&gt;
  
  &lt;script&gt;   
      export default {
        el: '#app',
        data: function () {
          return {
            message: "Helloooooo Vue!"
          }
        },
        mounted(){
  
          const gmapApi = new GoogleMapsApi();
            gmapApi.load().then(() =&gt; {
  
          var myOptions = {
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(-26.29217,28.070820000000026)
          }
          this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
          });
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now i do include this module inside application.js like so</p>
  
  <pre><code>     import 'GoogleMapsApi';
  </code></pre>
  
  <p>So when i run foreman i get this error.</p>
  
  <pre><code>    ERROR in ./app/javascript/packs/application.js
      Module not found: Error: Can't resolve 'GoogleMapsApi' in '/home/diego/Sites/vue-demo/app/javascript/packs'
  </code></pre>
  
  <p>The actual app that i'm on pulls both vue and google maps in using cdn script tags but i found these to be un reliable because sometimes google maps loads sometimes it doesnt. </p>
  
  <p>So im trying the webpacker but if not even able to do it inside a new app imagine the existing one.</p>
  
  <p>Please Help Thanks </p>