Astro

Frameworks

Astro

Installation

Link to This Section

To add Web Awesome to your Astro app, install the package from npm.

npm install @awesome.me/webawesome

Usage

Link to This Section

Web Awesome components render on the client. Import the ones you need as client scripts, and add the global stylesheet in your frontmatter:

---
import "@awesome.me/webawesome/dist/styles/webawesome.css";
---

<script>
import "@awesome.me/webawesome/dist/components/button/button.js"
</script>

<wa-button>Hello World</wa-button>

Web Awesome is ready to use.
Want server-side rendering too?

Add SSR

Server-Side Rendering

Link to This Section

With server-side rendering, your Web Awesome components render to HTML on the server, so pages display fully styled before client-side JavaScript loads. Learn more in the SSR docs.

To add SSR support to Astro, follow the steps below.

Install the Adapter

Link to This Section

The Web Awesome team maintains an Astro adapter to help you set up SSR. Install it from npm:

npm install @awesome.me/astro-lit

Register the Plugin

Link to This Section

Once installed, you can register the plugin in your astro.config.mjs file.

// astro.config.mjs
import { defineConfig } from 'astro/config';

import lit from '@awesome.me/astro-lit';

// https://astro.build/config
export default defineConfig({
  // ...
  integrations: [lit()],
});

Register Components

Link to This Section

With the plugin in place, register your components in two places — once on the server and once on the client — and make sure the hydration scripts run before any client components.

Import the hydration scripts before any client components.
Otherwise components hydrate more than once and the page breaks.

Here's the previous example updated:

---
// Global CSS
import "@awesome.me/webawesome/dist/styles/webawesome.css";

// server imports
import "@awesome.me/webawesome/dist/components/button/button.js"
---

<script>
// Must run before any client component imports
import "@awesome.me/astro-lit/dsd-polyfill.js"
import "@awesome.me/astro-lit/hydration-support.js"

// client imports
import "@awesome.me/webawesome/dist/components/button/button.js"
</script>

<wa-button>Hello World</wa-button>