Vetur does not takes account of Vue instances' $variables

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win
• Vetur version: 0.22.2
• VS Code version: 1.38.0

Problem

When I declare a global variable in Vue prototype in order to access it from my components, Typescript and TSLint works well but Vetur displays a problem: Property '$http' does not exist on type 'HelloWorld' Vetur(2339)

Reproducible Case

Here is the files involved and the dir. structure (I’m kinda new on Typescript so I don’t know if I did some bad practice

│   App.vue
│   axios.ts
│   main.ts
│   registerServiceWorker.ts
│   router.ts
│   shims-axios.d.ts
│   shims-tsx.d.ts
│   shims-vue.d.ts
│   store.ts
│
├───assets
│       logo.png
│
├───components
│       HelloWorld.vue
│
├───store
│   │   index.ts
│   │
│   └───profile
└───views
        About.vue
        Home.vue

The error lays in HelloWorld.vue component :

<template>
...
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string

  public test() {
    return this.$http.post('....') // <== Property '$http' doest not exist on type 'HelloWorld'. Vetur(2339) [89, 17]
  }
}
</script>

<style scoped lang="scss">
...
</style>

However everything works fine in the TS compiler. Here’s the rest of the relevant files :

// axios.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

const config: AxiosRequestConfig = {
  baseURL: process.env.API_URL,
  timeout: 5000,
}

const http: AxiosInstance = axios.create(config)

// Interceptors declaration....

export default http

// main.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './axios'
import './registerServiceWorker'

Vue.config.productionTip = false

Vue.prototype.$http = http

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

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

// shims-axios.d.ts
import { AxiosInstance } from 'axios'

declare module 'vue/types/vue' {
  interface Vue {
    $http: AxiosInstance
  }
}

And my VSCode workspace settings:

{
  "folders": [],
  "extensions": {
    "recommendations": [
      "mikestead.dotenv",
      "esbenp.prettier-vscode",
      "ms-vscode.vscode-typescript-tslint-plugin",
      "octref.vetur"
    ]
  },
  "settings": {
    "editor.formatOnSave": true,
    "vetur.validation.template": true,
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.experimental.templateInterpolationService": true,
    "javascript.validate.enable": false,
    "javascript.format.enable": false,
    "typescript.format.enable": true,
    "tslint.packageManager": "yarn"
  }
}

[ktsn]

You probably need to import Vue’s typing in shims-axios.d.ts before writing augmentation. See: https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

[lukemovement]

Fix does not work why trying to use definitions of a local dependency.