Can you please specify the TypeScript data type for applications in Vue 3?

I am currently utilizing Vue 3 in conjunction with the vue-auth package.

To make use of vue-auth, my project necessitates the creation of a http/index.ts file, which should include:

import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

export default (app) => {
    app.axios = axios;
    app.$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}

However, I encountered a type error related to app:

https://i.sstatic.net/xfWuz.png

How can I go about resolving this issue?

typescriptvue.jsvuejs3vue-auth

Answer №1

application here refers to an instance of the application, which is exported by the vue package as App. If you wish to add axios and $http to this application instance, you will need to employ an assertion with a type of any.

               👇
import type { App } from 'vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;
                      👇
export default (app: App) => {
    (app as any).axios = axios;
    (app as any).$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}

Answer №2

This isn't exactly an error, but more of a gentle reminder that not specifying a type will default to any. If you prefer a specific type, the IDE suggests using it or any other type you prefer.

export default (app: any) => {
    app.axios = axios;
    app.$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}

If you wish, you can turn off this warning by adding "noImplicitAny": false in your tsconfig.json file (:)

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

streamlining the process of buffering and organizing items in a flow

Messages are received from an observable, sometimes out of order but with timestamps for sorting. The goal is to deliver elements chronologically despite the unordered arrival and uncertain end time of the stream. A slight delay in processing is acceptabl ...

javascripttypescriptrxjsrxjs-observables

Encountering issues with Vue 2.5 dynamic dropdown clicks not working as expected

Creating a dynamic dropdown with Vue.js 2.5 A static dropdown menu example: <ul class="dropdown-menu" role="menu" id="dropdown"> <li><a href="#" v-on:click="setDate('2018-11-11')">2018-11-11</a></li> <li> ...

javascriptvue.jstwitter-bootstrap-3vuejs2vue-component

Tips for transforming a style object into a compiled attribute value using Vue API

Can the Vue 2.x API be used to convert an object representing component styles into a format suitable for the style DOM attribute? Essentially, I am seeking an imperative API similar to the v-bind:style directive. For instance: const style = { fontSiz ...

javascriptvue.js

select2 value not being synchronized

Currently, I am utilizing Vue 2.5.17 and Select2 4.0.6-rc.1. In my project, there is an input field where I can choose options. My goal is to transmit the selected option to a store object. Below is the snippet of code from the component: <select2 ty ...

selectvue.jsjquery-select2

Harness the power of the Node.js Path module in conjunction with Angular 6

I'm currently facing an issue with utilizing the Path module in my Angular 6 project. After some research, I came across a helpful post detailing a potential solution: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d The remedy inv ...

node.jsangulartypescriptpath

just swap out the content of a node in prosemirror

I am currently working within a function that takes a string as its input: (text) => { } Within this function, I have access to the editor through Vue props (props.editor). My goal is to replace the current node's content with a specific text, bu ...

vue.jsvuejs3tiptapprose-mirror

The imported JS file shows a warning that the variable 'myProperty' is defined but not utilized anywhere

When I try to import a variable from the same folder, why am I getting an error message saying it is defined but not used? I am sure that I am using it. Your input would be greatly appreciated! error 'componentName' is defined but never used. ...

javascriptvue.jsecmascript-6es6-modules

Retrieve the property of a Typescript object using a template argument

I am looking to develop a Typescript Collection class that can locate items by field. Here is an example of what I have in mind: class Collection<T, K keyof T> { private _items: T[]; public isItemInCollection(item: T) { return _item ...

typescripttemplates

Getting a "module not found" error in Next.js while trying to import a TypeScript

Check out this code snippet: // lib/customFunction.ts export function customFunction() { console.log("customFunction"); } // pages/homepage.tsx import { GetServerSideProps } from "next"; // works import { exampleFunction } from "../lib/exampleFile.js" ...

typescriptnext.jses6-modules

What is the best way to display an HTTP stream in a Vue.js application?

I am working on a nodejs application that has an endpoint (/api/logs/{id}) providing an HTTP stream. My frontend web app is built using Vue.js and I want to consume this stream endpoint. What is the easiest way to do this? This stream is essentially an "e ...

node.jsvue.jsstream

Is it possible to populate a shopping cart using Vue?

Currently, I am working on integrating a shopping cart feature into a webpage using Vue.js. Upon loading the page, I successfully retrieve a list of items through an API call and display them. However, I am facing challenges in adding items to the cart. ...

vue.jsshopping-cart

Something went wrong: [ERR_UNSUPPORTED_ESM_URL_SCHEME]: The default ESM loader only supports URLs with a scheme of file, data, and node

Every time I attempt to run yarn dev to start a discord bot, I encounter the following error. The bot is built using TypeScript. I have attempted to update the Node.js version using nvm, but to no avail. I even tried using older versions of Node.js, going ...

node.jstypescriptpackagehadoop-yarnnvm

Display a Vue pie chart after a brief delay, similar to revealing a warning message in the console

I have encountered an issue with filling a pie chart in my Vue application. Even though I am able to fill data into it correctly, the pie chart does not show up immediately on the page. Instead, it appears after some time as if triggered by a console log. ...

vue.jschart.jspie-chart

Is there a way to eliminate the line that appears during TypeScript compilation of a RequireJS module which reads: Object.defineProperty(exports, "__esModule", { value: true });?

Here is the structure of my tsconfig.json file: { "compileOnSave": true, "compilerOptions": { "module": "amd", "noImplicitAny": false, "removeComments": false, "preserveConstEnums": true, "strictNullChecks": ...

javascripttypescriptrequirejsamdtsc

TypeScript: The RegExp element is inferred to have an 'any' type by default

Looking to develop a function that can handle duration strings like 12ms, 7.5 MIN, or 400H, and then convert them into milliseconds. const units = { MS: 1, S: 1 * 1000, MIN: 60 * 1 * 1000, H: 60 * 60 * 1 * 1000 } export function toMS(str: strin ...

javascriptarraystypescriptobjectimplicit-conversion

Utilizing the NuxtJS framework to tap into video camera functionalities

I am completely new to Vue and NuxtJs. My goal is to create a webcam feature using NuxtJs, but I have encountered some challenges. <template> <div class="photobooth"> <div class="controls"> <button @click="takePhoto">Ta ...

javascripthtmlvue.jsnuxt.js

When initiating an Ionic project, you may notice a repeated message in the terminal saying, "[INFO] Waiting for connectivity with npm..."

I'm in the process of setting up a new Ionic project along with all the necessary dependencies. However, whenever I try to execute the command "ionic serve," I keep getting stuck at the continuous display of the message "[INFO] Waiting for connectivit ...

node.jsangulartypescriptcordovaionic-framework

How to attach a Vue.js component to the root of an application

I've built a modal.vue component like this: <template> <transition name="modal-transition"> <div class="modal-body" v-if="displayed"> <div class="modal-overlay" @click="displayed = false"& ...

vue.jsvuejs2

`Incorporate existing HTML data into Vue view-model`

My goal is to utilize Vue with pre-rendered HTML initially. While we may not continue this approach in the future, for now it seems more convenient to keep the server code intact and use Vue to handle client-side logic. I have been unable to find resource ...

vue.jsvuejs2

Dynamic registration of child components in Vue.js is a handy technique to enhance

Within my component, which I will refer to as Parent.vue (code provided below), I am utilizing the <component> tag in Vue.js to dynamically render a component. This component takes a prop called child, which specifies the type of the child component ...

vue.jsvuejs2