[FIXED] How to correctly import Axios in vue 3 after creating new project with CLI?

Issue

I created a new project using:

vue create hello-world

Generating a new project that includes the HelloWorld.vue, app.vue, main.js (etc ...) files.

Now I install Axios by following the docs Npm vue-axios:

npm install --save axios vue-axios

I import Axios in the main.js file:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

And now I run into a problem that I don't understand. The VueAxios docs say you simply use it like so:

const app = Vue.createApp(...)
app.use(VueAxios, axios)

But the way app is created in Vue 3 is different. I think this is where the problem comes from:

createApp(App).mount('#app')

So, how do I correctly import axios?

Solution

createApp(App).mount('#app') is effectively the same as:

import Vue from 'vue'
const app = Vue.createApp(App)
app.mount('#app')

// or
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

So following Vue Axios's docs, just insert the line for app.use():

import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios) // 👈
app.mount('#app')

You could also chain it like this:

createApp(App).use(VueAxios, axios).mount('#app')

demo

Answered By - tony19

Answer Checked By - Mildred Charles (PHPFixing Admin)