Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to create mixins to make our code reusable.
Mixins
Mixins are a flexible way to let us add reusable functionalities to Vue components.
A mixin object can have any component options.
When a component uses a mixin, the mixin will be merged into the component’s own options.
For example, we can create a mixin and use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>app</p>
</div> <script>
const mixin = {
created() {
this.foo();
},
methods: {
foo() {
console.log("foo");
}
}
}; const app = Vue.createApp({
mixins: [mixin]
}); app.mount("#app");
</script>
</body>
</html>
We called Vue.createApp with an object that has the mixins property.
The value is our mixin mixin.
It’s just an object that has the component properties in the places we expect.
They’ll be merged into the component automatically.
Therefore, the this.foo method will be called and we’ll see the console log run.
Option Merging
The options will be merged using the appropriate strategies.
The component’s data take priority over the mixin in case there are any conflicts.
Hook functions with the same name are merged into an arraty so that all of them will be called.
So if we have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>app</p>
</div> <script>
const mixin = {
created() {
console.log("mixin hook");
}
}; const app = Vue.createApp({
mixins: [mixin],
created() {
console.log("app hook");
}
}); app.mount("#app");
</script>
</body>
</html>
Then we have the 'mixin hook' and 'app hook' logged in that order.
Options that expect object values like methods , components , and directives will be merged into the same object.
The component’s option will take priority when there’re conflicting keys.
So if we have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>app</p>
</div> <script>
const mixin = {
methods: {
foo() {
console.log("foo");
},
conflicting() {
console.log("mixin conflicting");
}
}
}; const app = Vue.createApp({
mixins: [mixin],
methods: {
baz() {
console.log("bar");
},
conflicting() {
console.log("app conflicting");
}
}
}); const vm = app.mount("#app");
vm.conflicting();
vm.foo();
vm.baz();
</script>
</body>
</html>
Then we’ll see:
app conflicting
foo
baz
logged.
The Vue instance’s conflicting method is used over the mixin one.
But foo and baz are incorporated into the Vue instancem since there’re no conflict between them.
Global Mixin
We can create global mixins with the app.mixin method.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>app</p>
</div> <script>
const app = Vue.createApp({
foo: "bar"
}); app.mixin({
created() {
const foo = this.$options.foo;
console.log(foo);
}
}); app.mount("#app");
</script>
</body>
</html>
We added the foo property to our Vue instance.
This is accessed with the this.$options property in our mixin.
So we’ll see 'bar' logged from our created hook.
Once we apply a mixin globally, then it’ll affect every Vue instance created afterwards.
Conclusion
Mixins are reusable pieces of code that can be incorporated into our Vue components.
