s4l1h/vue-toastr

Vuejs Toast : Plugin and Component Capability.

vue-toastr's Issues

not:this.$root.$refs.toastr.e(message);

it's : this.$refs.toastr.e(message);
not:this.$root.$refs.toastr.e(message);
it's wrong in readme,and i try it one hour!

How to access Toastr from a Plugin or external Component

I am looking for a way to access Toaster from an external Plugin where I don't have access to 'this'.
I was hoping that $toastr was also available via 'Vue.$toastr', but it is not.

I tried:
import Toastr from 'vue-toastr'
But that didn't work as it had internal issues.

I did find that using Vue.prototype.$toastr works, but not sure if that is the correct way.
Is there a better or more preferred way to access it?

Here is an example for an API Component:

import axios from 'axios'
import Vue from 'vue'

export default {

	getPosts(){
		return axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
			if(response.status != 200)
			{
				this.$toastr.e('ERRROR MESSAGE') // Doesn't Work
				Vue.$toastr.e('ERRROR MESSAGE') // Doesn't Work
				Vue.prototype.$toastr.e('ERRROR MESSAGE') // Works
			}
			return response
		})
	}
}

preventDuplicates and clearAll Options

Hi,

I'd like to know if you're going to add options :
preventDuplicates
clearAll

I'm having problems with the new version. Look at my screen

Help error -

There was no such mistake, what could be?

This dependency was not found:

• vue-toastr/src/vue-toastr.less in ./src/main.js

To install it, you can run: npm install --save vue-toastr/src/vue-toastr.less

Thank

How would you exclude styling injection?

• Is it possible to exclude injecting the styling so customised colours can be applied in a custom version of vue-toastr.scss?

  • vue-toastr.common.js#L431-L436
  • vue-toastr.esm.js#L429-L434
  • vue-toastr.umd.js#L435-L440

Cannot add component in Vue

Trying to add custom element results in error.

<vue-toastr ref="toastr"></vue-toastr>

results in

vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: <vue-toastr> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

main.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
require('vue-toastr/src/vue-toastr.scss');

import BootstrapVue from 'bootstrap-vue';
import { Layout } from 'bootstrap-vue/es/components';
import Toastr from 'vue-toastr';

import Vue from 'vue';
import VueLogger from 'vuejs-logger';
import VueLocalStorage from 'vue-localstorage';
import App from './App.vue';

import router from './router';
import store from './store/index';

import { config, websocket as wsConfig, localStorage as storageConfig, logger as loggerConfig } from './config';

Vue.use(BootstrapVue);
Vue.use(Layout);
Vue.use(Toastr);

Vue.use(VueLocalStorage, storageConfig);
Vue.use(VueLogger, loggerConfig);

new Vue({
	...App,
	router,
	store,
}).$mount('#app');

Setting global configs

Hi, I'm using it and it works great, but can I set an option globbaly? Eg.: set the position to be top-center without having to tell it every time I call the toastr?

Not working with latest version of vue.js

Can you update library to work with VueJS 1.0.24?

Remove default css

Hey,

Is it possible to remove the default css block added to our pages and add directly scss file ?

Vue 3 Issue

Hello,

when i use it in vue 3 i get the following error:
Uncaught TypeError: Vue.extend is not a function at Object.VueToastr.install (vue-toastr.esm.js?025a:736) at Object.use (runtime-core.esm-bundler.js?5c40:2945) at eval (main.js?56d7:8) at Module../src/main.js (app.js:1366) at __webpack_require__ (app.js:854) at fn (app.js:151) at Object.1 (app.js:1475) at __webpack_require__ (app.js:854) at checkDeferredModules (app.js:46) at app.js:994

// ... import VueToastr from "vue-toastr"; // ... const app = createApp(App).use(VueToastr).use(store).use(router);

Error using component

Goodnight. I have followed the steps but what I get is this error.

Uncaught (in promise) TypeError: Can not read property 's' of undefined
At eval (eval at (app.js: 1290), : 64:45)

I am using vue 2.2.6. And I do the import and registration of the component in my main.js.

Configuration

A global configuration for toasts could be nice (to set position etc.)

toastr.removeByType shouldn't be the only viable option for removing a toastr

Because this library doesn't have any async functions, it would be nice to mimic the integration of this plugin into sites that utilize ajax/promises.

