Vuetify Validate Email Field

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>

<body>
    <div id="app">
        <v-app>
            <v-container>
                <h3>Vuetify Validate Email Address</h3>
                <v-form @submit.prevent="submitForm">
                    <v-alert v-if="feedback"  :type="feedback.type">{{ feedback.message }}</v-alert>
                    <v-text-field v-model="email" label="Email"></v-text-field>
                    <v-btn  type="submit" color="success" label="Submit">Submit</v-btn>
                </v-form>
            </v-container>
        </v-app>
    </div>

createApp({
            data() {
                return {
                    email: "",
                    feedback: null,
                };
            },
            computed: {
                emailError() {
                    return !this.email ? ["Email is required"] : this.email.match(/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/) ? [] : ["Invalid email format"];
                },
            },
            methods: {
                submitForm() {
                    this.feedback = !this.emailError.length ? { type: 'success', message: 'Email is valid.' } : { type: 'error', message: this.emailError[0] };
                },
            },
        })
            .use(vuetify)
            .mount('#app');
    </script>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>
​
<body>
    <div id="app">
        <v-app>
            <v-container>
                <h3>Vuetify Validate Email Address</h3>
                <v-form @submit.prevent="submitForm">
                    <v-alert v-if="feedback"  :type="feedback.type">{{ feedback.message }}</v-alert>
                    <v-text-field v-model="email" label="Email"></v-text-field>
                    <v-btn  type="submit" color="success" label="Submit">Submit</v-btn>
                </v-form>
            </v-container>
        </v-app>
    </div>
​
    <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
​
    <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();
​
        createApp({
            data() {
                return {
                    email: "",
                    feedback: null,
                };
            },
            computed: {
                emailError() {
                    return !this.email ? ["Email is required"] : this.email.match(/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/) ? [] : ["Invalid email format"];
                },
            },
            methods: {
                submitForm() {
                    this.feedback = !this.emailError.length ? { type: 'success', message: 'Email is valid.' } : { type: 'error', message: this.emailError[0] };
                },
            },
        })
            .use(vuetify)
            .mount('#app');
    </script>
</body>
​
</html>