Vue.js, Use plugin methods

Question

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 "this.ExperienceToLevel is not a function".

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 don't want to assign it to window like window.UserLevel = new UserLevel().

UserLevel.js

/*
Create Levels array
 */
let Levels = [];
for (let i = 0; i < 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 > 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
};

I try to import the plugin into a component like this:

import { UserLevel, Levels } from './../../UserLevel';
Vue.use(UserLevel, { levels: Levels });

And use the global methods like so: this.ExperienceToLevel(this.xp)

tony19 · Accepted Answer · 2022-07-15 21:07:09Z

5

According to Vue documentation on Plugins, you have two options:

Declare those methods inside a mixin:

const UserLevel = {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                ExperienceToLevel(xp) { ... },
                LevelToExperience(level) { ... },
                ExperiencePercent(level) { ... },
            }
        })
    }
};

Or bind them to Vue.prototype:

Vue.prototype.$ExperienceToLevel = function (xp) { ... }
Vue.prototype.$LevelToExperience = function (level) { ... }
Vue.prototype.$ExperiencePercent = function (level) { ... }

I would go with the former.

edited Jul 15, 2022 at 21:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 19, 2017 at 21:55

ceferrari

1,7071 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

robbe clerckx Over a year ago

I vote for the former as well. I just noticed that calling a prototype method from a template loses the this object.

Collectives™ on Stack Overflow

Vue.js, Use plugin methods

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related