All Projects → imcvampire → Vue Axios

imcvampire / Vue Axios

Licence: mit
A small wrapper for integrating axios to Vuejs

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Axios

Physx Rs
🎳 Rust binding and wrapper over NVIDIA PhysX 🦀
Stars: ✭ 310 (-83.57%)
Mutual labels:  wrapper, hacktoberfest
Axios Module
Secure and easy axios integration with Nuxt.js
Stars: ✭ 998 (-47.11%)
Mutual labels:  hacktoberfest, axios
Pokedex Promise V2
An easy way to use pokeapi v2 with promises in node.js
Stars: ✭ 315 (-83.31%)
Mutual labels:  wrapper, hacktoberfest
Openapi Client Axios
JavaScript client library for consuming OpenAPI-enabled APIs with axios
Stars: ✭ 168 (-91.1%)
Mutual labels:  hacktoberfest, axios
Pokebase
Python 3 wrapper for Pokéapi v2
Stars: ✭ 99 (-94.75%)
Mutual labels:  wrapper, hacktoberfest
Canvasapi
Python API wrapper for Instructure's Canvas LMS. Easily manage courses, users, gradebooks, and more.
Stars: ✭ 306 (-83.78%)
Mutual labels:  wrapper, hacktoberfest
Imgui Go
Go wrapper library for "Dear ImGui" (https://github.com/ocornut/imgui)
Stars: ✭ 499 (-73.56%)
Mutual labels:  wrapper, hacktoberfest
Nodeactyl
A NodeJS API for Pterodactyl panel, this was originally designed for discord.js (Discord bots)
Stars: ✭ 107 (-94.33%)
Mutual labels:  wrapper, axios
Aiovk
vk.com API python wrapper for asyncio
Stars: ✭ 85 (-95.5%)
Mutual labels:  wrapper, hacktoberfest
Pswritecolor
Write-Color is a wrapper around Write-Host allowing you to create nice looking scripts, with colorized output.
Stars: ✭ 78 (-95.87%)
Mutual labels:  wrapper, hacktoberfest
Vuex Rest Api
A utility to simplify the use of REST APIs with Vuex
Stars: ✭ 365 (-80.66%)
Mutual labels:  hacktoberfest, axios
Pokeapi Js Wrapper
PokeAPI browser wrapper, fully async with built-in cache
Stars: ✭ 129 (-93.16%)
Mutual labels:  wrapper, hacktoberfest
Nodeactyl
A NodeJS API for Pterodactyl panel, this was originally designed for discord.js (Discord bots)
Stars: ✭ 55 (-97.09%)
Mutual labels:  wrapper, axios
Colore
A powerful C# library for Razer Chroma's SDK
Stars: ✭ 121 (-93.59%)
Mutual labels:  wrapper, hacktoberfest
Libfaketime
libfaketime modifies the system time for a single application
Stars: ✭ 1,932 (+2.38%)
Mutual labels:  wrapper, hacktoberfest
React Announcement
📣 Push out beautiful website announcements in React 📣 An NPM package to quickly convey your message to visitors.
Stars: ✭ 149 (-92.1%)
Mutual labels:  hacktoberfest
Container
HedgeDoc container image resources
Stars: ✭ 149 (-92.1%)
Mutual labels:  hacktoberfest
Has Parameters
A trait that allows you to pass arguments to Laravel middleware in a more PHP'ish way.
Stars: ✭ 149 (-92.1%)
Mutual labels:  hacktoberfest
Readme Scribe
A GitHub Action that automatically generates & updates markdown content (like your README.md)
Stars: ✭ 149 (-92.1%)
Mutual labels:  hacktoberfest
Strapi Middleware Cache
🔌 A cache middleware for https://strapi.io
Stars: ✭ 146 (-92.26%)
Mutual labels:  hacktoberfest

vue-axios

npm version install size npm downloads jsdelivr License

A small wrapper for integrating axios to Vuejs

Why

I created this library because, in the past, I needed a simple solution to migrate from vue-resource to axios.

It only binds axios to the vue instance so you don't have to import everytime you use axios.

Support matrix

VueJS \ VueAxios 1.x 2.x 3.x
1.x
2.x
3.x

How to install:

ES6 Module:

npm install --save axios vue-axios

Import libraries in entry file:

// import Vue from 'vue'   // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'

Usage in Vue 2:

Vue.use(VueAxios, axios)

Usage in Vue 3:

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

Script:

Just add 3 scripts in order: vue, axios and vue-axios to your document.

Usage:

in Vue 2

This wrapper bind axios to Vue or this if you're using single file component.

You can use axios like this:

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

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

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

in Vue 3

This wrapper bind axios to app instance or this if you're using single file component.

in option API, you can use axios like this:

// App.vue
export default {
  name: 'App',
  methods: {
    getList() {
      this.axios.get(api).then((response) => {
        console.log(response.data)
      })
      // or
      this.$http.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}

however, in composition API setup we can't use this, you should use provide API to share the globally instance properties first, then use inject API to inject axios to setup:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
app.mount('#app')

// App.vue
import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const axios: any = inject('axios')  // inject axios

    const getList = (): void => {
      axios
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    return { getList }
  }
}

Please kindly check full documentation of axios too

Multiple axios instances support

The library allows to have different version of axios at the same time as well as change the default registration names (e.g. axios and $http). To use this feature you need to provide options like an object where:

  • <key> is registration name
  • <value> is instance of axios

For Vue it looks like this:

// Vue 2 / Vue 3 + Composition API
import App from './App.vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import axios2 from 'axios'
Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API

// usage
export default {
  methods: {
    getList(){
      this.$myHttp.get(api).then((response) => {
        console.log(response.data)
      })
      this.axios2.get(api).then((response) => {
        console.log(response.data)
      })
    }
  }
}

It works similarly in Options API of Vue 3 but if you want to use Composition API you should adjust your code a bit to extract proper keys, e.g.:

// Vue 2 + Setup function
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
app.provide('$myHttp', app.config.globalProperties.$myHttp)  // provide '$myHttp'
app.provide('axios2', app.config.globalProperties.axios2)  // provide 'axios2'
app.mount('#app')

// App.vue
import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const $myHttp: any = inject('$myHttp')  // inject $myHttp

    const getListWithMyHttp = (): void => {
      $myHttp
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    const axios2: any = inject('axios2')  // inject axios2
    const getListWithAxios2 = (): void => {
      axios2
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };


    return { getListWithMyHttp, getListWithAxios2 }
  }
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].