CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-component
Dale
Dale

Reputation: 580

Vue augmented types - XYZ does not exist on type

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?

Upvotes: 3

Views: 717

Answers (2)

Crucial
Crucial

Reputation: 41

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.

Upvotes: 0

Decade Moon
Decade Moon

Reputation: 34306

Try augmenting the Vue type instead of VueConstructor:

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

Upvotes: 1

Related Questions