Creating global mixins

We can create and apply a mixin globally by using Vue.mixin():

Vue.mixin({
  mounted () {
    console.log('hello from mixin!')
  }
})

Global mixins must be defined before you instantiate the Vue instance:

const app = new Vue({
  //...
}).$mount('#app')

Now, every component you create will be affected and show that message. You can find this example in /chapter-5/vue/mixins/global.html in this book's GitHub repository. If you run it on your browser, you will see the console.log message appear on every route as it spreads across all the route components. In this way, we can see the potential harm that could be done if it's misused. In Nuxt, we create global mixins in the same way; that is, by using Vue.mixin(). Let's take a look:

1. Create a mixin-utils.js file in the /plugins/ directory, along with the function for loading images from the /assets/ directory:

// plugins/mixin-utils.js
import Vue from 'vue'

Vue.mixin({
  methods...