Categories
Development

How to access VueJS Mixin within imported JS Library

I have a ‘commonLibrary.js’ which I’ve imported into my Vue app.

A small snippet of this library (and a good example) is:

var defaultDecimalRounding=3

function formatNumber(number) {
    if (isNaN(number.value) == true) { return '-' }
    return numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding));
}

So whenver “formatNumber” is called, it returns a number to a decimal rounding, based on the variable “defaultDecimalRounding”

What I’d like to do is move this defaultDecimalRounding variable out of the commonLibrary.js and into my Vue App so it can be changed within the app.

I’ve created a Mixin, as follows:

Vue.mixin({
    data: function () {
        return {
            get defaultDecimalRounding() { return 3 },
        }
    },
});

But I can’t seem to get my formatNumber function to read this defaultDecimalRounding Mixin.

I don’t mind doing a code-rewrite for the commonLibrary.js, there’s only a dozen or so functions in there, but it would be nice to know how to get VueJS and an imported JS library talking to each other for future projects.

Leave a Reply

Your email address will not be published. Required fields are marked *