Nuxt - asyncData ISSUE: "Variable '$axios' is inferred to have an 'any' type."

Referencing the guidelines provided at

Encountering an error logged in console while executing yarn dev:

ERROR  ERROR in pages/index.vue:51:21                                                                                                                                                                                                                                                                           23:01:53
TS7031: Binding element '$axios' implicitly has an 'any' type.
    49 |   }
    50 | 
  > 51 |   async asyncData({ $axios }) {
       |                     ^^^^^^
    52 |     const ip = await $axios.get('http://icanhazip.com')
    53 |     return { ip }
    54 |   }

Confirmed the presence of '@nuxtjs/axios' in both my nuxt.config.js and tsconfig.json.

Can't figure out why this error suddenly appeared after previously working fine. Any insights or assistance would be greatly appreciated. Thanks!

typescriptvue.jsasync-awaitnuxt.jstypeerror

Answer №1

asyncData function receives a parameter known as context, which is defined as type Context in the @nuxt/types module. To make use of this, you need to import Context from @nuxt/types and specify the type of the deconstructed argument as shown below:

async asyncData({ $axios } : Context) {
  const response = await $axios.get('http://icanhazip.com')
  return { ip: response.data }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting a Custom React Component from an external library to work with MUI styling

I am currently working with a React component that comes from a module located in the node_modules folder: type Props = { someProps: any }; export function ComponentA(props: Props) { const [value, setValue] = React.useState(""); return ( <Te ...

reactjstypescriptmaterial-ui

Unlock the potential of vue-datepicker by harnessing the power of multiple calendars

Currently, I am implementing the Composition API and utilizing the Vuepic/vue-datepicker library. However, I have encountered an issue with my datepicker setup. The code for my datepicker is as follows: <Datepicker multi-calendars multi-calendars-so ...

vue.jsdatepickervuejs3

TypeScript error: Cannot find property 'propertyName' in the 'Function' type

I encountered an issue with the TypeScript compiler when running the following code snippet. Interestingly, the generated JavaScript on https://www.typescriptlang.org/play/ produces the desired output without any errors. The specific error message I recei ...

javascripttypescript

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

VueX threw an error stating that it cannot read property 'getters' because it is undefined in Nuxt.js

Just starting out with Vuejs and Nuxt.js. I recently set up a Nuxt project but encountered an error when trying to run it: https://i.sstatic.net/ROtOs.png Any assistance would be greatly appreciated. Thank you. ...

javascriptvue.jsvuejs2vuexnuxt.js

Exploring TypeScript and React: Redefining Type Definitions for Libraries

As I transition from JSX to TSX, a challenge has arisen: My use of a third-party library (React-Filepond) This library has multiple prop types The provided types for this library were created by an individual not affiliated with the original library (@ty ...

reactjstypescript

Tips for interacting with a modal using Bootstrap Vue

I have implemented a sophisticated modal in its own component. It operates on a duplicate of the supplied model to enable the user to cancel the action. <template> <b-modal v-if="itemCopy" v-model="shown" @cancel="$emit('input& ...

vue.jsbootstrap-vue

Obtaining a response from an Express server for an AJAX query in Nuxt.js is essential for

Need help with extracting data from a node/express server after sending an ajax query from any page of the nuxtjs app. Typically, I would use the following code to handle ajax queries in a PHP server: $_GET['var']; echo json_encode('Server g ...

node.jsexpressvue.jsaxiosnuxt.js

Fill a dynamic form with a date sourced from the ngrx storage

How can I populate a form with data from the store if setValue and patchValue methods are not working? export class MyComponent implements OnInit, OnDestroy { public newsletterToEdit$: Observable<NewNewsletter> = this.store.selectNewsletterToEdi ...

angulartypescriptangular-reactive-forms

Updating input value in Vue using JavaScript method

When using JavaScript to set the value of an input in my Vue method, it initially appears to work. However, when I try to save the data, it only saves what was typed before the value was updated by the method. For example, if I type new yor and select "New ...

javascriptvue.jsvuejs2

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

javascriptreactjstypescriptnext.jsswr

Transforming time into luxon time frames and hours

Is there a way to convert this block of code from moment.js to luxon? Here is the code snippet for reference: The following code is written using moment.js, but I would like to achieve the same functionality using luxon. timezone: null, getIn: moment() ...

reactjstypescriptmomentjsmoment-timezoneluxon

What steps can I take to stop Vetur and TypeScript from displaying duplicate TypeScript warnings in VSCode?

I have a Vue2 project using TypeScript in VSCode with Vetur and TypeScript extensions installed. Whenever there is a TypeScript warning, both the TypeScript and Vetur overlays show duplicate warnings. Example of duplicate warnings Also, the intellisense ...

typescriptvue.jsvisual-studio-codevetur

Enforcing Type Safety on String Enums in Typescript Using the 'const' Assertion

I am trying to use an enum for type checking purposes. Here is the enum I have: enum Options { Option1 = "xyz", Option2 = "abc" } My goal is to create a union type of 'xyz' | 'abc'. However, when I attempt to d ...

typescript

Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types

Given a unique GraphQL union return type: union GetUserProfileOrDatabaseInfo = UserProfile | DatabaseInfo meant to be returned by a specific resolver: type Query { getUserData: GetUserProfileOrDatabaseInfo! } I am encountering warnings and errors rel ...

typescriptgraphql

What do you believe to be superior: Vue UI design?

Scenario: Application managing multiple user roles. A view with extensive conditional rendering in the template. a) Is it preferable to have numerous conditional statements in a single view's template? b) Should separate views be created for each ro ...

javascriptvue.jsuser-interfacedesign-patternsvue-component

The RxJs 'from' function is currently producing an Observable that is unrecognized

import { Tenant } from './tenant'; import { from, Observable } from 'rxjs'; export const testTenants: Tenant[] = [ { 'tenant_id': 'ID1' } ] const tenants$: Observable<Tenant>= from(testTenant ...

typescriptrxjs

When using the Angular Material table with selection enabled, the master toggle functionality should always deselect the

I made modifications to the original Angular Material Table example - Stackblitz. In my version, when some rows are selected and the master toggle is clicked, all selected rows should be deselected (similar to Gmail behavior). The functionality works, but ...

angulartypescriptangular-material

Is there a way to retrieve and utilize this JSON data within Vue.js?

Here is the JSON output: { "Response": { "Error": { "ErrorCode": 0, "ErrorMessage": "" }, "Results": { "FareBreakdown": [{ ...

vue.jsvuejs2vuejs3

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

Imagine two functions, A and B, both interacting with a MySQL database using connection.query(...) methods. Function A utilizes a while loop to navigate through the response it receives. Subsequently, function B is invoked with the response from function ...

javascriptnode.jsexpressasync-await