smastrom / notivue Goto Github PK

Updating to v 1.0.2 results the following error:
[Vue warn]: Extraneous non-props attributes (position, pause-on-hover) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

With version 0.9.4 it works, and no error is visible.

Was there any change between the two versions? Position and pause-on-hover is now not the props of the component?

I'm using nuxt 3.6.1

I want to make a line at the bottom of the alert that will show when it disappears.

The problem is that in my notivue config I have enabled pauseOnHover: true, pauseOnTabChange: true, but I can't find out when the current alert is active or paused. Therefore, I propose to add some property like isPaused to the alert object (obviously, it should be ref)

Basically, what I want to do is push.error({ ... }) on each mutation that fails. How can I do this? Would appreciate any help

import { QueryClient } from "@tanstack/vue-query";

export const queryClient = new QueryClient({
	defaultOptions: {
		mutations: {
			onError: (error) => {
				// somehow access push object
				push.error({	
					title: "Error",
					message: String(error)
				})
			}
		},
		queries: { ... }
	}
});

Hey! Thank you for your awesome lib! :)

Just facing one issue since v1.3.0. The promise method is not working with enqueue. The resolve and reject don't change the state of the notification, it just remain in loading state forever.

Repro:

In the notivue demo, enable enqueue and push a promise notification.

Hi there!

I saw your post on Reddit and immediately wanted to try out Notivue in a Nuxt 3 application. I followed the guidelines in the Nuxt 3 docs and added a plugin file:

plugins/notivue.client.js

import { notivue } from 'notivue'

import 'notivue/notifications.css'
import 'notivue/animations.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(notivue).mount('#app')
})

Then I followed step 2 and 3 from your documentation. When I open the app in the browser I get this error:

Cannot read properties of undefined (reading 'push')

Some additional info about the Nuxt app:

------------------------------
- Operating System: `Darwin`
- Node Version:     `v18.15.0`
- Nuxt Version:     `3.2.2`
- Nitro Version:    `2.2.3`
- Package Manager:  `[email protected]`
- Builder:          `vite`
- User Config:      `app`, `modules`, `supabase`, `pinia`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `@pinia/[email protected]`
- Build Modules:    `-`
------------------------------

First of all, thanks for this awesome library! Easy to use, excellent documentation!

Request:
Can we get a simplest confirm dialog API?

How:

const ok = await push.confirm({
             message: 'delete record?'
           })

Reason:
I think this can be achieved by the existing (Promise-based notifications) API but right now we have to add boiler plate every where we need this confirm dialog. Having a single uniform replacement of browser confirm dialog with this awesome interface and animation is a big plus.

When is pass an HTML Element to the teleportTo property in the config, it does not work.

I have analysed the code a bit and I guess the problem is the mergeDeep function. There is no check in it if the passed Element is an HTML Element, and therefore it is interpreted as an Object which will then be "ripped apart".

A quick fix would be to add a condition like && source[key].nodeType !== 1 in the mergeDeep function like:

export function mergeDeep<T>(target: T, source: Record<string, any>): T {
   const merged: T = { ...target }

   for (const key in source) {
      if (source.hasOwnProperty(key)) {
         if (source[key] && typeof source[key] === 'object' && source[key].nodeType !== 1) {
            merged[key as keyof T] = mergeDeep(target[key as keyof T], source[key]) as T[keyof T]
         } else {
            merged[key as keyof T] = source[key]
         }
      }
   }

   return merged
}

Please add support for usage with options api components and example in documentation.

Here you bring an example of rtl
But nothing is mentioned in the documentation

My first attempt was to use the Notivue component inside my Vue SSR component (with client:load), but it's not working.

However, I don't really need to render it on the server, so it might be my mistake.

So I tried moving it to the client:only component and sending notifications from the client:load component. Unfortunately, it still doesn't work because, as I understand it, the islands don't share the app-provided state. So the below code runs for every island.

// src/pages/_app.ts
import type { App } from "vue";
import { createNotivue } from "notivue";

export default (app: App) => {
	createNotivue(app);
};

Now, I need to find a way to create a single instance of Notivue and share it between my islands. Can someone please help me with this?

UPD: It works well when you only render it after mound, similar to the ClientOnly component in Nuxt. However, this works only inside one island, and notifications from other islands will not be detected.

<script setup lang="ts">
const isMounted = ref(false);
onMounted(() => (isMounted.value = true));
</script>

<template>
	<Notivue v-slot="item" v-if="isMounted">
		<Notifications :item="item" />
	</Notivue>
</template>

Notivue version: 1.2.2

