Vue Message Viewer

Introduction

This is a simple and effective Vue 3 and TypeScript based library for displaying different types of messages. It currently supports the following types of messages:

• Email
• Viber
• SMS

Installation

To install this library, you can use the following command:

npm i vue-message-viewer

Usage

To use this library, you need to import the MessageViewer component and pass the message object to it.

<script setup lang="ts">
import { ref } from 'vue';
import { MessageViewer } from 'vue-message-viewer';
import type { Message, MessageType } from 'vue-message-viewer';

const message = ref<Message>({
    type: 'SMS';
    sender: '';
    body: '';
    date: new Date();
    title: '';
    htmlUrl: '';
});
</script>

<template>
  <MessageViewer :message="message" />
</template>

Props

| Name | Type | Required | Default | Description | | ------- | ---------- | -------- | ------- | --------------------------------------------------------------------------- | | message | Message | true | - | The message object that will be displayed. |

Message Object

The message object is a simple object that contains the following properties:

| Name | Type | Required | Default | Description | | ------- | ---------------- | -------- | ------- | --------------------------------------------------------------------------- | | type | MessageType | true | - | The type of the message. Can be one of the following: SMS, Email, Viber|