title: Not able to use $http or Vue.http
body: <p><strong>FOLLOW UP</strong></p>
  
  <p>A combination of comments answered this question. A followup is why the import/require statements matter. I thought the effectively did the same thing.</p>
  
  <p><strong>ORIGINAL QUESTION</strong>
  I'm trying to use <code>vue-resource</code> to make REST calls to an API. I have up to now a working Vue app that also uses <code>vue-material</code> and it works nicely. I'm just having trouble getting a reference to the http "object" through which I can make get/post/put calls. </p>
  
  <p>The stack is basically <code>vue-cli</code> to create a webpack/npm project. <code>vue-resouce</code> is definitely in <code>package.json</code>:</p>
  
  <pre><code>"vue": "^2.2.1",
  "vue-resource": "^1.3.1"
  </code></pre>
  
  <p><code>main.js</code> looks like this:</p>
  
  <pre><code>import Vue from 'vue';
  Vue.use(require('vue-material'));
  Vue.use(require('vue-resource'));
  
  import App from './App.vue'
  
  console.log(this.$http);
  
  new Vue({
  el: '#app',
  //other stuff
  });
  
  console.log(this.$http);
  </code></pre>
  
  <p>I put those <code>console.log</code> statements because I was initially getting errors like</p>
  
  <pre><code>cannot read property 'post' of undefined vue resource
  </code></pre>
  
  <p>Sure enough, both log statements yield "undefined". <code>Vue.http</code> yields the same.</p>
  
  <p>What am I doing wrong here? Interestingly, <code>vue-material</code> is working fine...</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Checking inside the Vue instance still yields undefined:</p>
  
  <pre><code>mounted: () =&gt; {
      console.log(this.$http);
  }
  </code></pre>
  
  <p><strong>UPDATE 2 -- a solution that works</strong></p>
  
  <p><strong>Thanks for the comments</strong>, a combination of them solved it. Firstly change the <code>require</code> to import:</p>
  
  <pre><code>import VueResource from 'vue-resource';
  Vue.use(VueResource);
  </code></pre>
  
  <p>And use the old way of creating a function for <code>mounted</code>:</p>
  
  <pre><code>mounted: function () {
      console.log(this.$http);
  }
  </code></pre>