TypeScript Support
import { defineComponent } from 'vue'
const Component = defineComponent({
// type inference enabled
})
Teleport
<body>
<div style="position: relative;">
<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<modal-button></modal-button>
</div>
</div>
</body>
app.component('modal-button',{
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
Fragments
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>