How can i use global css

[kolesoffac]

I am creating a vue component in a no-vue app. This component uses global css, but web-vue-component doesn't see them.

Can this be solved somehow?

Thanks

[wbern]

I am creating a vue component in a no-vue app. This component uses global css, but web-vue-component doesn't see them.

Can this be solved somehow?

Thanks

Look at the source code in this package (around here https://github.com/TeliaSweden/vue-web-component-wrapper-ie11/blob/daaba736cd355e356d1d35faa188b7e2a85064db/src/index.js#L337), or just use it directly by reading the docs on "globalStyles".

https://www.npmjs.com/package/@telia/vue-web-component-wrapper-ie11

[kolesoffac]

Thanks for the answer.

I saw this package, i like it, but how can using it instead vue-web-component-wrapper? How do i say cli that i want use vue-web-component-wrapper-ie11?

[wbern]

Thanks for the answer.

I saw this package, i like it, but how can using it instead vue-web-component-wrapper? How do i say cli that i want use vue-web-component-wrapper-ie11?

Good point, and should be better documented for sure.

Just don't use --target wc, and import "wrap" as mentioned in the docs. 🙂 Then just export the "wrapped" result (or use define method immediately), and you're good.

Vue cli really doesn't do anything special beyond this in terms of web components.

You should probably add --target lib if you want to be able to import this export from vue cli, but if your vue cli is just the app itself, you're good.

[kolesoffac]

So I won't be able to use --target wc-async?

[wbern]

So I won't be able to use --target wc-async?

That's a good point, I had not heard of that mode until now. From what I understand, the way wc-async works is that it does customElements.define() and registers a custom element, but defers importing any actual javascript logic until the callback is called, using a dynamic import.

Edit: Ok, I think you should be fine using what the docs say here at the bottom of this section. https://www.npmjs.com/package/@vue/web-component-wrapper#usage

Note it works with async components as well - the async component factory will only be called when an instance of the custom element is created on the page:

const CustomElement = wrap(Vue, () => import(MyComponent.vue))
window.customElements.define('my-element', CustomElement)

[tommyrbullen]

Hello, are there any other solutions to using a global CSS stylesheet with this?

The package suggested above works (https://github.com/telia-oss/vue-web-component-wrapper-ie11) but it's not maintained.

Is there a simple way I can recreate this functionality in my code?

[wbern]

Hello, are there any other solutions to using a global CSS stylesheet with this?

The package suggested above works (https://github.com/telia-oss/vue-web-component-wrapper-ie11) but it's not maintained.

Is there a simple way I can recreate this functionality in my code?

IE 11 was declared dead and is no longer supported by MSFT so it not being maintained is fairly natural.

[rajeevverma076]

If I'm using a third-party library the dependency is now working vue a web component. Any solution for that? I'm using swiper and the vue-awesome-swiper plugin.