Typescript definitions

[IlyaSemenov]

This fixes #19 and #75.

Without typescript definitions, this code in pages/index.vue:

<template>
<div>
 <button @click="check">Click me</button>
 res = {{ res }}
</div>
</template>

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

@Component
export default class extends Vue {
	res = null
	async check () {
		this.res = await this.$axios.$get('auth/whoami')
	}
}
</script>

will fail:

ERROR in /Users/semenov/work/xxx/nuxt/pages/index.vue(25,26):
TS2339: Property '$axios' does not exist on type 'default'.

Note: due to how Nuxt.js/webpack works, you may need to explicitly import definitions in your project root index.d.ts:

import '@nuxtjs/axios'

[pi0]

Thanks mate :)

[hartmut-co-uk]

@pi0 is there a new released planned including this?

[zerosym]

@pi0 @IlyaSemenov Aren't these definitions incorrect?

axios-module/lib/plugin.template.js

Line 39 in eca7298

axiosExtra['$' + method] = function () { return this[method].apply(this, arguments).then(res => res && res.data) }

Don't these $methods unwrap the AxiosPromise<T> and return a Promise<T>?

[sinoru]

I think... @zerosym is right.
I have some problem with this definitions because of that.

May I create new pull request?
I created new pull request for that: #162

[IlyaSemenov]

@zerosym You are right, it should be Promise<T>. That was my first dive into Typescript back then. This is odd that the definitions actually worked for me 🤔 ...or at least I thought so.

I had soon switched from Nuxt to Ream in my Typescript project so perhaps I never tested them in real use.

[hartmut-co-uk]

any plans for a module release?

[pi0]

It is released 😁

[hartmut-co-uk]

Many thanks! I was only looking at https://github.com/nuxt-community/axios-module/releases ..
But now found it released as 5.3.2 at https://www.npmjs.com/package/@nuxtjs/axios if anyone's curious.. 🙇

[husayt]

@pi0 seems like type definitions are not published with the release. I can't see "index.d.ts" in node_modules/@nuxt/axios.

Also will be more standard to publish them in types folder like vue or vuex does:
https://github.com/vuejs/vuex/tree/dev/types

Thanks

[pi0]

@husayt Really thanks for notifying this problem. I've releases 5.3.3 which hopefully resolved this issue. Please let me know if still having problems.

https://unpkg.com/@nuxtjs/axios@5.3.3/index.d.ts

[husayt]

@pi0 thank you very much. I can confirm it is working like a charm.

[davision]

Hi! I'm having a similar issue with my TSlint throwing an error: Property '$axios' does not exist on type 'Vue'. I'm using nuxt-axios in collaboration with asyncData like this:

  async asyncData({params, app}) {
    try {
      const res = await app.$axios.get('/spaces' );
      const space = res.data.data;
      return { space };
    } catch (err) {
      cosnole.log(err);
    }
  },

Although, the code runs fine in dev mode, but I cannot build the app. Any hints?

[IlyaSemenov]

@davision try adding import '@nuxtjs/axios' somewhere in your source files, this should trigger the type loader (also check if you actually have the latest version with typings in node_modules/@nuxtjs/axios/types/index.d.ts)

[davision]

Thank you for quick response! Typings are ok. I've created an index.d.ts with import '@nuxtjs/axios and that did the trick. Thanks!

[Yihao-G]

@davision try adding import '@nuxtjs/axios' somewhere in your source files, this should trigger the type loader (also check if you actually have the latest version with typings in node_modules/@nuxtjs/axios/types/index.d.ts)

You can also add @nuxtjs/axios to compilerOptions like so:

{
  "compilerOptions": {
    "types": [
      "@nuxtjs/axios"
    ]
  }
}