Giters

xiaoluoboding / vue-sonner

🔔 An opinionated toast component for Vue.

Home Page:https://vue-sonner.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Everything is deleted after <Toaster />, and sometimes the toast() function works, sometimes not

rust-floppy opened this issue · comments

commented

I have my vue app setup and I followed the instructions, but even if I just copy-paste the first example, the button is not there, and even if it is there (explained in next section), on click it says Uncaught TypeError: toast is not a function . Am I possibly missing something?

When I add the to my root, nothing happens, but if I register it as a component ( app.component('Toaster', Toaster); ), the toaster shows up, but my entire content is just disappeared (even the "give me a toast" button provided)
Noticed that if I put the before anything, they disappear, but if I put it after anything, they will not disappear. It's like it deletes everything that comes after it.

Example:

<div>I will show up</div>
    <Toaster />
<div>I will NOT show up</div>

I'm using Vue 3.

I'm not sure what decides if the toast method works or not, but if I can get more info, I'll include it. My main problem/concern is the "everything disappears after " part.

commented

Could you please share a working reproduction somewhere like stackblitz?

commented

I think I managed to replicate the problem after about 2 hours.
https://stackblitz.com/edit/vitejs-vite-tzbeke?file=index.html,src%2Fmain.js&terminal=dev

Here you can see that "hello" shows up, test and test 2 doesn't, and then hello 3 shows up again. They show up for like half a second, then disappear.

I had to play around to match my local, but I got it :D

Hope it will be any useful, even if I messed something up and that's the reason why it's not working as intended.

commented

@idk-floppy This is a vue package and component so you can't just add it straight into html. You need to register the components within vue's app. Created a working example based on your code here: https://stackblitz.com/edit/vitejs-vite-cieu4q?file=src%2FApp.vue,index.html,src%2Fmain.js&terminal=dev

commented

I did register it as a component, and put it inside the div that the app is mounted to.

app.component, app.mount, and then the toaster component is inside the mounted div, so it is registered as a global component. I guess it's not supposed to be used as a global component then.

Thank you for your help!