Mixins are a way for us to abstract out reusable functionality in our Vue code. Made popular in the frontend world by Sass, the concept of mixins is now present in a number of modern JavaScript frameworks.
Mixins are best used when we have some functionality that we would like to reuse across a number of components. In the example that follows, we will create a very simple Vue app, which will show two Bootstrap alerts on the page. When a user clicks on either of the alerts, the browser's viewport dimensions will be logged out to the console.
For this example to work, we will need to get some plain HTML components from the Bootstrap framework. Specifically, we will use the alert component.
The official documentation on this Bootstrap component can be found at this link: https://getbootstrap.com/docs/4.1/components/alerts/.
It is important to note that Bootstrap components and Vue components are different things and should not be confused.
The app, when run, will produce this...