web component with vue 3 - styles are not added

I'd like to export some of the components I use in my vue projects as web-component in order to be able to use them on other non-vue projects. I see that vue has support for this, and it exports web-components, but the issue I have is with the css - it is not included (or not useable) when using the exported webcomponent.

In order to make this case easy to reproduce, I'm using the default code generated when creating a new vue js 3 project. And the component I'd like to export as web component is the default App.vue we get with the new project.

Steps to reproduce:

create a standard vue (I have 3.2) project, with typescript and less.
Modify the main.ts like this:

    import { createApp, defineCustomElement } from 'vue'
    import App from './App.vue'

    createApp(App).mount('#app'). // this can be commented out

    const customApp = defineCustomElement(App);
    window.customElements.define('app-component', customApp);

add a new script in package.json:

    "build:wc": "vue-cli-service build --target lib --name AppComponent src/main.ts"

Modify the vue.config in order to include the style in exported bundle:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    extract: false,
  }
})

On HelloWord.vue I added a custom class to the first div (in order to be easier to find it in generated js library code) and inside the css (less in my case) block:

.hello { border: 1px solid green; background-color: #dedede; }

Run the build: npm run build:wc

This will create a new folder - dist - and inside it will put the exported webcomponent - AppComponent.udm.js is the file we need to import in order to have access to the newly exported component.

On the public folder I created a simple html file, test.html with this content:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web-Component</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="../dist/AppComponent.umd.js"></script>
</head>
<body>
    <app-component></app-component>
</body>
</html>

When I open this file, in chrome, I can see the webcomponent in my test.html I can see the component, but it has no css applied to it.

I opened the generated AppComponent.umd.js file and I see that the css was added to it (you can see the .hello class and its definition: border:1px solid green;background-color:#dedede):

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, "h3[data-v-1ac357d5]{margin:40px 0 0}ul[data-v-1ac357d5]{list-style-type:none;padding:0}li[data-v-1ac357d5]{display:inline-block;margin:0 10px}a[data-v-1ac357d5]{color:#42b983}.hello[data-v-1ac357d5]{border:1px solid green;background-color:#dedede}", ""]);

But.... the test.html file doesn't render correctly (as you can see in the following screen capture).

Questions:

How is the correct way to do this? How to export from vue 3 a webcomponent (with subcomponents - like I have in this case App.vue using HelloWordComponent) in order to get it rendered correctly (with css) by the browsers.

Is someone that had this issue? Some ideas? Some documentations/tutorials?

I try to export a VUE component as a webcomponent. I expect to get a full functional component - but I get it without style.

Recommended topics

Hot tags