How to include a library to be available in whole Vue.js 3 project?

Question

According to this blog post the correct way of including frequently used libraries (e.g. axios) in Vue.js 2 is to set them as property of Vue prototype object like this:

import axios from 'axios';
Object.defineProperty(Vue.prototype, '$axios', { value: axios });

Unfortunately, this approach is not working in Vue.js 3 anymore. So what is the correct way of importing library to be accesible in whole project? I would prefer not to set them as global variable (i.e. to the window object.)

Answer 1

To use provide/inject as an alternative

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
    
const app = createApp(App)
app.provide('axios', axios ) // <-- define here
app.mount('#app')

Then in any component you wanna use axios you would do this

app.component('todo-list-statistics', {
  inject: ['axios'],
  created() {
    this.axios // --> Injected property
  }
}

Answer 2

I think the best way to us a library in a vue 3 project is to use the depency injection https://v3.vuejs.org/guide/component-provide-inject.html

however I simply recommend that you import the library where you really need it, to have a more accurate intellisense, and a better three-shaking