The way that I hook this plugin is, is because the ajax request is sent out, I display an information pop up on the screen, and upon success or failure, I remove the info and replace it with the respective new message. Like this:

 var vm = this;

    $.ajax({
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      url: '/api/ExampleAPI',
      data: function() {
           vm.$toastr.i("Waiting for response!");,
      }
      success: function (json) {
           vm.$toastr.removeByType("info");
           vm.$toastr.s("Success!");
      },
       error: function(json){
           vm.$toastr.removeByType("info");
           vm.$toastr.e("Error!");
        }
    });

The problem comes when there are several ajax requests made, where this particular function would remove all info messages on the screen.

So I'm requesting that there should be a new attribute called id, where you associate a number or name,

this.$root.$refs.toastr.Add({
    id: "EasyToastr"
    title: "Easy Toast", // Toast Title
    msg: "Hi", // Message
});

then you can remove this by:

this.$root.$refs.toastr.Remove("EasyToastr");

That way I can pin point which messages to remove.

Apply animation on toastr

Hi, I have added the css below and add it into className but i still dont see the fade in animation for the toast.

`@-webkit-keyframes fadeIn {
from {
opacity: 0;
}

to {
  opacity: 1;
}

}

@Keyframes fadeIn {
from {
opacity: 0;
}

to {
  opacity: 1;
}

}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}`

Please help.

animated for out dont work

progressBar & newestOnTop Options

Hi,

I'd like to know if you're going to add options :
progressBar
newestOnTop

Thx :)

---

Démo : http://codeseven.github.io/toastr/demo.html

Call vue toastr from HTML

Apologies for posting this as an issue, it really isn't, but I am looking to learn whether I can call the Vue toastr object from HTML too.

Ideally I would include the following in my HTML. I'm running toastr in plugin mode (Vue.use(Toastr);)

<script>
	@if(Session::has('message'))
		this.$toastr.s("All good!");
	@endif
</script>

Thanks!

[UPDATE] webpack 2.2.1

Hi,

I just tested on the webpack version 2.2.1 is everything works smoothly :)

Less Loader Error

Following the instructions produces the following error.

