Ir para o conteúdo

← Blog

Web Components, lição 5: Mesma galeria no Vue

  • web-components
  • javascript
  • vite
Capa DICA WC — Web Components, lição 5: Mesma galeria no Vue

Depois do React, o Vue 3. O mesmo <image-gallery> da lição 3 roda aqui sem mudar uma linha: o Vue só monta o template.

Vue e Custom Elements

O Vue 3 trata Custom Elements de forma amigável: tags com hífen passam direto para o DOM.

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app"></div>
const { createApp } = Vue;

createApp({
  template: `
    <image-gallery columns="2">
      <img
        src="https://picsum.photos/id/184/300/300"
        alt="Dunas ao anoitecer"
      />
    </image-gallery>
  `
}).mount('#app');

Dica WC: no playground usamos o build global do Vue (script UMD) para ficar estático e compatível com GitHub Pages, sem bundler local.

No playground, ref="host" + onMounted() pegam o elemento real, e o evento gallery-select atualiza info.value, o estado reativo do Vue.

Em um app Vite de verdade

Importe o Custom Element e use a tag no SFC. Se precisar, configure compilerOptions.isCustomElement para o Vue não tentar resolver a tag como componente dele.

Pratique no playground

Snippets relacionados:

📚 Lição completa na trilha grátis: Mesma galeria no Vue

← Anterior: Lição 4: Mesma galeria no React

Próxima: Lição 6: Empacotar com Vite (library mode) →

No hub