Exploring Vue 3: New Features, Teleport, and Vue‑Lit Web Components

Vue 3 Release Overview

On September 18, 2020 Vue 3.0 (code‑named “One Piece”) was officially launched after two years of development. The core team streamed a live session titled “Live Free Online Announcement” to showcase the new version, discuss its roadmap, and answer community questions.

Vue Teleport

Teleport is a new Vue 3 feature analogous to React Portal. It allows developers to render a template node into a specified container elsewhere in the DOM, which is especially useful for global UI elements such as modals and notifications.

Vue‑Lit Web Component Library

The author highlights a GitHub project called vue-lit, which combines Vue's reactivity (@vue/reactivity) with lit-html to produce Web Components using Vue’s Composition API. This approach enables native component development without bundlers or a full framework, offering a compact, source‑readable solution.

Graphics Programming Highlights

The article also showcases visual experiments, including a collection of Twitter "like" animations and a set of WebGL‑based triangular image transition effects. Five transition styles are provided, covering region slicing and geometric flips.

Legacy Vue Comparison

Even after Vue 3's release, earlier versions (Vue 1.x and 2.x) remain valuable. Comparing their differences helps developers understand the design decisions behind Vue 3 and the problems each version aimed to solve.

Taro + Vue 3 Mini‑Program Solution

Taro 3, an open‑source cross‑platform framework, now supports Vue 3. Developers can leverage Vue 3's composition API within Taro to build mini‑programs, combining the benefits of a modern frontend framework with Taro's multi‑target capabilities.