How to use Vue.prototype or global variable in Vue 3?

Question

Like the title, I want to add Axios into Vue prototype. So when I want to use it, I can use it like this.$axios instead of importing it every time.

CODE:

//plugins/axios.ts

import axios from 'axios'
import router from '../router/index'

const errorHandle = (): void => {};

const instance = axios.create({
  // baseURL: process.env.NODE_ENV == 'development' ? '' : ''
  baseURL: 'http://localhost:3000',
  timeout: 1000 * 12
});

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

export default instance

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import instance from './plugins/axios'
import router from './router'

const app = createApp(App).use(router)
installElementPlus(app)
// app.config.globalProperties.http = instance
app.config.globalProperties.$axios= instance
app.mount('#app')

However, there is a problem when I try to use it like this: this.$axios.

TS2339: Property '$axios' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.

How could I fix this problem?

tony19 · Accepted Answer · 2022-09-06 19:06:57Z

115

You could use provide/inject or define a global config property, which replaces Vue.prototype in Vue 3:

1. `provide`/`inject` (for Composition or Options API)

Provide

import axios from 'axios';

const app = Vue.createApp(App);
app.provide('$axios', axios);  // Providing to all components during app creation

Inject

Composition API:

const { inject } = Vue;
...
setup() {
  const $axios = inject('$axios');   // injecting in a component that wants it
  // $axios.get(...)
}

Options API:

inject: ['$axios'],   // injecting in a component that wants it

2. Global config (for Options API)

import axios from 'axios';

const app = Vue.createApp(App);
app.config.globalProperties.$axios = axios;

Options API:

this.$axios

^{Note: This is only for the Options API. Evan You (Vue creator) says: "config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app."}

edited Sep 6, 2022 at 19:06

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 7, 2020 at 15:17

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James O'Toole Over a year ago

Option #2 worked beautifully as a substitute. Used for adding analytics tracking through an application.

Martin Zeltin · Accepted Answer · 2020-12-12 08:26:25Z

12

There is a way to use globalProperties inside a setup function. Although this might be considered an anti-patter. It would be better to use provide/inject if possible. But if there is a library that uses globalProperties and you really need to access it from setup this is how you could do it.

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const progressBar = app.appContext.config.globalProperties.$Progress

    progressBar.start()
</script>

answered Dec 12, 2020 at 8:26

Martin Zeltin

3,3385 gold badges26 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to use Vue.prototype or global variable in Vue 3?

2 Answers 2

1. `provide`/`inject` (for Composition or Options API)

2. Global config (for Options API)

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1. provide/inject (for Composition or Options API)

2. Global config (for Options API)

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1. `provide`/`inject` (for Composition or Options API)