Skip to content

← Trail· Lesson 5 of 8

Same gallery in Vue

Mount the Custom Element in a Vue 3 app (global CDN build).

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

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="..." alt="A" />
    </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.

Practice