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.
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]
This is indeed the correct way to do it, I do this every day. When you say the mixin 'is not recognized', what does that mean. Perhaps you have a method or property by the same name in BOTH mixins - this this case, you have a conflict and the last passed conflicting method/property will survive, overwriting previous one(s) as they vue instance is compiled.
