Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Wrapper Components

Explore how wrapper components enable flexible integration of third-party Vue libraries by encapsulating components, managing props, events, and slots. Learn to simplify library transitions and add custom features consistently throughout your app.

We'll cover the following...

Vue applications usually use at least a few third-party libraries and components.

The vue-multiselect library

Let’s take the vue-multiselect package as an example. Applications with many forms could use a select component in quite a few places.

HTML
<template>
    <vue-multiselect :options="options" v-model="value" searchable label="name" />
</template>

What happens if we need to move away from vue-multiselect to a different library? There could be several reasons why we w’d to switch libraries, such as lack of maintenance, licensing changes, lack of specific features, or because we want to switch to the next version of Vue, but the library we’re using won’t provide a compatible version any time soon. If we have used the <vue-multiselect/> component directly, each file using it needs to be changed. That’s where wrapper components come into ...