What is the proper way to import Axios in Vue 3 once you have created a new project using the CLI?

Question

What is the proper way to import Axios in Vue 3 once you have created a new project using the CLI?

When starting a new project, I used the command:

vue create hello-world

This generated essential files like HelloWorld.vue, app.vue, and main.js.

Next, I followed the documentation on Npm vue-axios to install Axios:

npm install --save axios vue-axios

In the main.js file, I imported Axios as follows:

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

However, when trying to use VueAxios according to its documentation:

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

I encountered a problem due to the difference in creating an app instance in Vue 3:

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

So now I'm wondering how to correctly import axios. Any suggestions?

javascript vue.js axios vuejs3 vue-composition-api

Answer 1

Answer №1

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

essentially performs the same function as:

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

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

As per the guidelines laid out in Vue Axios's documentation, simply add the following line for application.use():

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

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

You may also concatenate it like this:

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

example

Answer 2

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

essentially performs the same function as:

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

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

As per the guidelines laid out in Vue Axios's documentation, simply add the following line for application.use():

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

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

You may also concatenate it like this:

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

example

Answer 3

Answer №2

If you want to use only axios, you can import it and set it as a global property:

For bundlers like vue cli, vite or webpack:

import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios

Now you can access it in any child component like this:

Using Option API:

this.axios.get(...)

For Composition API, it's recommended to import axios directly:

import axios from 'axios'

const MyComponent = {
  setup() {
    //use axios here

   .... 
  }
}

Alternatively, you can also use useAxios from the vueuse library (vue composition utilities):

import { useAxios } from '@vueuse/integrations/useAxios'
...
 setup() {
   const { data, isFinished } = useAxios('/api/posts')
 }

Answer 4

If you want to use only axios, you can import it and set it as a global property:

For bundlers like vue cli, vite or webpack:

import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios

Now you can access it in any child component like this:

Using Option API:

this.axios.get(...)

For Composition API, it's recommended to import axios directly:

import axios from 'axios'

const MyComponent = {
  setup() {
    //use axios here

   .... 
  }
}

Alternatively, you can also use useAxios from the vueuse library (vue composition utilities):

import { useAxios } from '@vueuse/integrations/useAxios'
...
 setup() {
   const { data, isFinished } = useAxios('/api/posts')
 }

Answer 5

Answer №3

I found success with this in VueJS 3.

npm install vue-axios

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

const app = createApp(App);
app.use(VueAxios)
app.use(axios)

app.mount("#app");


this.axios.get(api).then((response) => {
    console.log(response.data)
})

For more information, check out the documentation: https://www.npmjs.com/package/vue-axios

Answer 6

I found success with this in VueJS 3.

npm install vue-axios

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

const app = createApp(App);
app.use(VueAxios)
app.use(axios)

app.mount("#app");


this.axios.get(api).then((response) => {
    console.log(response.data)
})

For more information, check out the documentation: https://www.npmjs.com/package/vue-axios

What is the proper way to import Axios in Vue 3 once you have created a new project using the CLI?

Answer №1

Answer №2

Answer №3

Similar questions

The process of ensuring a component updates upon clicking on it

Is it possible to use a full-width material-ui Button inside a Badge component?

Create a polling feature using a Grease Monkey script

Utilizing memcache in conjunction with PHP and Node.js

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

Looking to streamline your webpack configuration in vue.config.js? Utilize webpack-chain for efficient setup. And, wondering how to leverage the speed-measure-webpack

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

Typescript's forEach method allows for iterating through each element in

sole active component present

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

Receiving the latest state from Vuex in a Vue3 component

Origin Access-Control-Allow Not Recognized

Issue with accessing Scope value in AngularJS directive Scope

Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

Is there a way to prevent the DOM from loading images until Angular has successfully injected the correct variables?

What are the steps to create a class diagram for a NodeJS application?

What could be the reason for my failing express test?

How can I transmit information using Json and javascript?

Tips for Incorporating the YouTube Iframe API into Your ReactJS Project

Discover the initial two instances of a specific element within a collection of javascript objects