pxls00 / vue-message-plugin-ts

Vue message plugin base on Vue 3 + Typescript + Pinia, Docs page⬇️

vue-message-plugin-ts

A message plugin base on Vue with Typescript support

supports only Vue 3

Docs page | Live Demo

Installation

you can install the package yarn:

yarn add vue-message-plugin-ts

or npm:

npm i vue-message-plugin-ts

Register Plugin

import { createApp, h } from 'vue'
import Message from 'vue-message-plugin-ts'
import 'vue-message-plugin-ts/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(Message)
// or
app.use(Message, options?: { position?: IMessagesOption } as IMessagesOption)

app.mount('#app')

Usage

// App.vue
<template>
  <app-messages />
  <component :is="layoutName">
    <RouterView />
  </component>
</template>

Usage in components

// Component.vue
<script lang="ts" setup>
import { inject } from 'vue'

const message = inject('message')

function errorAction () {
  message.addNewMessage({
    title: 'Action error',
    type: 'error',
    duration: 5000,
  })
}

function startWait () {
  message.startWait()
}

function stopWait () {
  message.stopWait()
}

</script>

Messages API

MessagesOption

Attribute	Descripttion	Type	Optional value	Default
position	Messages display position	string	‘top-left’, ‘top-center’, ‘top-right’, ‘right-center’, ‘bottom-right’, ‘botom-center’, ‘bottom-left’, ‘left-center’	‘top-right’

Messages

Attribute	Descripttion	Type	Optional value	Default
addNewMessage	Adding a new message	(message: IMessageItem) ⇒ void	IMessageItem	—
removeMessage	Remove message by id	(id: TMessageId) ⇒ void	TMessageId	—
startWait	Wait loader message	(message?: IMessageItem) ⇒ void	IMessageItem
stopWait	Stop wait loader message	(id?: TMessageId) ⇒ void	TMessageId

Message for create (Message)

Attribute	Descripttion	Type	Optional value	Default	required
body	Body of message	TMessageField	—	—	—
duration	Duration of message, if you don't add duration then you have to remove it yourself	number	—	—	false
type	Type of message	TMessageTypes	‘error’, ‘success’, ‘warning’, ‘custom’, ‘wait’	—	true
img	Icon image of message	TMessageField	—	—	false
class	Class of message	TMessageClass	—	—	false
key?: string	Key of message	string	—	—	false

Types List

• type TMessageField = string | {value: string | any, class: TMessageClass}
• type TMessageTypes = ‘error’ | ‘success’ | ‘warning’ | ‘custom’ | ‘wait’
• type TMessageClass = string | string[]
• type TMessageId = number | string

Template, Slot names

Name	Descripttion	Value
message__img-wait	Message slot name for wait messages icon image	IMessageItem
message__img-success	Message slot name for success messages icon image	IMessageItem
message__img-error	Message slot name for error messages icon image	IMessageItem
message__img-warning	Message slot name for warning messages icon image	IMessageItem
message__img-custom	Message slot name for custom messages icon image	IMessageItem
message__title-wait	Message slot name for wait messages title	IMessageItem
message__title-success	Message slot name for success messages title	IMessageItem
message__title-warning	Message slot name for warning messages title	IMessageItem
message__title-error	Message slot name for error messages title	IMessageItem
message__title-custom	Message slot name for custom messages title	IMessageItem

Tip !!

You can add wait message with method startWait and this method creates default message, if you want to add custom wait message you can use method addNewMessage() and then if you want to stop this custom message u can use stopWait agait but with argument id that has been given when created message so you can create default wait message also custom wait message

License

Licensed as MIT.