Converting Your Vue 2 Mixins into Composables Using the Composition API

Introduction

There are two main ways to add additional functionality to our Vue components: mixins and composables. Adding mixins is similar to adding properties through the options API because you can add them by creating and "injecting" the properties into your Vue components. However, this comes with a couple of problems, the primary one being that mixins can lead to messy code and conflicting names. This is because they dump their properties into the component.

With the composition API that was introduced in Vue 3, we can mitigate the problems we just mentioned by using composables. The Vue team created composables as a better alternative to mixins that allow for greater code reuse and structure. Additionally, they are designed specifically for each component, and don't cause any naming issues. We'll see more of this later on. In this article, we'll show you how to take your mixins and turn them into composables for even more functionality and ease of maintenance.

The Structure of a Mixin

Now, before we say goodbye to mixins and embrace composables, we need to understand the main differences between the two. In a way, a mixin is like a bag of magic tricks you can easily add to your components to do their magic. However, having all these tricks in her one backpack can make it challenging to keep track of what's happening, especially if multiple components use the same mixin. For example; if there was a data property called message in our mixin, and a property by the same name (message) in our component, the mixin message would clash with our component's message (which would have been declared in the data section of our component).

We will be going over composables next. But before we do, here's an example of a mixin:

export const testMixin = {
  data() {
    return {
      message: "This message is in our mixin!"
    };
  },
  methods: {
    printMessage() {
      console.log('Message:',this.message);
    }
  }
};

In this example, the mixin contains a data function that returns an object with a message property, as well as a printMessage method that logs the given message to the console. To use this mixin in a component, the component would need to import the mixin, and add it to its mixins option:

import testMixin from './testMixin.js';

export default {
  mixins: [testMixin],
  // The rest of your code
};

Creating the Composable

Composables are a new feature that was added within the Vue 3 composition API. Composables are also called composition functions. They allow us to add functionality to components in a cleaner, more maintainable way. Instead of merging properties and methods directly into the component like in a mixin, composables are explicitly tailored to the component, and return a value or a set of reactive properties. What this means is that with composables, you can group all the functionality that is related together (rather than in separate data, computed, and methods sections). Again, you also don't have name collisions anymore because each call to a composable will give you an object that is not tied to your existing component. That means that you can resolve any naming conflicts at development time rather than breaking your application because of the same thing happening at runtime as is the case with mixins.

Here is a simple composable that achieves the same result as the mixin we had created earlier.

import { ref } from 'vue';

export const useMessage = () => {
  const message = ref("This message is in our composable!");

  const printMessage = () => {
    console.log(message.value);
  };

  return { message, printMessage };
};

Here's how the composable can be used in a .vue file component:

<script setup>
import { useMessage } from './useMessage';

const { message, printMessage } = useMessage();

// You can now access the message and printMessage in your template after extracting them from the useMessage composable
</script>

With this setup, the component will access the reactive message property and the printMessage method returned by the composable. Notice that composables allow us to add functionality to components more intuitively and easier to understand without the clutter of a mixin's structure.

In general, the naming convention for composables is useX, where X is the domain our composable is meant to represent. In this case, since our functionality is around our message, our composable is called useMessage.

Conclusion

In this article, we've explored how to convert Vue 2 mixins to Composition API composables. We started by understanding the structure of a simple Vue 2 mixin, which can make components challenging to maintain due to how they merge properties and methods directly into the component.

Next, we looked at how to create a composable in Vue.js 3's Composition API, which allows us to add functionality to cleaner and more maintainable components. Composables are explicitly tailored to the component and return a value or a set of reactive properties, making them easier to understand and use in components.

With this understanding of mixins and composables, developers can now confidently convert their Vue 2 mixins to Vue 3 composables, taking advantage of the new and improved functionality offered by the Composition API. By doing so, developers can create more manageable components to maintain, test, and debug, resulting in a better user experience for their applications.

Also, if you are looking to start a new Vue JS project and are not sure of how to structure your project, feel free to check out our Vue JS starter.dev GitHub showcases which showcase (no kidding) a mini-GitHub clone application built using Vue in different ways (eg. using Nuxt, Quasar, Vite, etc). Alternatively, if you are simply looking to start a new project without worrying about all the config required to do so, you can check out the Vue JS starter kit instead. Either way, thanks for stopping by!