Vue component: The best ways to extend it for your eCommerce website

A few weeks back, someone reached out over our email with a question about how to add some additional supports that took place within the bounds of a Vue component. So, through this email, we figure out that this component is considered to be one of the most prominent factors for your business. As a result, extension methods are something that we should consider for your eCommerce website.

Vue component for your site
Vue component for your site

All in all, doing this could save you from duplicating code, making your components quicker to develop and easier to maintain. Also, there are a number of APIs and patterns that Vue offers for this, and you’ll need to choose the right one depending both on your goals and personal taste. So now, we – ArrowHiTech would like to introduce to you guys the best way to extend your Vue component for better software development.

Do you need to extend your Vue component?

Moreover, you should always keep in mind that all methods of extending components can add complexity to your code, and in some cases, additional performance overhead. So before you decide to extend a component, it’s a good idea to first check if there are simpler design patterns that can achieve what you want. The following component design patterns can often be sufficient substitutes for extending a Vue component:

  • Props-driven template logic
  • Slots
  • JavaScript utility functions
Do you really need to extend the Vue component?
Do you really need to extend the Vue.js component?

However, after you’ve considered the simpler design patterns above, yet none of these are flexible enough for what you need. So, it’s time to consider extending your component. There are some popular methods that we would like to mention to extend your Vue component. Also, each of these has its pros and cons and will be more or less suitable depending on the situation in which you want to use them. They are:

  • Composition functions
  • Mixins
  • Higher-order components
  • Renderless components

So let’s check them out.

Some ways to extends the Vue component

#1. Composition functions

To clarify, the state-of-the-art way to share state and logic between components is the Composition API. This API is included in Vue 3, or available as a plugin in Vue 2. Rather than defining your component with properties on the Vue component definition object e.g. data, computed, methods, etc, the Composition API allows you to instead create a setup function where you declare and return these.

However, the Composition function has noticeable disadvantages. Yet, the disadvantages of the Composition API are only superficial – it can be slightly more verbose and uses syntax that may be unfamiliar to some Vue users. Check out an example of these functions:

 <template><!--as above--><template>
 <script>
 import { reactive, computed } from "vue";

 export default {
   setup() {
     const state = reactive({
       count: 0,
       double: computed(() => state.count * 2)
     });
     function increment() {
       state.count++
     }
     return {
       count,
       double,
       increment
     }
   }
 }
 </script>

#2. Mixins of Vue component

If you’re using Vue 2 or simply prefer to organize your component features by options, you can use the mixin pattern. So here, we extract any shared logic and state into a separate object that gets merged with the definition object of a consuming component. To use the mixin, a consuming Vue component can simply import the module and add it to the mixins array in its definition.

Normally, local options will override mixin options. This is not always the case, though. For example, if you have multiple lifecycle hooks of the same type, they all will be called sequentially. Yet, as a pattern for extending components mixins work well for simple cases but will become problematic as you scale. In other words, it’s often hard to understand what a Vue component does and how it works by using mixins. For example:

 import CounterMixin from "./CounterMixin";

export default {
  mixins: [CounterMixin],
  methods: {
    decrement() {
      this.count--;
    }
  }
}

#3. Higher-order components (HOCs)

This module is “borrowed” from the React world, yet we can also use that for the Vue component. So, to understand the concept, imagine we had two simple JavaScript functions, increment and double. Say we wanted to add a feature to both of these functions. To do this, we’re going to use the higher-order function pattern where we create a new function addLogging instead. This accepts a function as an argument and returns a new function with the feature attached. 

While the HOC pattern is clean and more scalable than mixins, it adds the overhead of an additional wrapper component and is tricky to implement. Yet, the actual code for doing this is complicated, so the example below will be only for your reference:

 function addLogging(fn) {
  return function(x) {
    const result = fn(x);
    console.log("The result is: ", result);
    return result;
  };
}

const incrementWithLogging = addLogging(increment);
const doubleWithLogging = addLogging(double);

#4. Renderless Vue component

So, if you want to have the same logic and state across multiple components, only display it differently, consider the renderless component pattern. When using this pattern we have two types of Vue component. They are logic components that declare the logic, state, and presentation components for display.

Renderless components when using Vue component
Renderless components when using Vue.js

Logic components

Imagine that we wanted to reuse this component across several apps but display it differently each time. We’ll create CounterRenderless.js which is the definition of the logic component. It contains the state and logic but has no template. Instead, it uses a render function to declare a scoped slot. Also, the scoped slot exposes three props for use in the parent. Firstly the state, count, the method, increment, and the computed property, double.

Presentation components

A presentation component is to consume the renderless Vue component and provide a fleshed-out display. Then, all the display markup goes into the scoped slot. As you can see, the scoped properties provide the same render context that we’d have if this template were directly attached to the logic component. This is easy to understand. However, it’s not as versatile as the previous methods. Also, it really only has one use case – making component libraries.

Final words

That should be it! Here are some of the best ways to extend the Vue component for your business. All in all, the idea, from the outset, was to show how to implement identical functionality using the different mechanisms Vue provides for extending its capabilities. So, it is largely up to you to decide which method is appropriate for your project. Also, just remember, there’s no one-size-fits-all approach to anything.

We – ArrowHiTech is proud to be one of the most great outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best Vue JS development services for your business.

Tags

Share