Making a vue component library

How to:
https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3

https://itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

Learn good structure from the existing ones:

https://www.codeinwp.com/blog/vue-ui-component-libraries/
https://blog.logrocket.com/top-10-vue-component-libraries-for-2020/
https://github.com/vuejs/awesome-vue
https://github.com/bootstrap-vue/bootstrap-vue

Learnings on structure:




Learnings on errors:
vue + webpack + babel

--> importing a library locally sucks real bad !!!!!!!!!!!!

When imported as file:

Gives out an error like:
Cannot assign to read only property 'exports' of object '#<Object>'
and will take you to many misleading / unrelated threads on mixing import / export and module.exports and require.
like: https://github.com/webpack/webpack/issues/4039

and read the ins-and-outs of export and import and module.exports and require 😅😅

and finally stumble upon this post and realise that as usual the node ecosystem is shitty..
https://forum.vuejs.org/t/vue-cli-does-not-work-with-symlinked-node-modules-using-lerna/61700
and the solution provided also does not work..
and then you stop to consider that may be you are not making a mistake..
and things just don't work as documented.

You modify your search strategy to your new hypothesis:
Then you stumble upon:
https://forum.vuejs.org/t/export-default-imported-as-components-was-not-found-in-mylib/63905/17
which confirms your doubts.

So import like:
$ npm install --save git+file://../../../path_to/folder_with/package-json

And some extra steps are performed by npm, and the process is similar to importing from a remote git repo

Although the final entry for the both of them end up looking the same.. First does not work (makes you waste a lot of time) and second works like a charm.