[Vuejs]-How to use mixins in normal javascrip file (not single file template)

by

0👍

Your mixin definition (some-mixin.js):

const someMixin = {
    computed: {
        aSharedComputed() {
            // do something
        }
    },
    methods: {
        aSharedMethod(aParam) {
            // do something
        }
    },
};

export {
    someMixin,
};

Inside a component (your-component.js) you can now tell the component that you want to consume this mixin:

import { someMixin } from './some-mixin.js`; 

export default {
    name: 'SomeComponent',
    mixins: [
        someMixin
    ],
}

and then you can just use whatever you defined in the mixin in your template:

<span>{{ aSharedComputed }}</span>

and also code:

methods: {
    someLocalMethod() {
        this.aSharedMethod();
        this.aSharedComputed;
    }
}

Leave a comment