ERROR in ./node_modules/vue-toastr/src/vue-toastr.less
  Module parse failed: Unexpected token (2:0)
  You may need an appropriate loader to handle this file type.
  | // Mix-ins
  | .borderRadius(@radius) {
  |     -moz-border-radius: @radius;
  |     -webkit-border-radius: @radius;
   @ ./src/renderer/main.js 17:0-41
   @ multi ./.electron-vue/dev-client ./src/renderer/main.js

Component throws Vue tip

When using component, even demo on http://s4l1h.github.io/vue-toastr/ a warning is thrown in console:

[Vue tip]: <toast v-for="mm in m">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

found in

---> <VueToastr>
       <Root>

How to remove box-shadow?

Any idea how can I remove the box-shadow from all toasts? I haven't been able to figure that out.

Ask

how to add in
create(){
toaster
}

Installing with npm @latest Not Working

Following your install instructions to install for Vue2
npm install vue-toastr@^latest --save gives the following errors;

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "vue-toastr@^latest" "--save"
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3

npm ERR! No compatible version found: vue-toastr@^latest
npm ERR! Valid install targets:
npm ERR! 2.0.5, 2.0.4, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0.0
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/steve/devapps/sites/vue2-naijaprizes/npm-debug.log

I had to specify by version before I could install. Can you fix this for people who might know what to do in case this happens?
Thanks!

Is it possible to use this package without compiler?

I installed this package and added to main.js these lines

import Toastr from 'vue-toastr';
// require('vue-toastr/src/vue-toastr.scss');

// Vue.use(Toastr);
Vue.use(Toastr);

I saw error:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

Is it possible to use this package without compiler?

change less to sass

this.$root refers to the root instance, not app instance

In vue.js 2:

I inserted <vue-toastr ref="toastr"></vue-toastr> into App template, so according to the doc, I should be able to use this.$root.$refs.toastr.e("ERRROR MESSAGE") in any child component

However this.$root actually refers to the root instance which is initialized by new Vue() , it's not the actual App instance where I include toastr

Now I can only access app instance by this.$root.$children[0] thus toastr by this.$root.$children[0].$refs.toastr.e("ERRROR MESSAGE") , which looks ugly....

Any suggestion?

Passing argument into OnClicked method

Hi, thanks for this great plugin

I have been trying to pass an argument to the onClicked method and it always comes back as undefined.

Is this possible?

this.$toastr.s(
				{

						msg:"New SMS arrived from " + e.name + ": " + e.message + "",
						clickClose: true,
						timeout:0,
						type:'success',
						onClicked: (e)=>{

				                        console.log(e)
						}
					
				},
					
					
			);

Printing output to console

In src/toast/toast.js in the setTimeout() function, someone forgot to comment out the console.log calls.

This results in setTimeout and a number (in my case, 24) being printed to the console.

information toastr has no icon

Using the information toaster returns toaster without an information icon

HELP: override template

Hi guys,

How do I overwrite the template?

For example:

Border-radius
Width toast-bottom-full-width that is not 100%

In addition to the css I would like to change html also for example when the position is toast-bottom-full-width or toast-top-full-width the message stay in the bootstrap container position

What is the best practice and structure for this?

Thank you

Progressbar is still visible

Although I'm setting the progressbar to false when mounting the root:

this.$refs.toastr.defaultProgressBar = false;

... it is still visible in all the toasts.

variable width

Hi! Nice component!

As usual I have a designer who wants the width to be between top_center and top_center_full_width.

I tried to add styles to achieve that, but the width, min-width settings are ignored.

Any suggestion how I can achieve that apart from modifying the code?

Thanks
Andreas

HELP vuejs 2

Guys

I'm using vuejs 2

I added the component

Import Toastr from 'vue-toastr'

And

Components: {
     'Vue-toastr': Toastr
   },

And I'm calling you like this

Created () {
     This. $ Root. $ Refs.toastr.e ('ERRROR MESSAGE')
   },

ERROR
TypeError: Cannot read property 'e' of undefined

Thanks

npm uses vue-toastr.min.js by default

By making vue-toastr.min.js by default when using es6 imports. When comparing vue-toastr.min.js to vue-toastr.js, the code looks exactly the same

import Toastr from 'vue-toastr'

I look at my source scripts and it uses vue-toastr.min.js, when switching to using vue-toastr.js it's the same code but with a mapping. This causes problems when I try to switch environments has I minify/uglify scripts. When the min file is already minified, it gets minified again and can't be used.

Hold on hover?

Hello,

is there a way to have the progress bar of a toast "halt" if the toast is hovered and resume when left?
This way users can slow relevant toasts for the time needed to read.

Thank you!

not working on vue 2.0

Can't use with Vue 3 in browser

Your nice toasts were used for a while in my simple Vue 2 app. Now I upgraded to Vue 3, also upgraded plugin to 3,0.5 but can't figure out how to adjust to continue to use in browser, without bundlers.

I add script like this:

    <script src="~/lib/vue-toastr/dist/vue-toastr.umd.js"></script>

and my Vue app looks like this:

import { createApp } from '../lib/vue/vue.esm-browser.min.js';
const app = createApp({
... 
    mounted() {
        this.$toastr.defaultClassNames = ["animated", "fadeInDown"];
    },
...
});
//app.use(VueToastr);
app.mount('#app');

I'm getting the following errors:

plugin-vue:export-helper:7 Uncaught TypeError: Cannot read properties of undefined (reading 'defineComponent')
    at plugin-vue:export-helper:7:10
    at vue-toastr.umd.js:1:382
    at vue-toastr.umd.js:1:408

   TypeError: Cannot set properties of undefined (setting 'defaultClassNames')
    at app.js

if uncomment app.use(VueToastr); then additionally:
[Vue warn]: A plugin must either be a function or an object with an "install" function.

I tried many different things but no luck. Can you help?

How do I add a close icon to prompt the user to manually close

I want to add an icon(X) in the toaster that when clicked closes the toaster

Vue.Js 2 with Typescript is not allowing to import this package

I am trying to import vue-toastr in boot.ts. I have installed the package using npm. It installed successfully and I can see the files.

But when I am trying to import using the following code, it is not working.
import Toastr from "vue-toastr";
The error message I am getting is the following.

TS7016: Could not find a declaration file for module 'vue-toastr'. 'D:/Core.Vue/node_modules/vue-toastr/dist/vue-toastr.min.js' implicitly has an 'any' type.

Do you have any idea what is causing this issue and how to resolve it?

Missing documentation

You can please add documentation about your public API, For example:

1. Override the default configuration. (like timeout and defaultPosition).
2. The available methods.
   Thanks.