React and other frameworks

[devmnj]

Can I use lit with React,Vue,Svelte?

[devmnj]

ReferenceError: window is not defined I got when I tried @svelte

[e111077]

The team is currently working on helper integration wrappers in other frameworks, but in the meantime this article may help you with Svelte.

[drk-mtr]

Yes, it works with all of these frameworks. If you're having issues with Svelte I'd suggest sharing a minimal working repro on stackoverflow.

[devmnj]

I got it.

I made a mistake

Thank you

[drk-mtr]

Yeah your code works fine for me :) I just needed to add imports - and I changed to not use self-closing tags as I feel like that's the norm.

import "./styles.css";
import "./weather-element.js";
import "./sparkle-element.js";

export default function App() {
  return (
    <div className="App">
      <sparkle-element></sparkle-element>
      <weather-element></weather-element>
    </div>
  );
}

[devmnj]

I am facing problem in svelte which result in window is not defined
the source component .

<script> import '../lit/sparkle-element' </script> <sparkle-element/>

[e111077]

Web Components work in any framework that can support HTML. Custom Elements Everywhere should tell you about integration issues with other frameworks.

There may be some hoops you have to jump through in certain frameworks that don't expect web components in the server like NextJS, Nuxt, SvelteKit etc. The team is currently working on generating wrappers for frameworks such that it should be easier to integrate with their servers.

If you're just looking for helper wrappers you can see an initial implementation of the react wrapper in @lit-labs/react. In the meantime stay tuned for helper wrappers for Angular and Vue as well as helper libraries for NextJS