Vetur: Vetur does not takes account of Vue instances' $variables

[Tcheikovski]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] 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

```ts
// 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')

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

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

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

And my VSCode workspace settings:
```json
{
  "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"
  }
}

[Tcheikovski]

Hi there, any chance to have an answer ?

[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

[octref]

@Tcheikovski I see you upvoted @ktsn's suggestion so I suppose that solved your issue? If not, feel free to reopen.

[Deji69]

I have the same issue, despite applying the workarounds

EDIT: Tried downgrading to OP's version, did not fix it.

[lukemovement]

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