Astro

Dette indhold er ikke tilgængeligt i dit sprog endnu.

Astro ships zero JavaScript by default and renders all components to static HTML on the server. Wink web components must be loaded via a client-side <script> tag. Astro’s island architecture makes this straightforward.

@wink/elements npm package Install and load the CDN bundle with TypeScript types.

Install

npm install @wink/elements

Load in a shared layout

Add the loader script to your base layout so it runs on every page:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    <slot />

    <script>
      import { load } from '@wink/elements';
      load({ clientId: import.meta.env.PUBLIC_WINK_CLIENT_ID });
    </script>
  </body>
</html>

Use on a page

Because Astro components are server-rendered, the <wink-*> tags are output as static HTML. The CDN script registers the custom elements when the page loads in the browser:

---
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <main>
    <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
    <wink-lookup />
  </main>
</Layout>

Inside a framework component (island)

If you’re using React, Vue, or Svelte islands alongside Wink, load @wink/elements in the layout (as above) and use <wink-*> tags inside your island components normally — the custom elements will be registered by the time the island hydrates.

// src/components/HotelCard.tsx (React island)
export default function HotelCard({ layoutId }: { layoutId: string }) {
  // load() already called by layout — safe to render here
  return <wink-content-loader layout="HOTEL" id={layoutId} />;
}

---
import HotelCard from '../components/HotelCard.tsx';
---
<HotelCard client:load layoutId="YOUR_LAYOUT_ID" />

Environment variables

Astro exposes only variables prefixed with PUBLIC_ to the browser:

PUBLIC_WINK_CLIENT_ID=your-client-id