How to make Vue and Vite work with web components?

Question

I want to migrate my Vue 2 project from webpack to Vite. And have to use 3rd party web components that built with lit-element.

Those components throws errors during the runtime (by vue):

Unknown custom element: < foo-component > - did you register the component correctly? For recursive components, make sure to provide the "name" option.

And also (by lit-element)

Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.

As far as I can see those 3rd party web components do only this in theirs index files (inside node_modules):

import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);

So before (with webpack setup) I just imported them and everything used to work. Well, actually for webpack lit-scss-loader was used also for those components.

I assume that Vite perhaps needs some additional configuration, or maybe something similar to "webpack" loader is needed here, but not sure what direction I have to move.

What I'm doing wrong?

score 7 · Answer 1 · answered Jun 17 '22 at 23:52

Configure @vite/plugin-vue to ignore Lit elements, e.g., elements starting with my-lit in their registered name:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all components starting with `my-lit` as custom elements
          isCustomElement: tag => tag.startsWith('my-lit'),
        },
      },
    }),
  ],
})

demo

score 1 · Accepted Answer · edited Aug 17 '23 at 13:27

A couple of steps are needed.

Imagine I have 3rd party webcomponents named "foo". So all of them are in node_modules/@foo.

I need to do these steps:

Tell Vite that all components starting with "foo-" are webcomponents.

isCustomElement: (tag) => tag.startsWith('foo-')
Add the "postcssLit" plugin to help vite prepare the CSS for the webcomponents.
Tell Vite how to treat CSS paths for webcomponents.

'~@foo': fileURLToPath(new URL('./node_modules/@foo', import.meta.url))

Here is the full config:

//vite.config.ts

import postcssLit from 'rollup-plugin-postcss-lit';

export default defineConfig({
  plugins: [
    vue(
      {
        template: {
          compilerOptions: {
            // 1. Tell Vite that all components starting with "foo-" are webcomponents
            isCustomElement: (tag) => tag.startsWith('foo-')
          }
        }
      }
    ),
    vueJsx(),
    // 2. This "postcssLit" plugin helps prepare CSS for the webcomponents
    postcssLit()
  ],
  resolve: {
    alias: {
      // 3. Tell Vite how to treat CSS paths for webcomponents
      '~@foo': fileURLToPath(new URL('./node_modules/@foo', import.meta.url))
    }
  }
});

How to make Vue and Vite work with web components?

2 Answers2