Self contained web components

[pbek]

Thanks a lot for this great way to wrap Vue components as web components!

I have a question, is there a way to include all external libraries, like Vue itself (and for example Vuetify and even Stylesheets) in the resulting javascript that you get when calling something like yarn build --target wc --name my-element?
By default Vue has to be loaded in the html, for example by <script src="https://unpkg.com/vue"></script>.
I'm in need of a really self-contained web-component.

[karol-f]

This is this library approach (and it's good in my opinion, as stated in https://micro-frontends.org).
To have mini apps as Web Components you can manually wrap components in JS (using this library) or use Vue-custom-element

[pbek]

Thank you, @karol-f! You using https://github.com/karol-f/vue-custom-element would currently be the best way to create a self-containing web component?

[karol-f]

I would use official version (vue-web-component-wrapper). But if it's constraints don't suit You and you need browser support down to IE9 - go ahead with vue-custom-element.

About vue-web-component-wrapper - first try to use JS Web Component's registering (wrap(Vue, Component)) - that way maybe you can import to your JS what you want.

[pbek]

About vue-web-component-wrapper - first try to use JS Web Component's registering (wrap(Vue, Component)) - that way maybe you can import to your JS what you want.

Thank you, I tried that, but so far I was not able to create one javascript file with all the imported libraries with yarn build --target wc --name my-element, regardless if I import them in src/main.js or the component (src/App.vue in my case).

Do you know if there is a special way to import e.g. Vue other than import 'vue'?

[pbek]

src/main.js:

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import App from './App.vue'

const CustomElement = wrap(Vue, App)
window.customElements.define('my-element', CustomElement)

[karol-f]

If You create WC with CLI (yarn build --target wc --name my-element) don't use JS wrap.
What I said - don't use CLI but register WC using wrap in JS.

[pbek]

You mean I should not use vue cli at all to build the custom component, but setup my own deployment pipeline?

[karol-f]

Use it but as for regular app (without --target wc). But I don't know if you will get what you want - just test different approaches.

[pbek]

Right now I got as far as using require('../node_modules/vuetify/dist/vuetify.min'); in the main.js and @import '../node_modules/vuetify/dist/vuetify.min.css'; in the <style> part of the App.vue to bundle Vuetify when building with yarn build --target wc --name my-element src/main.js.

What remains is bundling Vue itself.

[pbek]

I gave up on it and switched to your https://github.com/karol-f/vue-custom-element with a rollup build pipeline. Thanks a lot for your help and your vue-custom-element, @karol-f!