From 4532e09ac067518fe607d7079b2761c783f36505 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Thu, 17 Feb 2022 17:48:13 +0100
Subject: [PATCH] feat(clipboard): replace `navigator.clipboard` with vueuse
 `useClipboard` (#33)

---
 docs/pages/components/[component].vue   | 10 +++-------
 src/runtime/plugins/clipboard.client.ts |  7 +++++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 638a76cf24..40fdd9babc 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -91,6 +91,7 @@
 </template>
 
 <script setup>
+import { useClipboard } from '@vueuse/core'
 import $ui from '#build/ui'
 
 const nuxtApp = useNuxtApp()
@@ -363,14 +364,9 @@ function toKebabCase (str) {
   return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
 }
 
-const copied = ref(false)
+const { copy, copied } = useClipboard({ copiedDuring: 2000 })
 const onCopy = () => {
-  navigator.clipboard.writeText(code.value).then(() => {
-    copied.value = true
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  })
+  copy(code.value)
 }
 
 const code = computed(() => {
diff --git a/src/runtime/plugins/clipboard.client.ts b/src/runtime/plugins/clipboard.client.ts
index d0af479eaf..61b92796db 100644
--- a/src/runtime/plugins/clipboard.client.ts
+++ b/src/runtime/plugins/clipboard.client.ts
@@ -1,13 +1,16 @@
 import { defineNuxtPlugin } from '#app'
+import { useClipboard } from '@vueuse/core'
 import { ClipboardPlugin } from '../types'
 
 export default defineNuxtPlugin((nuxtApp) => {
+  const { copy: copyToClipboard, isSupported } = useClipboard()
+
   function copy (text: string, success: { title?: string, description?: string } = {}, failure: { title?: string, description?: string } = {}) {
-    if (!navigator?.clipboard) {
+    if (!isSupported) {
       return
     }
 
-    navigator.clipboard.writeText(text).then(() => {
+    copyToClipboard(text).then(() => {
       if (!success.title && !success.description) {
         return
       }