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
  }
}

Answer 2

The accepted answer doesn't seem to actually work, instead check out @RomainLanz's answer on a related vue-snotify GitHub issue:

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

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

Adding this answer here because this was one of the pages that came up when searching for the same thing.