Ir para o conteúdo

← Trilha· Lição 5 de 8

Mesma galeria no Vue

Montar o Custom Element num app Vue 3 (global build via CDN).

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

Ideia

<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');

Em apps Vite reais, importe o CE e use no SFC; configure compilerOptions.isCustomElement se precisar.

O exemplo Galeria no Vue mostra o CE da lição 3 hospedado pelo Vue.

Pratique