"Property $notify does not exist on type" - Can't use npm package on Vue App

Question

I am using this npm package to send notifications in my Vue App. After following the instructions, and adding the required usages on the main.ts , I keep getting when I try to use the features of it:

    Property '$notify' does not exist on type 'Shop'

main.ts :

import Vue from 'vue'
import Notifications from 'vue-notification'
import App from './App.vue'

Vue.use(Notifications)

new Vue({
  render: h => h(App)
}).$mount('#app')

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Character from "./Character.vue";
import Vendor from "./Vendor.vue";

@Component<Shop>({
  components: {
    Character,
    Vendor
  },
})
export default class Shop extends Vue {
  sellItem(itemID) {
    this.$notify({
      title: 'Important message',
      text: 'Hello user!'
    });
  }
}
</script>

I have tried importing the component in the.vue file, however it does not recognize the type. What am I doing wrong? I can't find any solution for this...

Thank you.

Answer 1

Add a shim typings file

You need a file that imports and re-exports the type of "Vue", it is named vue-file-import.d.ts, but elsewhere on the inte.net it is commonly called vue-shim.d.ts. Regardless of name, the content needed is the same:

// vue-file-import.d.ts

declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
}

Try placing the above file in /src location. But sometimes when you move around changing things it might not work so I suggest you to place it inside /typings location