https://github.com/lightapis/vue-simple-message
A Vue component that displays notification messages
https://github.com/lightapis/vue-simple-message
component message plugin vue
Last synced: about 1 month ago
JSON representation
A Vue component that displays notification messages
- Host: GitHub
- URL: https://github.com/lightapis/vue-simple-message
- Owner: LightAPIs
- License: mit
- Created: 2023-09-30T16:29:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-06T12:19:17.000Z (about 1 year ago)
- Last Synced: 2025-10-24T21:41:50.639Z (4 months ago)
- Topics: component, message, plugin, vue
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-simple-message
- Size: 79.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-simple-message
## Preview
## Installation
```shell
npm install vue-simple-message
```
## Usage
### Global registration
In the entry file:
```typescript
import { createApp } from 'vue';
import SimpleMessage from 'vue-simple-message';
import App from './App.vue';
const app = createApp(App);
app.use(SimpleMessage);
app.mount('#app');
```
Example usage:
```html
import { ref } from 'vue';
const list = ref([]);
```
### Direct import
```html
import { ref } from 'vue';
import { SimplePagination, type NotificationItem } from 'vue-simple-message';
const list = ref<NotificationItem[]>([]);
function onClose(id: string) {
// ...
}
```
### Types
```typescript
type NotificationType = 'info' | 'warn' | 'error' | 'debug' | 'custom';
interface NotificationItem {
/** Message ID */
id: string;
/** The type of message */
type: NotificationType;
/** Message content */
content: string;
/** Text color */
color?: string;
/** Window background color */
background?: string;
}
```
## License
[MIT](./LICENSE)