How to Leverage Vue3’s New Features in Taro for Multi‑Platform Development

Vue 3 New Features

Vue 3 introduces several core features that change component development:

Composition API

Logic is moved into reusable functions using Vue's reactivity system (e.g., ref, computed, lifecycle hooks). This is similar to React Hooks and improves maintainability in large projects.

Teleport

Allows a component to be rendered outside the normal component hierarchy, which is useful for full‑screen overlays, modals, or toast messages.

Fragments

Multiple sibling nodes can be returned from a component without wrapping them in a single root element.

Syntax sugar

<script setup>

provides a concise way to use the Composition API inside a single‑file component, and <style vars> enables CSS variables that are driven by component state.

Using Vue 3 with Taro

Taro 3 supports Vue 3 out of the box. Install the CLI and create a project:

# Install CLI with npm, yarn or cnpm
npm install -g @tarojs/cli
# or
yarn global add @tarojs/cli
# or
cnpm install -g @tarojs/cli

# Verify installation
taro --version

# Initialise a new project (choose Vue 3 when prompted)
taro init

During taro init you will be asked for a project name, description and framework. Selecting Vue 3 makes Taro generate a Vue‑compatible scaffold.

Project entry (app)

import { createApp } from 'vue'
import './app.scss'

const App = createApp({
  onShow(options) {},
  // No render method needed; Taro handles rendering
})

export default App

Simple page component (page/index)

<template>
  <view class="index">{{ msg }}</view>
</template>
<script>
import { ref } from 'vue'
import './index.scss'

export default {
  setup() {
    const msg = ref('Hello world')
    return { msg }
  }
}
</script>

Build and run for WeChat mini‑program

npm run dev:weapp

Open the generated dist folder in the WeChat Developer Tools. The same code can be compiled for H5 by using the corresponding build command.

Feature demonstrations

Composition API – Todo counter

A component that starts with four todo items and adds a new one on each click:

<template>
  <button @tap="increment">Increase 1</button>
  <view>Current items: {{ existCount }}</view>
  <view>Added this session: {{ count }}, total: {{ total }}</view>
</template>
<script>
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'case1',
  setup() {
    const count = ref(0)
    const existCount = ref(4)
    const total = computed(() => count.value + existCount.value)
    function increment() { count.value++ }
    onMounted(() => console.log('component mounted!'))
    return { increment, existCount, count, total }
  }
}
</script>

The component renders correctly on both H5 and the mini‑program.

Teleport – Welcome toast

A toast component is teleported to a dedicated view outside the normal tree:

<template>
  <Toast :user="username" />
  <view id="teleportToast"></view>
</template>

<template>
  <button @tap="showToast" class="btn">Open Toast</button>
  <teleport to="#teleportToast">
    <view v-if="toastFlag" class="toast__wrap" @tap="hideToast">
      <view class="h2">Toast Title:</view>
      <view class="toast__wrap--msg">Welcome {{ user }}, click to close</view>
    </view>
  </teleport>
</template>
<script>
import { ref, toRefs } from 'vue'
export default {
  props: { user: String },
  setup(props) {
    const { user } = toRefs(props)
    const toastFlag = ref(false)
    const showToast = () => { toastFlag.value = true }
    const hideToast = () => { toastFlag.value = false }
    return { user, toastFlag, showToast, hideToast }
  }
}
</script>
<style lang="scss">
.toast__wrap { position:fixed; width:100%; height:100%; background:rgba(0,0,0,.8); top:0; left:0; z-index:101; color:#fff; .h2{margin:20px;} &--msg{text-align:center;} }
</style>

The toast works in H5 but fails on the mini‑program, indicating that Teleport is not yet fully supported in Taro's mini‑program target.

Fragments

Fragments are verified in the previous examples; multiple root nodes render without issues.

Script setup syntax sugar

<template>
  <view>count:{{ count }}, msg:{{ info }}</view>
  <button @tap="incAndChangeInfo">Increase 1 and change msg</button>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({ msg: String })
const count = ref(0)
const info = ref(props.msg)
function incAndChangeInfo() { count.value++; info.value = 'change hello' + count.value }
</script>

Both H5 and the mini‑program render the component correctly.

Style vars syntax sugar

<template>
  <view class="text">Text color is {{ color }}, click to turn red</view>
</template>
<script>
import { ref, toRefs } from 'vue'
export default {
  props: { color: String },
  setup(props) {
    const { color } = toRefs(props)
    return { color }
  }
}
</script>
<style vars="{ color }">
.text { color: var(--color); }
</style>

The demo works on both platforms, changing the text color from blue to red on click.

Compatibility summary

All demos are integrated in a single repository:

GitHub: https://github.com/lillian98/vue3

Online preview (H5): https://lillian98.github.io/vue3/dist/#/pages/index/index

Overall, Taro 3 supports Vue 3 development across multiple targets. H5 shows full compatibility with all Vue 3 features demonstrated, while the mini‑program target currently lacks Teleport support and may have minor gaps. The Taro team has a history of adding modern framework features (e.g., React Hooks in Taro 2.0) and plans to improve Vue 3 support on mini‑programs.