VueUse: How to use the isSupported variable multiple times?-CodePudding

I want to make a fallback for a share button.

If useShareDialog isSupported = open ShareDialog
If useShareDialog !isSupported = copy to Clipboard
If useClipboard !isSupported = don't show the share button

VueUse has the useShare and useClipboard functions. But both use the same variable to check if the function is supported with the isSupported variable

How I can separate them?

Vue Component

<script setup>
import {
    useClipboard, useShare
} from '@vueuse/core'

const { share, isSupported } = useShare({
        title: 'Marcus Universe Portfolio',
        text: 'Look at my awesome portfolio',
        url: 'https://marcus-universe.de',
})


const {copy, copied, isSupported} = useClipboard({
    source: 'https://marcus-universe.de'
})

function shareTrigger() {
    if(isSupported) {
        share()
    } else {
        copy()
    }
}
</script>

<template>
 <button 
    
    @click="shareTrigger()" 
    v-if="isSupported">
      {{ copied ? 'copied to clipboard' : 'Share' }}
  </button>

</template>

CodePudding user response：

You can rename variable:

const { share, isSupported: isSupportedShare } = useShare({...})
const {copy, copied, isSupported: isSupportedClipboard} = useClipboard({...})