VueJS：将mixin应用于异步组件

Question

I am using Webpack 2 and importing my components via special require syntax.

There are over 100 components, but only 5-10 used at a time. Most of them (but not all) partially have same functionality like props and lifecycle hooks.

Here is code:

// app.js
...

Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

...

I want to apply mixin to async component, but how to do that? Global mixin apply to all components, but that's not what I need.

I found that feature request , but it closed.

Answer 1

I found some creepy(?) solution, but it works :

// mixins.js
export default class Mixins {
   static fooMixin() {
     return {
       created: function () {
         console.log('mixin hook called');
       }
     }
   }
}

// app.js
Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

// foo.vue
<script>
  import Mixins from "mixins";

  export default {
    ...
    mixins: [Mixins.fooMixin()]
  }
</script>

But I hope that there is a more elegant solution.