Vue 3's Provide / Inject using the Options API

Question

I've been trying to follow the documentation for the API on the Vue 3 website which says to use app.provide('keyName',variable) inside your main.js file like so:

import App from './App.vue'
import { createApp } from 'vue'
import axios from 'axios'

const app = createApp(App)

app.provide('axios', axios)

app.use('Vue')
app.mount('#app')

Then inject and use it in your child component like so:

export default {
  inject: ['axios'],
  ...
  createUser (data) {
    return this.axios.post('/users', data)
  }
}

However doing so just gives me this error in my console:

Uncaught TypeError: Cannot read properties of undefined (reading 'post')

Is there anything I'm missing? I didn't see any about an import unless you're using the Composition API. Can provide / inject be called from within a .js file? I would expect so as long as its within a export default {} statement

Ive tried following the API to a "T" but it simply refuses to work for me. Also tried searching the web for solutions but everything I've found says what I'm doing should be working just fine.

if you try provide/injecting basic strings, like in the docs, does that at least work? also, potentially unrelated but what is `app.use('Vue')` in `main.js` doing exactly? as far as I know that should be throwing an error — yoduh, Feb 03 '23 at 15:54
Thanks for pointing that out - it wasnt throwing an error in my app, just a warning. I dont know how I missed that... — Kris, Feb 04 '23 at 01:55

score 0 · Accepted Answer · answered Feb 03 '23 at 17:57

It works, see the playground.

But is not absolutely necessary, since with the browser library version axios is globally defined and could be accessed also without inject

You could also save yourself some time with the vue-axios plugin.

Example

const { createApp } = Vue;

const myComponent = {
  inject: ['axios'],
  created() {    
    this.axios.get('/')
      .then(function (response) {
        console.log(response);
      })
     .catch(function (error) {
        console.log(error);
      })
  },
  template: '<div>My Component</div>'
}

const App = {
  components: { 
    myComponent
  }
}

const app = createApp(App)
app.provide('axios', axios)
app.mount('#app')

<div id="app">  
  <my-component></my-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios@1.3.1/dist/axios.min.js"></script>

I think I found my issue, for whatever reason every time I try to use 'this' both in and out of an arrow function, it returns either 'undefined' or if its a export statement it'll represent the export statement. So I guess that leads me to "how do I get 'this' to point to the vue instance?" — Kris, Feb 04 '23 at 01:51
where are you trying to use an arrow function? it's a feature of JavaScript that arrow functions create their own enclosed context and don't have their own `this`. If you can, just use normal function and the Vue instance will be accessible — yoduh, Feb 04 '23 at 02:12

Vue 3's Provide / Inject using the Options API

1 Answers1

Example