Vue augmented types - XYZ does not exist on type

Question

I'm using vue class component with typescript and I need to augment the types to use a third party module.

component

export default class TestComponent extends Vue  {

   private created() {
     this.$snotify.success('test')
   }
}

shims.d.ts

import Vue from 'vue'
import { Snotify } from 'vue-snotify'

declare module 'vue/types/vue' {
    interface VueConstructor {
      $snotify: Snotify
    }
  }

"Property $snotify does not exist on type TestComponent"

Vue.$snotify exists, but this.$snotify does not even though this extends Vue

Where am I going wrong?

Answer 1

Try augmenting the Vue type instead of VueConstructor:

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