app.use(VueCliboard) has error

[Web-engineer-han]

Argument of type 'typeof import("E:/workSpace/git/.../node_modules/@soerenmartius/vue3-clipboard/dist/vue3-clipboard")' is not assignable to parameter of type 'Plugin_2'. Property 'install' is missing in type 'typeof import("E:/workSpace/git/.../node_modules/@soerenmartius/vue3-clipboard/dist/vue3-clipboard")' but required in type '{ install: PluginInstallFunction; }'. 31 | render: () => h(App) 32 | })

33 | app.use(VueClipboard)

[soerenmartius]

Thanks for reporting this. Which vue version are you using?

[aranoe]

I am getting a similar error with fresh project using @vue/cli@next:

[Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ runtime-core.esm-bundler.js?5c40:38
use @ runtime-core.esm-bundler.js?5c40:2955
eval @ main.js?56d7:7
./src/main.js @ app.js:85
__webpack_require__ @ app.js:364
checkDeferredModulesImpl @ app.js:1474
__webpack_require__.x @ app.js:1487
(anonymous) @ app.js:1494
(anonymous) @ app.js:1495
runtime-core.esm-bundler.js?5c40:38 

[Vue warn]: Failed to resolve directive: clipboard 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
resolveAsset @ runtime-core.esm-bundler.js?5c40:5139
resolveDirective @ runtime-core.esm-bundler.js?5c40:5110
render @ index.js??clonedRuleSet-39.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!./src/App.vue?vue&type=template&id=7ba5bd90:8
renderComponentRoot @ runtime-core.esm-bundler.js?5c40:710
componentEffect @ runtime-core.esm-bundler.js?5c40:4193
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:4176
mountComponent @ runtime-core.esm-bundler.js?5c40:4134
processComponent @ runtime-core.esm-bundler.js?5c40:4094
patch @ runtime-core.esm-bundler.js?5c40:3715
render @ runtime-core.esm-bundler.js?5c40:4791
mount @ runtime-core.esm-bundler.js?5c40:3022
app.mount @ runtime-dom.esm-bundler.js?830f:1226
eval @ main.js?56d7:7
./src/main.js @ app.js:85
__webpack_require__ @ app.js:364
checkDeferredModulesImpl @ app.js:1474
__webpack_require__.x @ app.js:1487
(anonymous) @ app.js:1494
(anonymous) @ app.js:1495

runtime-core.esm-bundler.js?5c40:2887 Uncaught TypeError: Cannot read property 'created' of undefined
    at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:2887)
    at mountElement (runtime-core.esm-bundler.js?5c40:3823)
    at processElement (runtime-core.esm-bundler.js?5c40:3792)
    at patch (runtime-core.esm-bundler.js?5c40:3712)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3897)
    at processFragment (runtime-core.esm-bundler.js?5c40:4057)
    at patch (runtime-core.esm-bundler.js?5c40:3708)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4211)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)

My main.js:

import { createApp } from "vue";
import App from "./App.vue";

import VueClipboard from "@soerenmartius/vue3-clipboard";

createApp(App).use(VueClipboard).mount("#app");

My App.vue:

<template>
  <input v-model="value" />
  <button v-clipboard="value">Copy</button>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const value = ref("lorem");

    return { value };
  }
};
</script>

And package.json

{
  "name": "prettier-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@soerenmartius/vue3-clipboard": "^0.1.0",
    "core-js": "^3.8.1",
    "vue": "^3.0.4",
    "vue-router": "^4.0.1",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/eslint-parser": "^7.12.1",
    "@vue/cli-plugin-babel": "~5.0.0-alpha.0",
    "@vue/cli-plugin-eslint": "~5.0.0-alpha.0",
    "@vue/cli-plugin-router": "~5.0.0-alpha.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0-alpha.0",
    "@vue/cli-plugin-vuex": "~5.0.0-alpha.0",
    "@vue/cli-service": "~5.0.0-alpha.0",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^7.15.0",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "prettier": "^2.2.1",
    "sass": "^1.30.0",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.2",
    "vue-jest": "^5.0.0-0"
  }
}

Could be a bug with the latest alpha build of vue?

[soerenmartius]

Found the error, will provide a fix during the next two days! Thanks for being patient! Meanwhile as a workaround, you can use the standalone method as documented here. I am gonna update this issue once I fixed the method! Thank you!

[soerenmartius]

Hey guys, sorry for the late reply. I took two days longer than expected but everything should work now as expected.

Please update to v0.1.1 and correct the import statement in your main.ts|js to import { VueClipboard } from '@soerenmartius/vue3-clipboard'

Let me know if there's anything else I can help with 👍