how to use mixins in normal javascrip file (not single file template)

Question

when googling about vue mixins, I've surprised that have so many guide about this topic, but all of demo code used single file template (or vue project template...). So how to use vue mixins in normal javascript file. My case like this:
First, I used php-yii2 template to develop my website (included botth backend and frontend). In frontend, I added vue.js file into my project to use vue features. Sometimes, have some generic function that can be re-use so I think vue mixins can resolve these case. In my approach, I will create a seperate .js file to declare mixins object, then other vue object (in other .js files) can re-use that mixins object method.
Do you have any ideas for my case. Thank you so much.

Answer 1

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;
    }
}