Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: added issues section to document nitro moduleSideEffects when using libraries #161

Merged
merged 1 commit into from
Sep 4, 2024
Merged

docs: added issues section to document nitro moduleSideEffects when using libraries #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A Nuxt3 module for server-side rendering and client-side hydration of Lit custom

## 🚀 Usage

_Note: This module is for Nuxt3._ The [work on Nuxt2 support](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/9) is in progress. We are looking for assistance in finishing up the module.
_Note: This module is for Nuxt3._ Please see this issue [on Nuxt2 support](https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/9). We are looking for assistance in finishing up the module.

### Installation

Expand All @@ -27,13 +27,31 @@ export default defineNuxtConfig({
});
```

That's it! Now all the Lit elements prefixed with `acme-` will be Server-Side Rendered.
That's it! Now all the Lit elements prefixed with `acme-` will be Server-Side Rendered. If there are any other custom elements in the project they will be client-side rendered.

## 👨‍💻 Development

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.


## Common issues

### `TypeError: customElements.get(...) is not a constructor`

This error occurs when the Lit element is not properly registered. This can happen because the element is not set up correctly, or it can be due to the element having side effects. You may also only see this error when running in production mode.

To fix this, your custom element library can be registered in the `nuxt.config.js` file.

```js
export default defineNuxtConfig({
...
nitro: {
moduleSideEffects: ["my-custom-element-library"]
}
});
```

## How does it work?

All the Lit elements in the Nuxt project that uses the prefix(es) provided in the module option are wrapped with a Vue component called [LitWrapper](./src/runtime/components/LitWrapper.vue).
Expand Down
Loading