docs(examples): use useClipboard instead of navigator.clipboard

Author: benjamincanac

docs/app/components/content/examples/input/InputCopyButtonExample.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-const value = ref('npx nuxt module add ui')
-const copied = ref(false)
+import { useClipboard } from '@vueuse/core'
 
-function copy() {
-  navigator.clipboard.writeText(value.value)
-  copied.value = true
+const value = ref('npx nuxt module add ui')
 
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
-}
+const { copy, copied } = useClipboard()
 </script>
 
 <template>
@@ -25,7 +19,7 @@ function copy() {
           size="sm"
           :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
           aria-label="Copy to clipboard"
-          @click="copy"
+          @click="copy(value)"
         />
       </UTooltip>
     </template>

docs/app/components/content/examples/table/TableExample.vue

@@ -2,13 +2,15 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -220,7 +222,7 @@ const columns: TableColumn<Payment>[] = [{
     }, {
       label: 'Copy payment ID',
       onSelect() {
-        navigator.clipboard.writeText(row.original.id)
+        copy(row.original.id)
 
         toast.add({
           title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableRowActionsExample.vue

@@ -2,12 +2,14 @@
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
+import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -119,7 +121,7 @@ function getRowItems(row: Row<Payment>) {
   }, {
     label: 'Copy payment ID',
     onSelect() {
-      navigator.clipboard.writeText(row.original.id)
+      copy(row.original.id)
 
       toast.add({
         title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableSlotsExample.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'
 
 interface User {
   id: number
@@ -10,6 +11,7 @@ interface User {
 }
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 const data = ref<User[]>([{
   id: 1,
@@ -71,7 +73,8 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
       label: 'Copy user Id',
       icon: 'i-lucide-copy',
       onSelect: () => {
-        navigator.clipboard.writeText(user.id.toString())
+        copy(user.id.toString())
+
         toast.add({
           title: 'User ID copied to clipboard!',
           color: 'success',

playground/app/pages/components/table.vue

@@ -3,13 +3,15 @@ import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn, TableRow } from '@nuxt/ui'
 import { getPaginationRowModel } from '@tanstack/vue-table'
+import { useClipboard } from '@vueuse/core'
 
 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -231,7 +233,7 @@ const columns: TableColumn<Payment>[] = [{
     }, {
       label: 'Copy payment ID',
       onSelect() {
-        navigator.clipboard.writeText(row.original.id)
+        copy(row.original.id)
 
         toast.add({
           title: 'Payment ID copied to clipboard!',