Methods imported in Vue Mixin not found by Transition

Question

I have methods for a jQuery style slide animation which I use across many components. In order to DRY up my code while fixing a bug with it I tried to move the methods to a mixin, but now I'm just getting an error on load:

Property or method "slideEnter" is not defined on the instance but referenced during render

Here's what I've done so far; what do I need to fix from this?

transition-mixins.js

exports = {
  slideEnter: function() {...},
  slideLeave: function() {...}
}

my-component.vue

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition 
       v-on:enter="slideEnter"
       v-on:leave="slideLeave">
         <p v-show="show">My Content</p>
    </transition>
  </div>
</template>

<script>
  import TransitionsMixin from '../transitions.js'

  export default {
    name: 'my-component',
    mixins: [TransitionsMixin],
    data: function() {
      return {
        show: false
      }
    }
  }
</script>

Answer 1

Your mixin is not correct.

Check the docs here: https://v2.vuejs.org/v2/guide/mixins.html

You have to put your functions in a methods object which then gets merged with your components methods object.

transition-mixins.js

export default {
  methods: {
    slideEnter: function() {...},
    slideLeave: function() {...}
  }
}