If i load component from an external dir using a webpack alias (created in vue.config.js) composition components don’t work properly.
I created a repository to test the setup: https://github.com/mikimoresi/vapcompvuex
This are the issues:
- If I don’t use " import Vue from ‘vue’; import VueCompositionApi from “@vue/composition-api”; Vue.use(VueCompositionApi); " in the components, Vue alerts me that I must use Vue.use before. This not happens if the component is in the same src of the main project.
- If I use " import Vue from ‘vue’; import VueCompositionApi from “@vue/composition-api”; Vue.use(VueCompositionApi); " in the components, the components is kinda working but I get " [Vue warn]: The setup binding property “xxx” is already declared. " for any property
- If I try to use a lifecycle hooks like onMount i get this error " Error in data(): "Error: [vue-composition-api] “onMounted” get called outside of "setup() “”
It looks like the problem occur only when I load my components from an external directory via alias. Once I load components from dirs inside main project dir anything starts working properly.
We need components to be in an external dir because we use them in different projects. We prefer to not use them as node modules because is faster while developing. We would love to maintain the webpack alias method if possible.