Trouble importing Vue mixins into Webpack / vue-loader environment

Question

I’m having a small issue. Until this point, everything has been compiling fine, until trying to get mixins working properly. When creating one and using it all within a single file component – no problem. Works great. But when importing a mixin from an external file, it breaks the component. The external JS is even in the same directory.

Running Vue and vuex on Roots/Sage (webpack + vue-loader).

So the external file (slideBase.js) looks something like this:

export const slideBase = {
  // mixin here
};

I also tried:

export default {
  // mixin here
}

In the single file component:

<script>
  import { slideBase } from './slideBase.js'
  export default {
    name: 'slide-half-2',
    mixins: [slideBase],
    data() {
      ...
</script>

Anyone else running into mixin problems, or know what might be going on?

Cheers,

---

Edit: The console returns an error saying that one of my variables is undefined (placed above the vue import/exports -- just above the beginning <script> tag. The variables, of course, worked fine when calling the mixin from within the component file.

The mixin itself comprises of all the components computed properties -- and thus the Vue console in Chrome also is giving (error during evaluation) for each of the properties.

The vuex store is showing no errors.

No build errors.

The mixin looks like this, with the other objects left out for brevity, but correct syntax:

export const slideBaseTest = {
  computed: {
    BackToMulti() {
      if (typeof this.$store.state.slideInfo[prevSlideNumber] === 'undefined') {
      } else {
          if (this.$store.state.slideInfo[prevSlideNumber].thisSlideMulti == 'true') {
            return 'back-to-multi'
        } else {}
      }
    }
};

---

Edit 2: I may have found the issue, but am unaware of how to solve it:

The undefined variable showing in the console is prevSlideNumber. This is defined in the single file component just below the opening tag:

  const slideNumber = 2;

  var prevSlideNumber = slideNumber - 1;
  if (slideNumber == 'home') {
      var prevSlideNumber = 0;
  } else {}

The variable loads fine before creating an mixin (in an external file) for reuse. It also works fine when defining the same mixin within the single file component itself.

Is there an order of loading events that may be keeping the mixin from seeing the variable’s value? If the mixin is loading first, I could see why. Any way around this?

This is the external file mixin (with one of the computed properties, for brevity):

export default {
  computed: {
    BackToMulti() {
      if (typeof this.$store.state.slideInfo[prevSlideNumber] === 'undefined') {
      } else {
          if (this.$store.state.slideInfo[prevSlideNumber].thisSlideMulti == 'true') {
            return 'back-to-multi'
        } else {}
      }
    }
  }
};

Thank you very much. = )

Answer 1

It turns out that declaring free-floating variables -- that is, variables outside of the Vue instance was keeping mixins from working properly -- or at all. So this specific issue can be avoided in future cases by declaring all variables inside the data object, or inside methods, computed, etc.

So if anyone has a similar issue... Are you declaring variables below the beginning <script> tag, before Vue's imports/exports? This could be breaking your mixin.

No drawing outside the lines!