← Trilha· Lição 8 de 8

Consumir a lib em app Vite

Import ESM + tag no HTML/JSX — o ciclo completo do pacote ao app.

No app consumidor (Vite + React, Vue ou vanilla):

Vanilla / HTML

// main.ts
import '@css4html/image-gallery';

<image-gallery columns="3">
  <img src="/a.jpg" alt="A" />
</image-gallery>

React

import '@css4html/image-gallery';

export function Page() {
  return (
    <image-gallery columns="3">
      <img src="/a.jpg" alt="A" />
    </image-gallery>
  );
}

Vue

<script setup>
import '@css4html/image-gallery';
</script>
<template>
  <image-gallery columns="3">
    <img src="/a.jpg" alt="A" />
  </image-gallery>
</template>

Ciclo da trilha

CE nativo (lições 1–3)
Hosts React/Vue (4–5)
Empacote + export dual (6–7)
Consumo no app (8)