Writing basic and global mixins

A mixin is just a JavaScript object that can be used to contain any component option, such as created, methods, mounted, and so on. They can be used to make these options reusable. We can do this by importing them into a component and "mixing" them with the other options in that component.

Using mixins can be useful in some situations, such as in Chapter 2, Getting Started with Nuxt. We know that when Vue Loader compiles the <template> blocks in single-file components, it converts any encountered asset URLs into webpack module requests, like so:

<img src="~/assets/sample-1.jpg">

The preceding image will be converted into the following JavaScript code:

createElement('img', {
  attrs: {
    src: require('~/assets/sample-1.jpg') // this is now a module request
  }
})

This isn't difficult if you insert the image manually. But in most cases, we'll want to insert images dynamically, as follows:

// pages...