vue-clipboard2 -> useClipboard

components/collection/HeroButtons.vue

@@ -43,8 +43,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="currentCollectionUrl"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(currentCollectionUrl)
+ ">
  {{ $i18n.t('share.copyLink') }}
  </NeoDropdownItem>
  <NeoDropdownItem @click="QRModalActive = true">
@@ -124,6 +126,8 @@ const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 
+const { copy } = useClipboard()
+
 const collectionId = computed(() => route.params.id)
 const currentCollectionUrl = computed(
  () =>

components/collection/unlockable/UnlockableHeroButtons.vue

@@ -13,8 +13,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="currentUrl"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(currentUrl)
+ ">
  {{ $i18n.t('share.copyLink') }}
  </NeoDropdownItem>
  <NeoDropdownItem @click="QRModalActive = true">
@@ -52,6 +54,7 @@ import {
  NeoModal,
 } from '@kodadot1/brick'
 
+const { copy } = useClipboard()
 const { $i18n } = useNuxtApp()
 const currentUrl = computed(() => window.location.href)
 

components/common/ConnectWallet/WalletAssetIdentity.vue

@@ -6,7 +6,11 @@
  :prefix="urlPrefix"
  variant="button" />
  <div class="is-flex is-flex-direction-column">
- <a v-clipboard:copy="account" @click="toast('Copied to clipboard')">
+ <a
+ @click="
+ toast('Copied to clipboard')
+ copy(account)
+ ">
  <NeoIcon icon="copy" />
  </a>
  <hr class="my-1" />
@@ -23,6 +27,7 @@ import { useIdentityStore } from '@/stores/identity'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import useIdentity from '@/components/identity/utils/useIdentity'
 
+const { copy } = useClipboard()
 const identityStore = useIdentityStore()
 const shoppingCartStore = useShoppingCartStore()
 const { urlPrefix } = usePrefix()

components/gallery/GalleryItemButton/GalleryItemShareBtn.vue

@@ -10,8 +10,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="realworldFullPathShare"
- @click="toast(String($t('toast.urlCopy')))">
+ @click="
+ toast(String($t('toast.urlCopy')))
+ copy(realworldFullPathShare)
+ ">
  Copy Link
  </NeoDropdownItem>
  <NeoDropdownItem @click="isModalActive = true">QR Code</NeoDropdownItem>
@@ -47,6 +49,7 @@ import { isMobileDevice } from '@/utils/extension'
 
 const QRCode = () => import('@/components/shared/QRCode.vue')
 
+const { copy } = useClipboard()
 const route = useRoute()
 const { $i18n } = useNuxtApp()
 const { toast } = useToast()

components/identity/module/IdentityLink.vue

@@ -5,8 +5,10 @@
  </a>
  <a
  v-if="showClipboard"
- v-clipboard:copy="address"
- @click="toast('Copied to clipboard')">
+ @click="
+ toast('Copied to clipboard')
+ address ? copy(String(address)) : null
+ ">
  <svg
  width="13"
  height="13"
@@ -33,6 +35,8 @@ const props = defineProps<{
  address?: Address
  showClipboard?: boolean
 }>()
+
+const { copy } = useClipboard()
 const { toast } = useToast()
 const { urlPrefix } = usePrefix()
 

components/identity/module/IdentityPopoverHeader.vue

@@ -11,11 +11,13 @@
  >
  </nuxt-link>
  <NeoIcon
- v-clipboard:copy="address"
  icon="copy"
  class="has-text-link is-clickable"
  data-cy="identity-clipboard"
- @click.native="toast('Copied to clipboard')" />
+ @click.native="
+ toast('Copied to clipboard')
+ copy(String(address))
+ " />
  </div>
  <a
  v-if="identity?.twitter"
@@ -36,6 +38,8 @@ const address = inject('address')
 const shortenedAddress = inject('shortenedAddress')
 
 const identity = inject<{ [x: string]: string }>('identity')
+
+const { copy } = useClipboard()
 const { urlPrefix } = usePrefix()
 const { toast } = useToast()
 </script>

components/profile/ProfileDetail.vue

@@ -62,11 +62,13 @@
 
  <div class="divider" />
  <NeoButton
- v-clipboard:copy="id"
  variant="text"
  :label="$t('share.copyAddress')"
  no-shadow
- @click.native="toast(`${$i18n.t('general.copyToClipboard')}`)" />
+ @click.native="
+ toast(`${$i18n.t('general.copyToClipboard')}`)
+ copy(id)
+ " />
  <div class="divider" />
  <NeoButton
  variant="text"
@@ -165,6 +167,8 @@ const { toast } = useToast()
 const { replaceUrl } = useReplaceUrl()
 const { accountId } = useAuth()
 const { urlPrefix } = usePrefix()
+const { copy } = useClipboard()
+
 const tabs = ['owned', 'created', 'collections', 'activity']
 
 const switchToTab = (tab: string) => {

components/transfer/Transfer.vue

@@ -23,8 +23,10 @@
  </template>
 
  <NeoDropdownItem
- v-clipboard:copy="generatePaymentLink(accountId)"
- @click="toast(`${$i18n.t('toast.urlCopy')}`)">
+ @click="
+ toast(`${$i18n.t('toast.urlCopy')}`)
+ copy(generatePaymentLink(accountId))
+ ">
  <NeoIcon icon="sack-dollar" pack="fa" class="mr-2" />{{
  $t('transfers.payMeLink')
  }}
@@ -48,9 +50,11 @@
  <Identity :address="accountId" hide-identity-popover />
  </span>
  <a
- v-clipboard:copy="accountId"
  class="ml-2"
- @click="toast(`${$i18n.t('general.copyToClipboard')}`)">
+ @click="
+ toast(`${$i18n.t('general.copyToClipboard')}`)
+ copy(accountId)
+ ">
  <NeoIcon icon="copy" />
  </a>
  </div>
@@ -278,6 +282,8 @@ const { initTransactionLoader, isLoading, resolveStatus, status } =
 const { toast } = useToast()
 const isTransferModalVisible = ref(false)
 
+const { copy } = useClipboard({ source: accountId })
+
 export type TargetAddress = {
  address?: string
  usd?: number | string

nuxt.config.js

@@ -167,7 +167,6 @@ export default defineNuxtConfig({
  '~/plugins/globalVariables',
  '~/plugins/pwa',
  '~/plugins/vueAudioVisual',
- '~/plugins/vueClipboard',
  '~/plugins/vueSocialSharing',
  '~/plugins/vueTippy',
  '~/plugins/safeHref',