https://github.com/willtpwise/vue-comp-package
https://github.com/willtpwise/vue-comp-package
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/willtpwise/vue-comp-package
- Owner: willtpwise
- Created: 2020-01-27T21:30:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:52:32.000Z (over 3 years ago)
- Last Synced: 2025-03-05T17:51:57.227Z (over 1 year ago)
- Language: JavaScript
- Size: 414 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 33
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Overview
This repo has two directories:
* `package`: A shared Vue.js library which exposes a `my-button` component
* `client`: A Vue.js app which consumes the `my-button` component
## The Issue
The Vue Composition API throws an error when a component library (using the composition api) attempts to use one of the composition API methods (e.g. `ref()`).
*In this reproduction:*
1. The client installs the Vue Composition API, then the package in [client/src/main.js](client/src/main.js)
1. The package globally installs the [my-button component](package/src/my-button.vue) inside of the package's [install function](package/src/index.js)
1. The client renders the my-button component in [App.vue](client/src/App.vue)
1. The browsers throws an error:
```
[Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(plugin) before using any function."
```
## Steps to Reproduce
### Build The Package
```
cd package
npm i
npm run build
```
### Run The Client
```
cd client
npm i
npm run serve
```
Now open http://localhost:8080
You should see a heading and a button. The button is a component exposed by the package. Both of these elements are rendering their content from a `ref` declared inside of a `setup` function of their respective components. The button's content however is not rendered due to the issue above.