How to save a set of vue components as a library/plugin?

Question

Vue.js

Good afternoon. The task is to use a micro-application on vue as a plug-in - and on different (by nature) resources. For example, so that you can connect at least in a spa based on vue-cli, even in wordpress (in the form of an embed code, for example, but then you need to pull up vue itself with cdn). I made this microapplication itself, but how to save it as a library?
I used the command

yarn run build --target lib --name bRentingCalc ./src/utils/b-renting-calc/index.js

, it creates a bunch of files in dist, with a total weight of > 800kb, which seems to be a lot for a library, especially for the one in question. In addition, I do not really understand what to do with these files next. How, for example, to make them friends with Wordpress or a regular html site? As part of the vue-cli project, I connected it in the usual way, using this plugin itself in index.js

import BRentingCalc from './BRentingCalc.vue'

export default {
  install(Vue) {
    Vue.component('b-renting-calc', BRentingCalc)
  }
}

in main.js of the project:

import BRentingCalc from './utils/b-renting-calc'
Vue.use(BRentingCalc)

And, finally, connecting in the project:

<b-renting-calc />

how to make this whole story universal, able to work as an embed code or some other plug-in on any site?

Answer 1

The web doesn't work that way.
Firstly, it is better to create several files with Vue, without Vue, embed, import, and depending on where you need to call the desired file. And everything is better through the assembler. I
suggest that you first take a look at the Vue guides. From there you can understand how to prepare. Then take a look at the npm guides.
Through crutches in runtime, you can implement the logic, but I suggest not to do this.
And it’s even better to open which thread someone else’s component is popular and study what and how