Know All About Mixin Use In Vue Js With Example

Vue Mixins are a flexible way to distribute a single code among all the component in the vue js project. which is reusable functionalities for the vue components.

In another word, we can say Mixins is a class of contains a method for other classes. They share the reusable code and property among the components.

The Mixins component object can contain any component of the project when you call that mixin asset into the component it will use mixins.

All the options in the mixin will be the part and asset of the that called own component or when you called mixin in the component that mixin object class property will be that part.

In Mixins we can define all that scrip which we define in root component but the difference is that defined mixin asset like methods and computed property can reusable many more time.

This will reduce your repetitive code and max reusable of your same methods and property.

So it writes one time and uses it over and over among the vue project component.

PREVIEW OUTPUT :

Here below I have given an example of the uses of mixin in vuejs.

Mixins.js

This is my mixin asset here I have to define a computed property so I can use that filter for the next component.

This computed property will filter that given data. Here we can also define the method and data property too.

src/mixins/searchMixins.js

export default {
    computed: {
        filterBlog() {
            return this.items.filter((blog) => {
                return blog.title.match(this.search)
            })
        }
    }
}

ExampleComponent.vue

This is our ExampleComponent where I will import that mixins asset with the name of searchMixins.

After importing that mixin asset define in mixins property.

src/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="form-group my-5">
            <label for="search">Search Title:</label>
            <input class="form-control" type="search" v-model="search">
        </div>
        
        <ul>
            <li v-for="(item,index) in filterBlog" :key="index">
                <span style="color:green">{{ item.title }}</span>
                <p style="color:red">{{ item.body }}</p>
            </li>
        </ul>
    </div>
</template>
    
<script>

import searchMixins from '../mixins/searchMixins' // IMPORT MIXIN 

export default {
    name:'ExampleComponent',

    data(){
        return {
            items:[],
            search:''
        }
    },

    created(){

        this.axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
            this.items = response.data
        })
    },

    mixins:[searchMixins] //CALLED MIXIN
}
</script>

App.vue

This is my root app component, Here I called my example component So we can display output.

src/components/app.vue

<template>
    <div id="app">
        <example-component></example-component>      
    </div>
</template>

<script>

import ExampleComponent from './components/ExampleComponent.vue'

export default {
    name: 'App',

    components: {
        ExampleComponent
    }
}
</script>

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)