title: Using vuejs plugin on the main.js file
body: <p>Im trying to create a plugin for manage the Oauth2 token data in my vuejs app.</p>
  
  <p>I created the plugin following some few tutorials that are available on the internet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var plugin = {}
  
  plugin.install = function (Vue, options) {
    var authStorage = {
      getToken () {
        let token = localStorage.getItem('access_token')
        let expiration = localStorage.getItem('expiration')
        if (!token || !expiration) {
          return null
        }
        if (Date.now() &gt; parseInt(expiration)) {
          this.destroyToken()
          return null
        }
  
        return token
      },
      setToken (accessToken, expiration, refreshToken) {
        localStorage.setItem('access_token', accessToken)
        localStorage.setItem('expiration', expiration + Date.now())
        localStorage.setItem('refresh_token', refreshToken)
      },
      destroyToken () {
        localStorage.removeItem('access_token')
        localStorage.removeItem('expiration')
        localStorage.removeItem('refresh_token')
      },
      isAuthenticated () {
        if (this.getToken()) {
          return true
        } else {
          return false
        }
      }
    }
  
    Vue.prototype.$authStorage = authStorage
  }
  
  export default plugin</code></pre>
  </div>
  </div>
  </p>
  
  <p>but when a try to access the methods on the main.js file, i get error saying that the object is undefined.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App'
  import router from './router'
  import AuthStorage from './AuthStorage.js'
  
  Vue.config.productionTip = false
  Vue.use(AuthStorage)
  
  router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(record =&gt; record.meta.requireAuth)) {
      if (!Vue.$authStorage.getToken()) {
        next({
          path: '/',
          query: { redirect: to.fullPath }
        })
      } else {
        next()
      }
    } else {
      next()
    }
  })
  axios.defaults.headers.common = {
    'Authorization': `Bearer ${Vue.$authStorage.getToken()}`
  }
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/eYO0x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eYO0x.png" alt="chrome console showing the error"></a></p>
  
  <p>Inside the components the plugin works as expected. The problem is when o try to use in the main.js file.
  I already tried with: 
  this.$authStorage
  this.authStorage
  Vue.authStorage</p>
  
  <p>no success</p>