← Ruta· Lección 8 de 8

Consumir la lib en una app Vite

Import ESM + etiqueta en HTML/JSX — el ciclo completo del paquete a la app.

TODO i18n: Traducción completa pendiente. Título y descripción localizados; el cuerpo permanece en portugués por ahora.

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)