Build a Twitter Clone With Adonis and Vue

Notification Component

Let's quickly create a Notification component that will be used to display success and error messages across the app. Within the components folder, create a Notification.vue file and paste the code below into it:

// src/components/Notification.vue

<template>
    <div class="ui message" :class="type">
        {{ message }}
    </div>
</template>

<script>
    export default {
        name: 'Notification',
        props: {
            message: {
                type: String,
                required: true,
            },
            type: {
                type: String,
                required: true,
            },
        },
    };
</script>

This is a very basic component. It accepts two props (message and type). message is the notification message while type is the notification type which can be either success or error.

Like this article? Follow @ammezie on Twitter