How to reuse the functionalities in vuejs using mixins?

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, How to reuse the functionalities in vuejs using mixins?

Mixins are a flexible way to distribute reusable functionalities for Vue components.
A mixin object can contain any component options.
When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

1. Vuejs
2. Bootstrap 5

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have  bootstrap 5.1.0 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
  <div class="container py-5">
    <div class="row">
      <div class="col">
       
        <h2>Message with Mixins</h2>
        <strong>{{ message }}</strong>

      </div>
    </div>
  </div>
</template>

<script>

//importing bootstrap 5 Modules

import mixin from "./mixin.js";
export default {
mixins: [mixin],
components: {
    
  },
 
  created: function () {
    this.message = this.msg //calling variable from mixin.js file using mixins
  
  //this.displayMessage(); //calling method from mxin.js file using mixins
  },
   data () {
        return {
        message : ""
        };
    },
}
</script>

3. Guys we need to create new file minix.js inside src folder and add below code inside it:

/*Mixins are a flexible way to distribute reusable functionalities for Vue components. 
A mixin object can contain any component options. 
When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.*/
export default {
    data () {
        return {
        msg: 'Hello World'
        };
    },
    created: function () {
       
       console.log('Printing from the Mixin')
    },
    methods: {
       displayMessage: function () {
          alert("Hello")
       }
    }
 }

Now we are done friends  also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks