Vue Example

Overview

This example demonstrates how to integrate ApiSorcery with Vue projects. Vue is a progressive JavaScript framework for building user interfaces, and with TypeScript support, it provides an excellent developer experience with the Composition API and reactive state management.

Features

• Type safety: Full TypeScript support with generated interfaces and types
• Composition API: Modern Vue patterns with reactive state management
• Axios integration: Built-in support for Axios HTTP client with interceptors
• IntelliSense support: Full IDE support with auto-completion and type checking
• Tree shaking: Optimized bundle size with ES modules support

Quick Setup

1. Install ApiSorcery

npm install -g autoapi

2. Initialize Configuration

autoapi init -l ts

This creates a .autoapirc.json configuration file:

{
  "application": {
    "language": "ts",
    "outputDir": "./src/api/auto"
  },
  "services": [
    {
      "code": "demo",
      "token": "72735b33815c4e5c9c2a924a8f4907ef",
      "version": 3,
      "enabled": true,
      "source": "https://your-api.com/swagger.json"
    }
  ]
}

3. Install Dependencies

npm install axios
npm install -D @types/node

4. Generate API Client

autoapi generate

5. Use in Vue

import { ref, onMounted } from 'vue';
import * as ApiUser from '@/apis/auto/demo/ApiUser';

export default {
  setup() {
    const users = ref([]);
    const loading = ref(false);

    const fetchUsers = async () => {
      loading.value = true;
      try {
        const res = await ApiUser.getUserPaged({
          pagination: {
            page: 1,
            limit: 10,
          },
        });
        users.value = res.results || [];
      } catch (error) {
        console.error('Failed to fetch users:', error);
      } finally {
        loading.value = false;
      }
    };

    onMounted(fetchUsers);

    return { users, loading, fetchUsers };
  }
};

Vue Integration Patterns

Composition API with Composables

// composables/useUsers.ts
import { ref, onMounted } from 'vue';
import { ApiMain } from '@/api/auto/main/api';

export function useUsers() {
  const users = ref<User[]>([]);
  const loading = ref(false);
  const error = ref<Error | null>(null);
  const apiMain = new ApiMain();

  const fetchUsers = async () => {
    loading.value = true;
    error.value = null;
    try {
      const response = await apiMain.getUsers();
      users.value = response.data || [];
    } catch (err) {
      error.value = err as Error;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchUsers);

  return { users, loading, error, refetch: fetchUsers };
}

Using in Vue Component

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <button @click="refetch">Refresh</button>
  </div>
</template>

<script setup lang="ts">
import { useUsers } from '@/composables/useUsers';

const { users, loading, error, refetch } = useUsers();
</script>

Options API Support

<script lang="ts">
import { defineComponent } from 'vue';
import { ApiMain } from '@/api/auto/main/api';

export default defineComponent({
  data() {
    return {
      users: [] as User[],
      loading: false,
      apiMain: new ApiMain()
    };
  },
  async mounted() {
    await this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      this.loading = true;
      try {
        const response = await this.apiMain.getUsers();
        this.users = response.data || [];
      } finally {
        this.loading = false;
      }
    }
  }
});
</script>

Best Practices

1. Type Definitions: Leverage generated TypeScript interfaces for better type safety
2. Composables: Create reusable composables for common API operations
3. Error Handling: Implement proper error handling with Vue's error handling mechanisms
4. Request Interceptors: Use Axios interceptors for authentication and request/response transformation
5. Environment Configuration: Use different API endpoints for development, staging, and production
6. Code Splitting: Implement lazy loading for API modules and routes to optimize bundle size
7. Reactive State: Utilize Vue's reactivity system for efficient state management