What is a Mixin in Vuejs ? Here's a simple explanation

TL;DR : A Mixin is a script file containing some logic that you can import into a vuejs component. It is structured exactly like in the script tag of a classic component. It's main objective is to prevent re-writing the same logic in multiple components.

For PHP folks out there, a mixin is basically like a Trait in php.

The official definitions states that a mixin is : "An array of option objects to be mixed into the current component."

The key word here is "mixed" into the component. Because when you import a mixin logic inside your component, you can still overwrite any of its methods, data, computed props, etc.

In a mixin, you can put anything you could put in the script section of a normal vue component.

Example:

One mixin I always use in all my vue project is the loading mixin:

// mixins/loading.js

export default {
    data () {
        return {
            isLoading: false,
        }
    },
    methods: {
        load () {
            this.isLoading = true
        },

        done () {
            this.isLoading = false
        },
    }
}

Vue Component :

<template>
    <div>
        <div v-if="isLoading">
            Loading...
        </div>
        <ul v-else>
            <li v-for="post in posts" :key="post.id">
                {{ post.title }}
            </li>
        </ul>
    </div>
</template>

<script>
import loading from './mixins/loading'
export default {
    mixins: [loading],

    data () {
        return {
            posts: []
        }
    },

    created () {
        this.getPosts()
    },

    methods: {
        getPosts () {
            this.load()
            axios.get('/api/posts')
                .then((response) => {
                    this.posts = response.data
                    this.done()
                })
        }
    }
}
</script>

You can of override the methods, data, props, etc in the component itself