Skip to content

pxls00/vue-message-plugin-ts

Repository files navigation

vue-message-plugin-ts

A message plugin base on Vue with Typescript support

supports only Vue 3

Preview

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.