Vue 3 http provider (based on Axios)

*** Maintainers & Contributors welcome ***

Simple implementation of axios in Vue 3.x

---

Table of Contents

• Installation
• API
• Examples

Installation

npm i @vuebits/http / yarn add @vuebits/http

And install in your entry file (e.g. main.js):

import { createHttp } from '@vuebits/http';

createApp(App).use(createHttp({ /* your config here */ })).mount('#app');

API

Available functions:

• createHttp (options: HttpOptions):

interface HttpOptions {
  baseURL?: string;
}

Vue instance properties and methods:

• $http: AxiosInstance

To see full API documentation go to axios page.

Examples

GET request:

<template>
  <div>
    <h1>This is users page</h1>
    <table>
      <thead>
        <tr>
          <th>
            Avatar
          </th>
          <th>
            Last name
          </th>
          <th>
            First name
          </th>
          <th>
            Email
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="user in users"
          :key="user.id"
        >
          <td>
            <img :src="user.avatar">
          </td>
          <td>
            {{ user.first_name }}
          </td>
          <td>
            {{ user.last_name }}
          </td>
          <td>
            {{ user.email }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface User {
  avatar: string;
  email: string;
  first_name: string;
  id: number;
  last_name: string;
}

export default defineComponent({
  name: 'Users',
  data () {
    return {
      users: [] as User[]
    };
  },
  async created () {
    this.users = (await this.$http.get<User[]>('users')).data;
  }
});
</script>