← Trail· Lesson 8 of 8

Consume the lib in a Vite app

ESM import + tag in HTML/JSX — full cycle from package to app.

TODO i18n: Full body translation pending. Title and description are localized; body stays in Portuguese for now.

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)