Vue.js - How to Avoid Code Duplication - vue.js

Question

How does one avoid code duplication when using something like computed properties across multiple components?
An example is that I have a computed property to get the parent route name - it's pretty simple:
computed: {
parent_route () {
return this.$route.matched[0].name
}
}
I am finding that I use this computed property across multiple components. How could I store this in one place that all my components can use?

Answer 1

You can use Mixins. For the most general case there's the Global Mixin (use with care):
Vue.mixin({
computed: {
parent_route () {
return this.$route.matched[0].name
}
}
})
The this.parent_route computed property is now automatically defined in all components.
But you should avoid abusing global mixins. Instead, you can apply them locally using Option Merging (the mixins option):
var mixin = {
computed: {
parent_route () {
return this.$route.matched[0].name
}
}
};
new Vue({
mixins: [mixin],
data: function () {},
created: function () {
console.log(this.parent_route) // should be ok
}
})

Answer 2

You can use mixins. Create myMixin.js file with:
export const myMixin = {
computed: {
parent_route () {
return this.$route.matched[0].name
}
}
}
Then you can import it in your vue component like this:
import {myMixin} from '../myMixin.js' //valid path to myMixin.js file here
and register it:
...
data {...},
mixins: [myMixin],
methods: {...}
...
More on mixins:
https://v2.vuejs.org/v2/guide/mixins.html