Breaking News: Grepper is joining You.com. Read the official announcement!

Top Tips for Vue 3 Development

akileus answered on June 29, 2022 Popularity 2/10 Helpfulness 1/10

answer Top Tips for Vue 3 Development

Top Tips for Vue 3 Development

Comment

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>

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: www.codeproject.com

Tags: javascript

Link to this answer
Share Copy Link