How to register a global lodash mixin for Vue and webpack

Question

I want this mixin

_.mixin({
  memoizeDebounce: function (func, wait = 0, options = {}) {
    const mem = _.memoize(function () {
      return _.debounce(func, wait, options)
    }, options.resolver)
    return function () {
      mem.apply(this, arguments).apply(this, arguments)
    }
  }
})

To be available everywhere I import lodash. How do I do that? I tried to assign it right in my main.js where Vue is initially started, but the mixin didn't make it to the vuex stores that I wanted to use it in.

__WEBPACK_IMPORTED_MODULE_12_lodash___default.a.memoizeDebounce is not a function

How do I do this?

I am using webpack 3.12.0 that came with vue-cli.

Answer 1

you coud approach it like this:

import * as _ from 'lodash';

const utilsMixin = {
  computed: {
    _: () => _,
  },
};

export default utilsMixin;

And then import it in your file like this:

Vue.mixin(utilsMixin);