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.