Web Components, lição 8: Consumir a lib em app Vite

Fechando o ciclo: do pacote ao app. No projeto consumidor, seja vanilla, React ou Vue, um único import registra a tag.

Dica WC: um único import registra a tag. Depois disso, use <image-gallery> em qualquer arquivo do app.

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>

Sem wrapper por framework: um componente, todos os stacks.

O ciclo da trilha

• Custom Element nativo (lições 1 a 3)
• Hosts React e Vue (lições 4 e 5)
• Empacotar e export dual (lições 6 e 7)
• Consumo no app (lição 8)

Pratique no playground

• ▶️ Consumir no app (import + tag)

Snippets relacionados:

• 🧩 package.json exports
• 🧩 CE no React
• 🧩 Export dual

📚 Lição completa na trilha grátis: Consumir a lib em app Vite

---

← Anterior: Lição 7: Export dual: classe + register

Fim da trilha! Volte ao guia: Web Components do zero →