meforma / vue-toaster Goto Github PK

$ vue --version
@vue/cli 4.5.12

In main.js

import Toaster from "@meforma/vue-toaster";
Vue.use(Toaster);

WARNING Compiled with 2 warnings 6:32:26 PM

warning in ./node_modules/@meforma/vue-toaster/src/helpers/mount-component.js

"export 'h' was not found in 'vue'

warning in ./node_modules/@meforma/vue-toaster/src/helpers/mount-component.js

"export 'render' was not found in 'vue'

Is this a version issue? I just started using Vue ... I hope the eco system isn't like Python ... :)

Hi!

We'd like the toast to show relative to a div, instead of fixed to the content window. Is that possible? I didn't see any option in the documentation

It seems not working with typescript, thanks.

The Error is: TS7016: Could not find a declaration file for module '@meforma/vue-toaster'.

I was trying to make this toast run in a typescript vue3 app but it wouldn't read the import string. Anyone else have that issue?

Hi,

I tried to build my Nuxt 3 application and got this error.

An idea ?

Best regards

For a project i'm using vuex actions.
Inside the .js file i get the error: TypeError: Cannot read property '$toast' of undefined

How do i solve this issue?

@meforma/vue-toaster doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

In my Vue project toaster import give error in main.js

the error is:
http://127.0.0.1:5173/node_modules/.vite/deps/@meforma_vue-toaster.js?v=5508a788 net::ERR_ABORTED 504 (Outdated Optimize Dep)

My main.js file is

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
import axios from 'axios'
import Toaster from '@meforma/vue-toaster';
const app = createApp(App)
app.use(createPinia())
app.use(router, axios,Toaster)
app.mount('#app')

Hello,
Is it possible to use the component in Composition API?
As far as I see, the example is based on Options API.

Thanks!

main.js

import Toaster from '@meforma/vue-toaster'

app.use(Toaster, {
  position: 'top',
  useDefaultCss: false,
  pauseOnHover: false
}).provide('toast', app.config.globalProperties.$toast)

Example.vue

<script setup>
import { inject } from 'vue'

const toast = inject('toast')

// this works
function showToast (type) {
  toast.show(`This is the ${type} type toast.`, {
    type: type,
    duration: false
  })
}

// only works when vue-toaster is local in my projects src folder :S
function clearToasts () {
  toast.clear()
}
</script>

package.json

...
"@meforma/vue-toaster": "^1.3.0",
"vue": "^3.2.31",

Ty, otherwise all works perfectly.

I'm using tailwindcss. How can I override the standard settings and use my own?

When trying to use on a fresh sandbox Vue 3 template
I get the following error:

ReferenceError

/node_modules/@meforma/vue-toaster/src/Toaster.vue:299:9
   295| index(list, value)
   296|   for val, i in list
   297|     return i if val == value
   298| 
   299| @import './themes/default/index.styl'
----------------^
   300| .v--default-css
   301|   @import './themes/default/colors.styl'
   302|   @import './themes/default/toast.styl'

glob is not defined

ReferenceError: /node_modules/
meforma/vue-toaster/src/Toaster.vue:299:9

See: https://codesandbox.io/s/vue-toaster-1gmkk?file=/src/App.vue

Expected: when the maximum number of toasts is reached, the next toasts are queued. When the number of toasts is less than the maximum, the queue will be processed.

I don't event need to put here my code, cause all work fine on desctop and even on desctop with fewer browser's width. But when i trigger the toaster on mobile browser, it just didn't open.
I looked into your code and checked if could see "toast-container.styl" by adding border 1px solid line. So on desctop i saw it and on mobile haven't saw it again.

Please extra separate close icon or text

Referece: Vue Toastification

I get these warnings when I install the toaster, should these be fixed or?

[1/4] 🔍 Resolving packages...

warning @meforma/vue-toaster > stylus > css-parse > css > [email protected]: Please see https://github.com/lydell/urix#deprecated

warning @meforma/vue-toaster > stylus > css-parse > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated

warning @meforma/vue-toaster > stylus > css-parse > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated

[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...

warning "@vue/cli-service > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0".

warning "@vue/cli-service > [email protected]" has incorrect peer dependency "webpack@^4.0.0".

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$toast')
at _callee$ (app.js:21711:23)
at tryCatch (app.js:39729:40)
at Generator.invoke [as _invoke] (app.js:39960:22)
at Generator.next (app.js:39785:21)
at asyncGeneratorStep (app.js:21677:103)
at _next (app.js:21679:194)

It's a break change

Use Vue Test Utils with Jest

First of all, thank you for the tool you provided. Is there a way to change the color of the toast?

When you change option useDefaultCss to false after the first show, it not disables default css

v1.3 is not published

https://www.npmjs.com/package/@meforma/vue-toaster

Hi, I tried to use your plugin with Vue 3 and TypeScript but could not make it work.
I added a .d.ts file to make TypeScript ignore missing types and just be happy.
In my mina.ts I added

import Toaster from '@meforma/vue-toaster';
// ...
app.use(Toaster);

In my App.ts I am using the Composition API with setup() like this:

export default defineComponent({
    setup(props, context): any {
       // ...
       // this.$toast('Hi there');
       // ...
    }
}

Unfortunately, this.$toast is not available because of the Composition API.
I checked the docs and searched a lot on the internet but to no avail.

Any idea how to make it work?

import Toaster from "@meforma/vue-toaster";
createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) => resolvePageComponent(./Pages/${name}.vue, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(Toaster)
.use(ZiggyVue)
.mount(el);
},

Vue File :
Tried
toast.show(Hey! I'm here);
this.$toast.show(Hey! I'm here);
Error : toast is not defined

Import inside vue file works fine , import from app.js not working // Laravel , Vue3 , InertiaJs , ViteJs

When setting dismissible: false the function defined in onClick also gets disabled. This is unexpected and probably unwanted behaviour, since disabling the default "close on click" should not affect other onClick actions.