Now the type expects all notification types, and I cant pass my configuration only for success alert.

  Overload 1 of 2, '(plugin: Plugin<[config?: NotivueConfig | undefined]>, config?: NotivueConfig | undefined): App<Element>', gave the following error.
    Type '{ success: { duration: number; }; }' is missing the following properties from type 'Record<NotificationType | "global", NotificationOptions_2>': error, info, warning, promise, and 3 more.
  Overload 2 of 2, '(plugin: Plugin<[config?: NotivueConfig | undefined]>, options: [config?: NotivueConfig | undefined]): App<Element>', gave the following error.
    Argument of type '{ limit: number; position: string; pauseOnHover: boolean; pauseOnTabChange: boolean; notifications: { success: { duration: number; }; }; }' is not assignable to parameter of type '[config?: NotivueConfig | undefined]'.
      Object literal may only specify known properties, and 'limit' does not exist in type '[config?: NotivueConfig | undefined]'.```

package.json

{
  "name": "view",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "material-icons": "^1.13.12",
    "notivue": "^1.4.5",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.0",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@types/node": "^20.10.4",
    "@vitejs/plugin-vue": "^4.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-vue": "^9.19.2",
    "less": "^4.2.0",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "typescript": "^5.2.2",
    "unplugin-auto-import": "^0.17.2",
    "vite": "^5.0.0",
    "vite-plugin-vue-devtools": "^1.0.0-rc.8",
    "vue-tsc": "^1.8.22"
  }
}

main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createNotivue } from "notivue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

import "./assets/fonts/font.css";
import "notivue/notifications.css"; 
import "notivue/animations.css"; 

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

const app = createApp(App);
app.use(router).use(pinia);
export const push = createNotivue(app); 
app.mount("#app");

App.vue:

<script setup lang="ts">
</script>
<template>
	<router-view />
	<Notivue v-slot="item">
		<Notifications :item="item" />
	</Notivue>
</template>

<style></style>

Home,vue:

<template>
	<div class="home">
		<h1>Welcome to the Home page</h1>
	</div>

	<div class="test">
		<button @click="tst">测试</button>
	</div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { push } from "../main";
const router = useRouter();
const test = () => {
	push.success({
		title: "成功",
		message: "这是一条成功的提示消息",
	})
};
</script>

<style scoped></style>

Expand animation just like in sonner libs https://vue-sonner.vercel.app/

I found this library more advanced and more customizable than vue-sonner Can you add expand feature to this lib?

Adding Headless toasts is much easier in Notivue, it would be nice to add this lib to shadcn-vue 🙏

I wanted to use the Notivue composable in a TanStack Query fetcher function as described here.

I try to use it in a mutation which is used with the useMutation composable.
Unfortunately, it does not work since i get this warning: inject() can only be used inside setup() or functional components.
This error is raised as soon as the usePush() function is called.

Any chance to fix this?

Hi! I'm facing an issue with the promise toast.

Let's say I have set a duration of 2000ms to my toasts. If the promise takes longer than 2000ms, when I call resolve/reject, the success/error toast disappear immediately.

Note: the loading toast don't disappear because it's set to Infinity

I have installed the library and tried to use it in the main.ts.

But i get a typescript issue:

Could not find a declaration file for module 'notivue'. 
'/Users/user/Projects/my-project/node_modules/notivue/dist/index.mjs' implicitly has an 'any' type.
There are types at '/Users/user/Projects/my-project/node_modules/notivue/dist/index.d.ts', but this result could not be resolved
when respecting package.json "exports". The 'notivue' library may need to update its package.json or typings.
ts(7016)

i import the usePush in vue js composable

`import { usePush } from 'notivue'
import { ref } from 'vue'

const errorMessage = ref('')

export const parseError = (debugMessage: string) => {
const pushData = usePush()
console.log('🚀 -> 🌏 ~ file: useDebugErrorMessage.ts:9 ~ parseError ~ pushData:', pushData)
console.log('🚀 -> 🌏 ~ file: useDebugErrorMessage.ts:9 ~ parseError ~ debugMessage:', debugMessage)
try {
const errorDetails = JSON.parse(debugMessage)
for (const key in errorDetails) {
if (errorDetails[key].length > 0) {
errorMessage.value = errorDetails[key][0]
// pushData.error(errorMessage.value)
pushData.success('Event successfully created')
}
}
} catch (error) {
// errorMessage.value = 'An error occurred.'
pushData.error('An error occurred.')
}
}
`

example: https://github.com/xiaoluoboding/vue-sonner