An Astro integration for SSR Web Components using WCC.
See this demonstration repo for an example of using this plugin.
- Install the plugin into your Astro project
$ npm i -D @projectevergreen/astro-wcc
- Then add it to your Astro configuration file
import { defineConfig } from 'astro/config'; import astroWcc from '@projectevergreen/astro-wcc'; export default defineConfig({ integrations: [ astroWcc() ] });
- You can now use a component in an Astro file
<!-- src/pages/index.astro --> <html lang="en"> <head> <script src="../components/greeting.js"></script> </head> <body> <x-greeting></x-greeting> </body> </html>
- Currently assumes
<x-${tagName}>maps to src/components/${tagName}.js - Client hints (e.g.
<x-greeting client:visible>) are not supported