refactor: vueClipBoard to useClipboard

nuxt.config.js

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

package.json

@@ -114,7 +114,6 @@
     "vite": "*",
     "vue-apollo": "^3.1.0",
     "vue-audio-visual": "2.5.0",
-    "vue-clipboard2": "^0.3.3",
     "vue-dompurify-html": "^4.1.4",
     "vue-infinite-loading": "^2.4.5",
     "vue-social-sharing": "^3.0.9",

plugins/vueClipboard.ts

@@ -1,5 +1,26 @@
-// import Vue from 'vue'
-// import VueClipboard from 'vue-clipboard2'
+export default defineNuxtPlugin((nuxtApp) => {
+  const { text, copy, copied, isSupported } = useClipboard({ legacy: true })
 
-// Vue.use(VueClipboard)
-export default defineNuxtPlugin(() => undefined)
+  nuxtApp.vueApp.directive('clipboard', {
+    beforeMount(el, { value, arg }) {
+      useEventListener(el, 'click', () => {
+        switch (arg) {
+          case 'copy':
+            copy(value)
+            break
+        }
+      })
+    },
+  })
+
+  return {
+    provide: {
+      clipboard: {
+        text,
+        copy,
+        copied,
+        isSupported,
+      },
+    },
+  }
+})