0Pricing
Vue Academy · Lesson

Mixins and Custom Directives

Reuse logic with mixins and build custom directives.

Reusing Logic

As apps grow you find the same logic in many components. Vue offers several ways to share it. This lesson covers two: the older mixins approach and powerful custom directives.

What Is a Mixin?

A mixin is an object with component options (data, methods, hooks) that gets merged into any component that uses it. It was the classic way to reuse logic in Vue 2.

export const loggerMixin = {
  created() {
    console.log("Component created")
  },
  methods: {
    log(msg) { console.log(msg) }
  }
}

All lessons in this course

  1. Mixins and Custom Directives
  2. Plugin Development
  3. Scalable Folder Structure
← Back to Vue Academy