title: Using a Vue plugin in another Vue plugin
body: <p>I am rebuilding my website using Vue in the frontend and Django Rest Framework in the backend. Since the authentication/headers/error handling for all the AJAX calls is going to be the same I figured I should put that in some shared file. So I created a <code>fetchPlugin.js</code> that deals with that and I plugged it into my Vue instance under <code>$fetch</code>.</p>
  
  <p>To put up notifications I am using <code>vue-notification</code>, with a simple call to <code>$notify</code> I can put up notifications anywhere. Except in my <code>$fetch</code> plugin. Inside of a callback function of the fetches in my plugin the calls do work when I use it like <code>Vue.prototype.$notify</code>. But directly inside of function it does not. See my commented code here:</p>
  
  <pre class="lang-js prettyprint-override"><code>let fetchPlugin = {}
  fetchPlugin.install = function(Vue, options){
      Vue.prototype.$fetch = {
  
          get(url, processingFunction, show_loading=false, extra_options={}){
              if(show_loading){
  
                  // This call does not work
                  Vue.prototype.$notify({
                      group: 'loading',
                      title: 'Loading...',
                      type: 'success'
                  })
              }
  
              let default_options = {
                  credentials: 'same-origin',
              }
              options = Object.assign(default_options, extra_options)
              fetch(url, options)
                  .then(function(response){
                      if(show_loading){
  
                          // This call works
                          Vue.prototype.$notify({
                              group: 'loading',
                              clean: true
                          })
                      }
                      if(!response.ok){ throw response }
                      return response.json()
                  })
                  .then(processingFunction)
                  .catch(err =&gt; {
                      console.log(err)
  
                      // This call also works
                      Vue.prototype.$notify({
                          group: 'fetch',
                          title: 'An error occurred',
                          type: 'error'
                      })
                  })    
          }
      }
  }
  export default fetchPlugin
  </code></pre>
  
  <p>In my <code>main.js</code> I am importing and using <code>vue-notification</code> before my <code>fetchPlugin</code>, so I figured I would have access to the <code>$notify</code> function that <code>vue-notification</code> added. Since during the setup time there is no Vue instance yet to reference:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.use(Notification)
  Vue.use(fetchPlugin)
  </code></pre>
  
  <p>But apparently that doesn't quite work as I expected. Why does accessing <code>$notify</code> work inside of the <code>.then</code> functions but not outside of them? How can I get the loading notification to work?</p>
  
  <hr>
  
  <p>Update: I have verified with <code>console.log(Vue.prototype)</code> that <code>$notify</code> is present both in the fetch callback function and in the beginning of my plugin's <code>get</code> function. Otherwise it would of course also throw some exception in my face. The question is then why no notification will popup if the function is called correctly and no exception happens?</p>