title: Vue.js, Use plugin methods
body: <p>I am building a SPA with Vue for the first time. I am going to re-use a couple of functions but can't seem to make it work. I get the error <code>"this.ExperienceToLevel is not a function"</code>. </p>
  
  <p>At the same time, I'm not even sure creating a plugin is the best way to achieve what I am trying to. Which is, making some functions global "the Vue way". I <strong>don't</strong> want to assign it to <em>window</em> like <code>window.UserLevel = new UserLevel()</code>.</p>
  
  <p>UserLevel.js</p>
  
  <pre><code>/*
  Create Levels array
   */
  let Levels = [];
  for (let i = 0; i &lt; 100; i++) {
      let xp = Math.floor(Math.pow(i, 1.3) * 100);
      Levels.push(xp);
  }
  
  /*
  Create UserLevel Plugin
   */
  const UserLevel = {
      install(Vue, options) {
          Vue.ExperienceToLevel = function (xp) {
              for (const [level, levelXP] of Object.entries(options.levels)) {
                  if (levelXP &gt; xp) {
                      return level-1;
                  }
              }
          }
  
          Vue.LevelToExperience = function (level) {
              return options.levels[level];
          }
  
          Vue.ExperiencePercent = function (level) {
              return ((this.xp - this.LevelToExperience(this.level)) / (this.LevelToExperience(this.level + 1) - this.LevelToExperience(this.level))) * 100;
          }
      }
  };
  
  export {
      Levels,
      UserLevel
  };
  </code></pre>
  
  <p>I try to import the plugin into a component like this:</p>
  
  <pre><code>import { UserLevel, Levels } from './../../UserLevel';
  Vue.use(UserLevel, { levels: Levels });
  </code></pre>
  
  <p>And use the global methods like so: <code>this.ExperienceToLevel(this.xp)</code></p>