Updated April 11, 2023
Introduction to Vue.js Mixins
The Node js provides a Vue.js mixins function to the user. Basically in Vue.js mixins we define a collection of logic, stored in a specified defined path by using Vue, which can be reused again and again to add more functionality to Vue instances and components. It means Vue mixins provide functionality to share more than one component without repetition of code. With the help of Vue mixins you get options such as flexibility another option is we can mix both mixin and component options. It provides a better platform for code reusability. It is safe because it does not affect changes outside the scope.
Syntax:
var mixin = {
created: function () {
this.demo()
},
methods: {
demo: function() {
comsole.log(‘Welcome in demo mixin’)
}
}
}
Var component = vue.extend( {
Mixins: [newMixin]
})Explanation:
In the above syntax, in the first part we define the mixin object and second part of syntax contain components that use mixin.
How Mixins works in Vue.js?
- We must install Node.js 10.x and above on your system and you can verify by using node –v command in your terminal.
- We must install the latest version of Vue on your system.
- We must install the Vue CLI 3.0 version on your system.
- We require basic knowledge about Node.js.
- We require basic knowledge about Vue.js and components.
- With the help of Vue.js mixing we perform different operations.
Vue.js Mixins Components
Basically mixin provides a reusability option for components. The mixin object contains any component option and when we use mixin at that time all options in mixin are mixed into the components options.
Let’s see how we can implement Vue.js and components with different examples as follows:
Example #1
Simple Example of component.
For creating components we need to create a vue project, so first we create a vue project by using the following command.
Code:
vue create project nameSo first we create components such as Product.vue the code of Product component as follows:
Code:
<template>
<ul>
<li v-for="(product, index) in products" :key = "index" v-text="product"></li>
</ul>
</template>
<script>
export default {
data() {
return{
products:[]
}
},
created(){
this.products=this.loadProducts();
},
methods:{
loadProducts() {
return [
'product AA',
'product BB',
'product CC',
'product DD',
]
}
}
}
</script>Explanation:
- In the above component we use a script to display the product list, for that we have created a product array then we wrote a method to return the product list.
After that we add code in App.vue as follows:
Code:
<template>
<div id="app">
<product></product>
</div>
</template>
<script>
import Product from "./components/Product";
export default {
name: 'App',
components: {
Product
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: red;
text-align: left;
color: #103d6b;
margin-top: 70px;
}
</style>Explanation:
- In the above App.vue file we import the component Product.vue with different tags like style etc.
- In the above example we try to implement a simple component of vue.
- Illustrate the end result of the above declaration by using the use of the following snapshot.
Output:
Example #2
For more than two components.
Component 1 name as Product.vue:
Code:
<template>
<ul>
<li v-for="(product, index) in products" :key = "index" v-text="product"></li>
</ul>
</template>
<script>
export default {
data() {
return{
products:[]
}
},
created(){
this.products=this.loadProducts();
},
methods:{
loadProducts() {
return [
'product AA',
'product BB',
'product CC',
'product DD',
]
}
}
};
</script>Component 2 name as Site.vue:
Code:
<template>
<div>
<ul>
<li>Home_Site</li>
<li>About_Site</li>
<li>Contact_Site</li>
<li>Products
<ul>
<li v-for="(product, index) in products" :key = "index" v-text="product"></li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return{
products:[]
}
},
created(){
this.products=this.loadProducts();
},
methods:{
loadProducts() {
return [
'product AA',
'product BB',
'product CC',
'product DD',
]
}
}
}
</script>>App.vue file contain both component as follows:
Code:
<template>
<div id="app">
<product></product>
<hr />
<site></site>
</div>
</template>
<script>
import Product from "./components/Product";
import Site from "./components/Site";
export default {
name: 'App',
components: {
Product,
Site
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: red;
text-align: left;
color: #103d6b;
margin-top: 70px;
}
</style>Explanation:
- In above example we created two components such as Product.vue and Site.vue in both components contain the same code that means repetition of code are generated that increase size of file as well as increase line of code and create complexity in project.
- So the better solution is to use a mixin concept in vue.
- Illustrate the end result of the above declaration by using the use of the following snapshot.
Output:
Example #3
In this example we will see how we can use mixing with more than one component to avoid repetition of code.
Product.vue Component contain following code:
Code:
<template>
<ul>
<li v-for="(product, index) in products" :key = "index" v-text="product"></li>
</ul>
</template>
<script>
import product_mixin from "../mixin/product_mixin";
export default {
mixins: [product_mixin]
};
</script>Then we create a mixin file name as product_mixin.js and it contains the following code:
Code:
export default {
data() {
return{
products:[]
}
},
created(){
this.products=this.loadProducts();
},
methods:{
loadProducts() {
return [
'product AA',
'product BB',
'product CC',
'product DD',
]
}
}
};Explanation:
- In the above example we try to implement the vue mixin concept with components. See in this example we created a separate mixin file name as product_mixin.js as used in components and other things of the project are the same like the first example.
- Illustrate the end result of the above declaration by using the use of the following snapshot.
Output:
We can define mixin with different way like:
- Option Merging: When mixin and component contain the same value at that time we use option merging.
- Global Mixin: We can use mixin as globally.
Conclusion
From the above article we saw the basic syntax of Vue.js mixin function. We have also saw how we can implement them in node js with different examples. From this article we saw how we can handle Vue.js mixin as well as components in node js.
Recommended Articles
This is a guide to Vue.js Mixins. Here we discuss the introduction, working along with Vue.js mixins components respectively. You may also have a look at the following articles to learn more –
