kyvg / vue3-notification Goto Github PK
View Code? Open in Web Editor NEWVue 3 notification library 💬
Home Page: https://kyvg.github.io/vue3-notification/
License: MIT License
Vue 3 notification library 💬
Home Page: https://kyvg.github.io/vue3-notification/
License: MIT License
Describe the bug
In a project with Webpack where the Vue Options API is disabled, this library does not work. It builds, but no notifications pop up.
To Reproduce
Steps to reproduce the behavior:
false
, not true
like this screenshot)Expected behavior
A notification should show up.
Screenshots
N/a
Desktop (please complete the following information):
Smartphone (please complete the following information):
N/a
Additional context
N/a
Since today, using the Component inside my Vue3 app gives me this error
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I'm using Vue3, Vite, Babel
Is it possible to add a click event?
this.$notify({
title: "Important message",
text: "Hello user!",
click: () => {
// do redirect or whatever
}
});
Looks like lots of recent tags have been removed. Specifically latest tag which is 2.9.0 is not in the list anymore.
Describe the bug
[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key
To Reproduce
Steps to reproduce the behavior:
import Notifications from '@kyvg/vue3-notification'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Notifications)
})
<notifications />
pnpm build
node .output/server/index.mjs
I'm trying to get this to work with NuxtJS, but I can't figure out why it's not working.
app.vue
import Notifications from "@kyvg/vue3-notification";
<template><Notifications /></template>
composables/useNotification.ts
import { useNotification } from "@kyvg/vue3-notification";
export default useNotification;
I always end up getting this error: Component is missing template or render function. even thou I can call useNotification().notify({title: 'foo', text: 'bar'})
without erros or warnings.
Describe the bug
As stated in the documentation (https://kyvg.github.io/vue3-notification/api/#props) the 'classes' prop can receive String or Array types. But in fact Array leads to types mismatch error:
[Vue warn]: Invalid prop: type check failed for prop "classes". Expected String with value "vue-notification,n-light", got Array
To Reproduce
Set the prop 'classes' to any array of strings:
<NuxtNotifications :classes="['vue-notification', 'n-light']" />
Expected behavior
Setting prop 'classes' to array of strings should adds all the classes listed in this array.
Additional context
There is the workaround: setting a list of classes separated by spaces.
<NuxtNotifications classes="vue-notification n-light" />
But this is not an Array type.
Describe the bug
Hello, thanks for the help. I'm looking to install vue3-notification via CDN like in the jsfiddle example below, but I am unable to see a notification.
To Reproduce
See jsfiddle example here
Is this install correct? Is this approach even supported?
Thanks for the information.
Hi, I'm looking for your advice.
First, Is it possible to markup the progressbar that is linked to the set duration
as shown in the UI below?
Second, I am trying to provide notification in mobile device web as well.
When a notification is swiped with a finger on a mobile device, I want to execute the close
function with an animation that the notification is swiped. Any good way?
I've read all the guides, but couldn't think of a good way.
I look forward to your comments and advice. Thank you.
Is your feature request related to a problem? Please describe.
I need to pair id of notification object when the object is created to block closeOnClick, but i dont know when the notification dissapear.
If you get the id of object when created, then you just check if is equal to id emitted by destroy event.
Describe the solution you'd like
In the chapter before.
Describe alternatives you've considered
Another alternative is implement properties closeOnClick, pauseOnHover and so on. to a single instance (not whole component)
Additional context
Add any other context or screenshots about the feature request here.
Is your feature request related to a problem? Please describe.
Yes there is no typescript support for intellisense on the component props and no help found in the README
Describe the solution you'd like
I would like to add the following instructions to the README.md file
import type { FunctionalComponent } from 'vue';
import type { NotificationsOptions } from '@kyvg/vue3-notification';
declare module 'vue' {
export interface GlobalComponents {
Notifications: FunctionalComponent<NotificationsOptions>;
}
}
Describe alternatives you've considered
Being able to import the Notifications
component as a named import
Additional context
This will give syntax highlighting as well as typescript intellisense
Describe the bug
vue3-notification is not working with a restrictive Content Security Policy.
Our Content Security Policy is "default-src 'self'; object-src 'none';" and at runtime we are getting errors and vue3 notifcations is not working correctly because the CSS Class vue-notification-group is missing. It seems to be trying to add it in an inline/eval fashion that our CSP does not allow.
Locally we allow unsafe-inline/unsafe-eval in our CSP so it works. In the deployed version we have the more restrictive CSP.
We're using Vite 2.9.13, Vue 3.2.37 and @kyvg/vue3-notification 2.4.1.
Are we doing something wrong in how we include / use vue3-notification that is breaking under a restrictive CSP?
the default animation doesn't work
I use it in vue 3, the enter is work, but when the duration came, leave animation didn't work, it will disappear in a flash, without excessive effect
Then I try to download your demo, npm install, then npm run dev, when I try to click the "CSS animation Success button", I found the same effect, it will disappear in a flash, without excessive effect.
Is it a BUG or my operation is wrong?
Would be great to have it like maybe to have useNotiification
imported to be used inside setup vue component.
Describe the bug
The animation-name
attribute does not work, the notifications simply appear and disappear without any animation (although there seems to be a delay when I click on it, before it goes away). If I manually add the animation-name:
CSS property, the animation works for enter
, but not for leave
.
To Reproduce
animation-name="examplename"
attribute@keyframes examplename
$notify
Expected behavior
The animation-name
attribute creates the appropriate CSS property, and preferably reverse the animation on leave
or provide additional configuration for a leave
animation.
Screenshots
n/a
Desktop (please complete the following information):
Additional context
n/a
if at the moment when the notification appeared the user is not active, then the timer should stop.
and only when the user has moved the cursor or pressed something the timer continues.
Describe the bug
Like the title says customizing the whole template doesn't work anymore. The attributes slot and slot-scope are deprecated. Please update the documentation.
Is your feature request related to a problem? Please describe.
No implementation for nuxt3
Describe the solution you'd like
I implemented my solution to use this package in nuxt3 environment. Could add a link to README.MD for people who want to use this with nuxt3.
Additional context
My contacts:
telegram
Describe the bug
I am experiencing an issue when trying to import the @kyvg/vue3-notification
library. The error message I am receiving is: "Failed to resolve import "@kyvg/vue3-notification" from "src\main.js". Does the file exist?" It seems to be an import error, but I have followed the documentation for importing the library.
To Reproduce
Steps to reproduce the behavior:
(Its a private Repo that i cannot share)
@kyvg/vue3-notification
is located.Expected behavior
I expected the library @kyvg/vue3-notification
to be imported without any issues, as per the documentation.
Desktop (please complete the following information):
Additional context
I recently migrated to this project and encountered this issue when trying to work with the @kyvg/vue3-notification
library. I have followed the import instructions provided in the library's documentation, but I am still facing this problem. Please let me know if there is any additional information needed to resolve this issue.
Describe the bug
Notifications library not working when installed from plugin.
To Reproduce
I have a plugin used crossed multiple apps, where some common code is extracted. Along with others, I wanted to also extract Notifications library, with some custom styling. Everything worked seamless including version 2.4.1
, but after that, notifications are not shown at all. If I move the notification out of the plugin and install it in my SPA, works normally.
What could be? I can provide more info if it is needed.
Describe the bug
When using the <script setup/>
syntax, the this.$notify is not recognized.
To Reproduce
Steps to reproduce the behavior:
import Notifications from '@kyvg/vue3-notification'
app.use(Notifications)
<notifications/>
ReferenceError: $notify is not defined
Expected behavior
Is there a way to reference $notify, or should I import { notify } from "@kyvg/vue3-notification";
?
Desktop/Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Notifications apper unstyled and don't respect position
prop when using version 2.6.0. It's all good when I use 2.5.0.
To Reproduce
Steps to reproduce the behavior:
npm init vue@latest
(choose TypeScript support).Notifications
plugin and add notifications
component to the app. Set position
prop to "top center", for example.notify
to see the notification appears in the top right corner unstyled (see screenshot).Expected behavior
A styled notification to appear in the top center position.
Additional context
I didn't check any another props, maybe they're not working too.
Describe the bug
I just installed the Notification module and I got this
error in ./node_modules/@kyvg/vue3-notification/dist/index.esm.js
Module parse failed: Unexpected token (334:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| pauseTimeout() {
| if (this.pauseOnHover) {
this.timerControl?.pause();
| }
| },
@ ./src/main.js 13:0-52 28:8-21
@ multi (webpack)-dev-server/client?http://192.168.1.34:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
To Reproduce
Steps to reproduce the behavior:
npm install --save @kyvg/vue3-notification
Add dependencies to your main.js:
import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'
const app = createApp({...})
app.use(Notifications)
Add the global component to your App.vue:
Config
#22 is merged but an npm release is missing for it
I'm using vue3 with laravel sail and vite, after installing this package, my "sail npm run dev" command prints an error
error when starting dev server:
Error: EACCES: permission denied, unlink '/var/www/html/node_modules/.vite/deps/@inertiajs_inertia-vue3.js'
at unlinkSync (node:fs:1780:3)
at _unlinkSync (node:internal/fs/rimraf:214:14)
...
I tried to chmod that directory, but I don't even have directory "www" inside my "var" directory, so there is nothing to change.
What can I do to make it work?
My versions:
"vite": "^4.0.0",
"vue": "^3.2.41"
"@kyvg/vue3-notification": "^2.7.0"
Describe the bug
When a notification fades out using CSS animation, it stays in place with opacity 0, but does not disappear.
This puts up the text selection cursor when hovering on desktop, prevents clicking behind the invisible notification and messes up the notification stacking.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Notification is expected to disappear after fading out.
Screenshots
https://i.imgur.com/C0vVIFA.png
Desktop:
Additional context
Bug introduced in v2.3.2.
In addition to ignoreDuplicates
, it would be nice if you could keep track of the duplication count inside the Notification
component. If you know this number, you can style the notification somewhat like this:
The counter would then increase when a new notification is spawned, as long as the duration of the last occurrence hasn't passed.
The reason is in this faulty line of code, probably an auto-complete error:
I am writing an issue to explain my case and get advice to everyone who uses this library.
I'm writing a code that notify data in a notification using a custom template (slot).
// custom template
<notifications group="custom-notify" position="bottom right">
<template #body="props">
// markup notify display 'name', 'price', 'quantity' from props.item
</template>
</notifications>
// this.$notify call
this.$notify({
group: 'custom-notify',
duration: 3000,
data: {
id: '1',
name: 'A',
price: 30000,
quantity: 25,
} // example data
})
// examples of data (occured randomly)
{
id: '1',
name: 'A',
price: 30000,
quantity: 25,
},
{
id: '2',
name: 'B',
price: 2000,
quantity: 3,
},
{
id: '3',
name: 'A',
price: 29990,
quantity: 3,
},
{
id: '4',
name: 'B',
price: 2500,
quantity: 100,
}
In this case(four example datas),
If this.$notify
is called with an interval of 3 seconds or more (longer than the duration
) in the order of the 4 objects above, the previous notification is cleared by the duration, so a total of 4 notifications will occur.
However, when this.$notify
is called 4 times within 3 seconds, I want to initialize(reset) the duration
(3 seconds) of the notification with the same name
and change only the price
and quantity
of the notification (in the end, only 2 notifications for A and B are displayed.
I wonder if there are any ways or API option for this.
If not, may I ask for feature support?
Thank you.
Is your feature request related to a problem? Please describe.
When having two (or more) groups display at the same position (e.g. top right), the groups overlap when they are shown at the same time. This makes it hard to use different notification layouts that display at the same position
Describe the solution you'd like
Have the two groups behave like they are in the same group and just be displayed under each other
Describe alternatives you've considered
Using classes and DOM Manipulation. But that would be very dirty
Is your feature request related to a problem? Please describe.
I want to define the attributes position
and width
with a API call. Sadly, it will be ignored.
notify({
title: "Important message!",
text: "Hello user!",
position: "top left",
type: "error",
width: "400",
});
Describe the solution you'd like
If would be nice, if I could use it like the example above.
Describe alternatives you've considered
Another solution would be at least to define the parameter global like:
app.use(Notifications, { width: "400", postion: "top left" }, { velocity });
Describe the bug
When there's a notification shown and a new notification is added, the previous notification is moved one position without animation and the new one is animated in.
This happens with both the CSS and velocity-animate library.
To Reproduce
Steps to reproduce the behavior:
notify()
notify()
Expected behavior
As shown in the GIF in the README, both animations should move to their new position with the configured animation.
Screenshots
A short clip:
https://github.com/kyvg/vue3-notification/assets/711940/6f958eec-05fd-473f-a3a9-bc5cdb71105d
Desktop (please complete the following information):
Additional context
"@kyvg/vue3-notification": "^3.1.4"
Hello,
duration doesn't work when using velocity !
<notifications position="top center" width="90%" animation-type="velocity" :duration="1000" />
Please help, when I make a Vite build and send it to prod, it does not work
Describe the bug
hi, the tag property of the transition-group component is set to span wich creates invalid html
To Reproduce
Steps to reproduce the behavior:
Expected behavior
valid html / transition-group tag should probably set to div
In local, the notification works well with custom css .my-notification and type success will reproduce class my-notification success
but in production, the notification reproduces the wrong class my-notificationsuccess
which leads to failure to render the style.
All is well just the style is issue. Has anyone ever experienced this and have resolved it?
<div class="vue-notification-group" style="width: 500px; top: 0px; right: 0px;">
<span>
<div class="vue-notification-wrapper" style="transition: all 300ms ease 0s;" data-id="3">
<div class="my-notification success flex pl-3 pr-4 py-2 gap-x-3">
<div class="flex items-center justify-center">
<!-- Icon here -->
</div>
<div class="flex flex-col justify-center">
<p class="text-sm truncate mb-0 max-w-full">Text successfully copied to clipboard.</p>
</div>
</div>
</div>
</span>
</div>
<div class="vue-notification-group" style="width: 500px; top: 0px; right: 0px;">
<name>
<div class="vue-notification-wrapper" style="transition: all 300ms ease 0s;" data-id="26">
<div class="my-notificationsuccess flex pl-3 pr-4 py-2 gap-x-3">
<div class="flex items-center justify-center">
<!-- Icon here -->
</div>
<div class="flex flex-col justify-center"><!---->
<p class="text-sm truncate mb-0 max-w-full">Text successfully copied to clipboard.</p>
</div>
</div>
</div>
</name>
</div>
I need to do some actions after clicking on notice, but I don't know hod to do this.
It would be greate if I could use something like this
this.$notify(message).bind(this);
Describe the bug
closeOnClick : false is not working in vue3
To Reproduce
Steps to reproduce the behavior:
closeOnClick: false
notify({
title: "Tenant Onboarding started 🎉",
text: `Workflow_id = ${result.data["workflow_id"]} <br />
Onboarding update will be sent to your mail id`,
group: "onboard",
duration: -1,
closeOnClick: false,
});
Expected behavior
notification should expire after a given time not the click
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Ive tried adding a duration of 0 and -1 to both $notify and as a prop to notifications but so far i cant remove the timeout behaviour
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.