Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals

Dealing with Vue mixins

A lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

Duration: 06:04 | Last Modified 29 May 2021

This is a preview lesson only

Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Dealing with Vue mixins

One of the things that you will bump into frequently when exploring the VSF1 code, are mixins. Let's discuss what they are and how they are being used.

Vue mixins in VSF

  • Regular components with .vue files
  • Component mixins written in TypeScript
    • A component can merge itself with a mixin

Mixins are being phased out in favor of the Composition API

A large portion of the VSF1 logic is based on mixins, which were popular in Vue 1 and Vue 2, but are phased out with Vue 3. Within Vue 3, with which VSF1 is not compatible, the composition API should be used instead.

Mixins can be seen as components with a template. They are not identical to a renderless component though. Mixins are more similar to PHP traits, as in that they allow for multiple inheritence (one component object inheriting properties from multiple other objects). In short, a component is able to inherit properties from a mixin.

Because a mixin is not a component, it is not defined in a *.vue file (Single File Component) but a separate JavaScript file. In VSF1, a mixin is often also defined as a *.ts file (TypeScript) to allow for type checks, to make the mixin code less error-prone.

Mixins

Mixin file mixins/example.js:

export default {
    data() {
        return { foo: 'bar' };
    }
}

Component file Example.vue:

import exampleMixin from "mixins/example"

export default {
    mixins: [exampleMixin],
    data() {
        return { foo: 'bar2' };
    }
}

Let's go through a little example: A mixin file could be defined somewhere to export an object. The object itself reuses the options that are available in the Options API (like data, methods, props, etcetera). Once a component is importing the mixin and declaring it under an mixins array, all of the options from the mixin are mixed into the component object, before the component object becomes a full blown Vue component.

In general, options within the component take precendence over the options in the mixin. In other words, in the example here, both the component and the mixin define the same reactive value foo, but the component wins so that the value of foo becomes bar2. In other words, the component options are merged together with the mixin merging. When merging options, the option type actually determines how this merging takes place: Data options in the component override data options in the mixin. But lifecycle methods (aka hooks) are chained. And methods are merged again.

For full details see https://vuejs.org/v2/guide/mixins.html

Mixins in VSF1

  • Mixins per component
    • Examples: SearchIcon, Login
  • Granular mixins
    • Examples: AddToCart, IsOnCompare, ProductAttribute, VueOfflineMixin

In VSF1, mixins are all over the place. Some mixins like the AddToCart mixin contain all functionality of the component. For instance, the AddToCart component looks like this:

export default {
  name: 'AddToCart',
  mixins: [ AddToCart ]
}

In other places, mixins are more granular, more specific. For instance, a component could use multiple mixins - each mixin for a different behaviour. For instance, the a-add-to-compare.vue component in the Capybara theme uses the following mixins:

export default {
    ...
    mixins: [IsOnCompare, AddToCompare, RemoveFromCompare]
    ...
}

It is best to browse the source code to get an impression of how many mixins are out there.

Summary

  • Mixins are a fundamental Vue 2 feature in VSF1
  • Mixins can be general purpose or specific to a component
  • Options are merged in different ways (see the docs)

To summarize this, mixins are an essential feature in VSF1, even though it is phased out with Vue 3. They are either specific to a component or more general purpose and used in multiple components. And do make sure to read the Vue docs - https://vuejs.org/v2/guide/mixins.html - for details on how options are being merged together.

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo