Property '$axios' does not exist on type

[raveltan]

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:

1. Create a nuxt project with typescript and axios, tsc will complain about the axios type
2. add axios type to tsconfig, the error message on vscode will disapper
3. 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

[kevinmarrec]

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 !

[spiritbroski]

@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

[raveltan]

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.

[seupedro]

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/

[fahmiegerton]

I still cannot make this works. $axios still missing even in nuxt context

[birtanyildiz]

I still cannot make this works. $axios still missing even in nuxt context

do you add "@nuxtjs/axios" in tsconfig.json file under types, your types section must be like

"types": [ "@types/node", "@nuxt/types", "@nuxtjs/axios" ]

[martinsagat]

The same issue, has anyone managed to solve this?

[danielroe]

@martinsagat If you are experiencing an issue, please raise it against https://github.com/nuxt-community/axios-module/issues

[dgrinbergs]

I have this issue too. My project is using Nuxt 2.15.8 and I've followed the instructions here. Is this a lost cause at this point?

Left: /store/products.ts Right: /tsconfig.json

[danielroe]

Your editor doesn't know that is a vuex store. You can manually use the ActionTree type exported by vuex or use a library that exists to help provide type safety, such as my own https://typed-vuex.roe.dev or one of the others here.

[diego-santiago]

Add "nuxtjs/axios" on tsconfig.json worked for me:

"types": [
  "@nuxt/types",
  "@nuxtjs/axios",
  "vuetify"
]