or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-vue-axios

A small wrapper for integrating axios to Vue.js applications

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/vue-axios@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue-axios@3.5.0

Vue Axios

Vue Axios is a lightweight wrapper library that seamlessly integrates the Axios HTTP client with Vue.js applications. It provides convenient access to Axios through component properties, eliminating the need for repetitive imports while supporting both Vue 2 and Vue 3.

Package Information

Package Name: vue-axios
Package Type: npm
Language: JavaScript with TypeScript definitions
Installation: npm install --save axios vue-axios

Core Imports

import VueAxios from 'vue-axios';
import axios from 'axios';

For CommonJS:

const VueAxios = require('vue-axios');
const axios = require('axios');

Basic Usage

Vue 2

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

Vue.use(VueAxios, axios);

// In components
export default {
  methods: {
    fetchData() {
      // Using this.axios
      this.axios.get('/api/data').then(response => {
        console.log(response.data);
      });
      
      // Using this.$http
      this.$http.get('/api/data').then(response => {
        console.log(response.data);
      });
    }
  }
}

// Global access via Vue.axios
Vue.axios.get('/api/data').then(response => {
  console.log(response.data);
});

Vue 3 Options API

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

const app = createApp({});
app.use(VueAxios, axios);

// In components
export default {
  methods: {
    fetchData() {
      // Using this.axios
      this.axios.get('/api/data').then(response => {
        console.log(response.data);
      });
      
      // Using this.$http
      this.$http.get('/api/data').then(response => {
        console.log(response.data);
      });
    }
  }
}

Vue 3 Composition API

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

const app = createApp({});
app.use(VueAxios, axios);
app.provide('axios', app.config.globalProperties.axios);

// Component
import { inject } from 'vue';

export default {
  setup() {
    const axios = inject('axios');
    
    const fetchData = () => {
      axios.get('/api/data').then(response => {
        console.log(response.data);
      });
    };
    
    return { fetchData };
  }
}

Capabilities

Plugin Installation

Installs the Vue Axios plugin, registering axios instances with the Vue application.

/**
 * Vue Axios plugin installer function
 * @param app - Vue application instance (Vue 2 or Vue 3)
 * @param options - Axios instance or object with multiple axios instances
 * @returns void
 */
function VueAxios(app: App, options: AxiosStatic | Record<string, AxiosStatic>): void;

Single Instance Installation:

// Registers axios and $http on components and app
app.use(VueAxios, axios);

Multiple Instance Installation:

// Custom registration keys with different axios instances
app.use(VueAxios, {
  api: axios.create({ baseURL: '/api' }),
  cdn: axios.create({ baseURL: 'https://cdn.example.com' }),
  $http: axios  // Backward compatibility
});

// Usage in components
this.api.get('/users');
this.cdn.get('/assets/image.jpg');
this.$http.get('/legacy-endpoint');

Component Integration

The plugin automatically adds axios instances to component contexts based on Vue version.

Vue 2 Component Properties

interface Vue {
  /** Axios instance for HTTP requests */
  axios: AxiosStatic;
  /** Alias for axios instance (backward compatibility) */
  $http: AxiosStatic;
}

interface VueConstructor {
  /** Global axios instance on Vue constructor */
  axios: AxiosStatic;
}

Vue 3 Component Properties

interface ComponentCustomProperties {
  /** Axios instance for HTTP requests */
  axios: AxiosStatic;
  /** Alias for axios instance (backward compatibility) */
  $http: AxiosStatic;
}

interface App {
  /** Global axios instance on app */
  axios: AxiosStatic;
}

Configuration Options

The plugin accepts flexible configuration options for different use cases.

Single Axios Instance

// Accepts a single axios instance
VueAxios(app, axios);

This automatically creates the following registrations:

axios: The provided axios instance
$http: The same axios instance (for backward compatibility)

Multiple Axios Instances

// Accepts an object mapping registration keys to axios instances
VueAxios(app, {
  [key: string]: AxiosStatic
});

Custom registration example:

app.use(VueAxios, {
  'api': axios.create({ baseURL: '/api' }),
  'external': axios.create({ baseURL: 'https://api.external.com' }),
  'auth': axios.create({ 
    baseURL: '/auth',
    withCredentials: true 
  })
});

// Component usage
this.api.get('/users');
this.external.get('/weather');
this.auth.post('/login', credentials);

Automatic Installation Support

The plugin supports multiple module formats and automatic installation.

Module Format Support

// CommonJS export
module.exports = VueAxios;

// AMD support
define([], function () { return VueAxios; });

// Global/UMD automatic installation
// Auto-installs if window.Vue, window.axios, and Vue.use exist

Automatic Global Installation

When loaded via script tags, the plugin automatically installs itself if the following global variables exist:

window.Vue (Vue 2 only)
window.axios
Vue.use function

<!-- Automatic installation via script tags -->
<script src="vue.js"></script>
<script src="axios.js"></script>
<script src="vue-axios.js"></script>
<!-- vue-axios automatically calls Vue.use(VueAxios, axios) -->

Version Compatibility

The plugin automatically detects Vue version and applies appropriate registration strategies:

Vue 2: Registers axios instances on the Vue prototype (Vue.prototype)
Vue 3: Registers axios instances on global properties (app.config.globalProperties)

Version detection is handled internally by parsing the major version number from the app.version property (e.g., "3.2.1" → 3). If version detection fails, the plugin logs an error and exits gracefully without registration.

Types

import { AxiosStatic } from 'axios';
import { App } from 'vue';

/**
 * Vue Axios plugin function type
 * Note: The official index.d.ts in the package only declares support for single
 * AxiosStatic instances, but the implementation supports both single instances
 * and multiple instance objects as shown here.
 */
declare function VueAxios(
  app: App, 
  options: AxiosStatic | Record<string, AxiosStatic>
): void;

/**
 * Vue 2 constructor interface
 */
interface VueConstructor {
  use(plugin: any, ...options: any[]): VueConstructor;
  axios: AxiosStatic;
  prototype: any;
  version: string;
}

/**
 * Vue 3 app interface extensions
 */
interface App {
  use(plugin: any, ...options: any[]): App;
  config: {
    globalProperties: Record<string, any>;
  };
  axios: AxiosStatic;
  version: string;
  vueAxiosInstalled?: boolean;
}

Error Handling

The plugin includes built-in validation and error reporting for common configuration issues:

Invalid Configuration: Logs error if options are not axios-like objects
Unknown Vue Version: Logs error if Vue version cannot be detected
Duplicate Installation: Prevents multiple installations on the same app instance via app.vueAxiosInstalled flag

// Invalid configuration example
app.use(VueAxios, "not-an-axios-instance");
// Console: "[vue-axios] configuration is invalid, expected options are either <axios_instance> or { <registration_key>: <axios_instance> }"

// Unknown Vue version
app.use(VueAxios, axios); // on non-Vue app
// Console: "[vue-axios] unknown Vue version"

// Duplicate installation
app.use(VueAxios, axios);
app.use(VueAxios, axios); // Second call is silently ignored