npmpackage.info

Gathering detailed insights and metrics for @vuesimple/vs-alert

Other packages similar to @vuesimple/vs-alert

@vuesimple/vs-modal

3.0.9

A simple vue modal. Perfect for all your modal/ dialogs scenarios.

Gathering detailed insights and metrics for @vuesimple/vs-alert

@vuesimple/vs-alert - 3.0.9 | npmpackage.info

@vuesimple/vs-alert

🌈 A Simple Open Source Collection of tiny vue packages. Perfect for all your daily coding scenarios.

3.0.9

MIT

Vue

172.25 kB

1.7

Installations

npm install @vuesimple/vs-alert

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.20.0

NPM Version

lerna/4.0.0/node@v16.20.0+arm64 (darwin)

Pull Requests

Open

0

Total

11

Closed

0

Merged

11

Issues

Open

0

Total

2

Closed

2

Releases

v1.4.6

Updated on May 20, 2022

v1.4.5

Updated on May 20, 2022

v1.4.2

Updated on Mar 22, 2022

v1.4.1

Updated on Mar 11, 2022

v1.4.0

Updated on Oct 07, 2021

v1.3.39

Updated on Sep 11, 2021

View All 12 releases

Languages

Vue

JavaScript

HTML

Vue (78.92%)

JavaScript (20.76%)

HTML (0.32%)

Developer

ashwinkshenoy

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

33 Stars

310 Commits

5 Forks

1 Watchers

2 Branches

1 Contributors

Updated on Feb 19, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

3.0.9

Package Id

@vuesimple/vs-alert@3.0.9

Unpacked Size

172.25 kB

Size

94.83 kB

File Count

NPM Version

lerna/4.0.0/node@v16.20.0+arm64 (darwin)

Node Version

16.20.0

Published on

Jan 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@vitejs/plugin-vue sass vite vite-plugin-style-inject vue

Vue Simple Alert

🗃 A simple vue alert. Perfect for all your alert scenarios.

A light weight vue plugin built groundup.

forthebadge

📺 Live Demo

Code Sandbox: Link

🛠 Install

1npm i @vuesimple/vs-alert

🚀 Usage

1<template>
2  <vs-alert variant="success"> Success </vs-alert>
3</template>
4
5<script>
6  import VsAlert from '@vuesimple/vs-alert';
7
8  export default {
9    components: {
10      VsAlert,
11    },
12  };
13</script>

🌎 CDN

1<script src="https://unpkg.com/@vuesimple/vs-alert@<version>/dist/vs-alert.min.js"></script>

1// Main/Entry file
2app.use(VsAlert.plugin);

1<template>
2  <vs-alert variant="success"> Success </vs-alert>
3</template>

Nuxt.js

Nuxt Code Snippet

After installation,

Create a file /plugins/vs-alert.js

1import Vue from 'vue';
2import VsAlert from '@vuesimple/vs-alert';
3
4Vue.component('vs-alert', VsAlert);

Update nuxt.config.js

1module.exports = {
2  ...
3  plugins: [
4    { src: '~plugins/vs-alert', mode: 'client' }
5    ...
6  ]
7}

In the page/ component

1<template>
2  <vs-alert variant="success"> Success </vs-alert>
3</template>

Note

For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
You can also do import VsAlert from '@vuesimple/vs-alert' & add in component:{VsAlert} and use it within component, without globally installing in plugin folder.

⚙ Props

Name	Type	Default	Description
variant	String	-	Type of alert to be shown. (success, warning, error, info, secondary)
title	String	-	The alert title (text only). For HTML, use the header slot.
showClose	Boolean	false	Show alert close icon
small	Boolean	false	Applies reduced padding
toast	Boolean	false	Applies toast design
noBg	Boolean	false	Remove background color

🔥 Events

Name	Description
close	Emitted when the alert close icons is clicked. Listen for it using `@close`.

📎 Slots

You can define own item markup via slots:

Name	Description
(default)	Holds the alert content and can contain HTML.
icon	Slot to add custom icon for type
title	Slot to add custom title

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More