artemsky/vue-snotify

The Property '$snotify' does not exist

Opened this issue · 3 comments

I'm trying to use vue-snotify in a Vue.js TypeScript project.

At the moment, I'm importing and using it:

import Snotify from 'vue-snotify';
Vue.use(Snotify);

I'm trying to show a toast in the global Vue.config.errorHandler. But the property $snotify isn't available on the global Vue instance like:

Vue.$snotify.success(...

Are there any other ways of doing this?

I've been able to do this in my router by calling Vue.prototype.$snotify.success(...).

Hey all! 👋

You need to extends VueJs types.
You can do that by creating an index.d.ts at the root of your directory and add the following content.

import Vue from 'vue'
import { SnotifyService } from 'vue-snotify/SnotifyService'

declare module 'vue/types/vue' {
  interface Vue {
    $snotify: SnotifyService
  }
}

This code will extends the Vue interface and add $snotifyproperty with the correct type - so you can have IntelliSense.

The best would be to have this library handle this for us.
I don't know what @artemsky thinks, I can create a PR to fix this.

qru23 commented

@RomainLanz 's answser was exactly what I needed - this wasn't obvious at all nor easy to find, and wasn't mentioned anywhere in the docs!!