Typescript: Property '$axios' does not exist on type

Created on 21 Oct 2020 · 6Comments · Source: nuxt/typescript

Describe the bug
Property '$axios' does not exist on type
is outputed on yarn dev, even though the vscode autocomplete recoqnise it and the axios method is running properly

To Reproduce
Steps to reproduce the behavior:

Create a nuxt project with typescript and axios, tsc will complain about the axios type
add axios type to tsconfig, the error message on vscode will disapper
run yarn dev, and it will state that error

Expected behavior
The error should not exists as the type is added to tsconfig and vscode is already able to recoqnise the type.

Additional context
I tried clearing the node modules, yarn.lock and .nuxt a few times, but the error presists

Source

raveltan

Most helpful comment

@raveltan i fix the issue by added @Component decorator to class also on type declarations add NuxtAxiosInstance like this

// ts-shim.d.ts
import { Auth } from '@nuxtjs/auth'
import { NuxtAxiosInstance } from '@nuxtjs/axios'
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module '@nuxt/types' {
  interface Context {
    $auth: Auth
  }
}
declare module '@nuxt/types' {
  interface Context {
    $axios: NuxtAxiosInstance
  }
}

put this on ts-shim.d.ts in your root project

don't forget to add @Component decorator in one of your component like this:

import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class MyStore extends Vue {

hope it helps

spiritbro1 on 12 Nov 2020

👍4

All 6 comments

Hi @raveltan

First, If you have differences between editor & console it's because they don't use the same TypeScript version.
You may need to first to tell VSCode to use "vetur.useWorkspaceDependencies": true setting to be sure both use the same version.

Then, is there a way I could take a look to your projec to help you out ?
I should only need package.json, yarn.lock & tsconfig.json to find the issue but if you have the issue creating a new project, could you create a github repository from that ? So I can reproduce & fix it :) Thanks !

kevinmarrec on 28 Oct 2020

👍2

@raveltan i fix the issue by added @Component decorator to class also on type declarations add NuxtAxiosInstance like this

// ts-shim.d.ts
import { Auth } from '@nuxtjs/auth'
import { NuxtAxiosInstance } from '@nuxtjs/axios'
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module '@nuxt/types' {
  interface Context {
    $auth: Auth
  }
}
declare module '@nuxt/types' {
  interface Context {
    $axios: NuxtAxiosInstance
  }
}

put this on ts-shim.d.ts in your root project

don't forget to add @Component decorator in one of your component like this:

import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class MyStore extends Vue {

hope it helps

spiritbro1 on 12 Nov 2020

👍4

Thanks for the info guys, i had migrated the project to javascript earlier this last week as i am unable to get rid of the error, but i will definitely check your suggestions if i happen to use nuxt with typescript again next time.

raveltan on 13 Nov 2020

Im my case, I was missing to use Vue.extend({}) or Vue.Component as described here https://vuejs.org/v2/guide/typescript.html#Basic-Usage and here https://typescript.nuxtjs.org/