O Vue.js 3 é uma das mais populares bibliotecas de JavaScript para construção de interfaces de usuário, e sua recente atualização trouxe consigo um novo componente interessante, o Teleport. Neste post, vamos fazer uma introdução ao Teleport e também uma comparação com os Portals do ReactJS.

Antes de começarmos, é importante entendermos que ambos os recursos foram criados para resolver um problema comum em aplicações web: como lidar com elementos que precisam ser exibidos fora do contexto do seu componente pai.

Em Vue, um componente é renderizado dentro de sua própria estrutura de componentes, o que significa que todas as suas propriedades e métodos são restritos a essa estrutura. No entanto, às vezes é necessário exibir um elemento em outro local da página, fora do contexto de seu componente pai. É nesse momento que podemos utilizar o Teleport.

O Teleport permite que nosso componente seja "teletransportado" como filho de outro elemento e em qualquer outro lugar da página, sem termos que nos preocupar com renderização e interação, mantendo os dados e informações do componente mesmo após ser mudado de lugar.

Para podermos utilizar do componente Teleport, só precisamos envolver o elemento a ser teleportado em uma tag <teleport> </teleport> e especificarmos o local que o elemento deve ser renderizado, como no exemplo a baixo:

Modal.vue

<template>
    <teleport to="#modal-target">
      <div v-if="show" class="modal__body">
        <h1>Modal Title</h1>
        <p>Modal Content</p>
      </div>
    </teleport>
</template>

<script lang="ts">
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

App.vue

<template>
  <div id="modal-target" class="modal__target"></div>
  <button @click="show = !show">Toggle Modal</button>
  <Modal :show="show" />
</template>
<script lang="ts">
import Modal from './components/Modal.vue';
export default {
  data() {
    return {
      show: false,
    };
  },
  components: {
    Modal,
  },
};
</script>

Com o código acima, você pode ver que o elemento modal é renderizado como filho, no local especificado pela propriedade "to" que funciona da mesma forma que um seletor CSS. Com isso podemos alterar o local de renderização do nosso componente de modal, independente da sua posição na estrutura de elementos. Obtendo o seguinte resultado:

O Teleport também possui uma propriedade para desabilita-lo em algum caso, podemos passar, por exemplo, para que ele seja desabilitado caso estejamos utilizando um dispositivo mobile apenas criando uma validação de tamanho de tela:

computed: {
    isMobile() {
      return screen.width <= 760;
    },
  },

E adicionando isso na propriedade "disabled" do nosso componente Teleport:

    <teleport :disabled="isMobile" to="#modal-target">
      <div v-if="show" class="modal__body" style="">
        <h1>Modal Title</h1>
        <p>Modal Content</p>
      </div>
    </teleport>

Um comparativo com portals do ReactJS

Agora vamos comparar o Teleport com os Portals do ReactJS. Em React, os Portais são usados para exibir elementos fora do contexto de seu componente pai. A ideia é semelhante ao Teleport, mas a implementação é um pouco diferente.

Em React, você precisa criar um componente Portal e usá-lo como um componente comum em sua aplicação. Aqui está um exemplo de código:

App.jsx

import React, { useState } from 'react';
import { createPortal } from 'react-dom';
import './App.css';

function Modal() {
  return createPortal(
    <div>
      <h1>Modal Title</h1>
      <p>Modal Content</p>
    </div>,
    document.getElementById('modal-root')
  );
}

function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle Modal</button>
      {show && <Modal />}
      <div id="modal-root" class="modal__root"></div>
    </div>
  );
}

export default App;

Assim como o Teleport, podemos obter um resultado parecido, nos permitindo renderizar o componente em qualquer local da página.

No entanto, a implementação é um pouco diferente, pois você precisa criar um componente específico e usá-lo como um componente comum.

Em resumo, o Teleport e os Portais são recursos semelhantes, criados para resolver o mesmo problema de exibir elementos fora do contexto de seu componente pai. O Teleport é uma adição interessante ao Vue.js 3 e é fácil de usar, enquanto os Portais são uma abordagem mais flexível, porém requerem uma implementação um pouco mais complexa.

A escolha entre o Teleport e os Portals depende da sua familiaridade com as ferramentas e do que você acha mais fácil de aprender. Se você já trabalha com Vue.js 3, o Teleport é uma opção fácil de implementar e pode ser mais adequado. Se você já está mais familiarizado com os Portals do ReactJS, pode ser mais fácil continuar usando essa abordagem. O importante é escolher a opção que você se sinta mais confortável em trabalhar e que seja mais fácil para você aprender.

Obrigado pela leitura!! Críticas construtivas e comentários são muito bem vindos 💚💙