VueJS multiple mixins

Question

I have an error in my script I do not know to fix. I want to import multiple mixins I created.

import GoogleMaps from '../mixins/GoogleMaps.js';
import MFApi from '../mixins/MFApi.js';

    export default {
        template: require('../templates/map.html'),
        mixins: [GoogleMaps, MFApi],
(...)

But this doesn't seem to work. How do I need to set the mixins variable properly if it is more than one?

As soon as I add the new mixin to the variable, the first one is not recognized anymore.

Answer 1

Maybe you have a case like this. If you export a named module, not just by default, then you need to import it using curly braces.

In my mixin folder I have "regExpressions.js" file:

export const convertImage = {
  methods: {
   ...your methods here
  }
}

and "truncateString.js" file:

export default {
  methods: {
   ... your code here
  }
}

In my component I import my mixins.

import { convertImage } from "@/mixins/regExpressions";
import truncateString from "@/mixins/truncateString";

mixins: [truncateString, convertImage]