Unlock the Power of Universal Vue Libraries

Are you tired of maintaining multiple codebases for your Vue libraries? Do you want to support both Vue 2 and Vue 3 without doubling your workload? Look no further than Vue Demi, a game-changing utility that allows you to write universal Vue libraries with ease.

The Problem with Traditional Approaches

Previously, creating Vue libraries that support both targeted versions required using different branches to separate the support for each version. While this approach is suitable for existing libraries with stable codebases, it’s not ideal for new libraries. Maintaining two codebases can be a nightmare, especially when implementing feature requests and bug fixes.

Introducing Vue Demi: The Solution You’ve Been Waiting For

Vue Demi solves this problem by providing universal support for both targeted versions, allowing you to build once and enjoy the benefits of both worlds. With Vue Demi, you can focus on writing code, not maintaining multiple codebases.

Extra APIs for Enhanced Functionality

Vue Demi introduces additional APIs to help you distinguish the user’s environment and perform version-specific logic. These APIs include:

• isVue2: enables you to apply version-specific logic for Vue 2
• isVue3: enables you to apply version-specific logic for Vue 3

Getting Started with Vue Demi

To get started with Vue Demi, simply install it into your application and add vue and @vue/composition-api as peer dependencies. Then, import Vue Demi into your application and start building your universal Vue component library.

npm install vue-demi
npm install --save-peer vue @vue/composition-api

Building a Universal Vue Component Library with Vue Demi

Let’s create a Vue component library that integrates the Paystack payment gateway. We’ll use Vue Demi to build a library that supports both Vue 2 and Vue 3. With Vue Demi, we can use standard Vue APIs like defineComponent, PropType, and h, and also take advantage of its extra APIs like isVue2.

import { defineComponent, PropType } from 'vue';
import { isVue2 } from 'vue-demi';

export default defineComponent({
  props: {
    paymentMethod: {
      type: PropType(),
      required: true,
    },
  },
  setup(props) {
    if (isVue2) {
      // Vue 2 specific logic
    } else {
      // Vue 3 specific logic
    }
  },
});

The Benefits of Using Vue Demi

By using Vue Demi, you can create universal Vue libraries that support both Vue 2 and Vue 3, without maintaining multiple codebases. This means you can focus on writing code, not managing multiple versions.

Experience the Power of Vue Demi Today

Try Vue Demi today and discover the benefits of building universal Vue libraries. With its powerful features and ease of use, Vue Demi is the perfect solution for any Vue developer looking to streamline their workflow.