How to Implement an API in Vue.js with Axios: A Practical Guide

Vue.js is one of the most popular JavaScript frameworks for building user interfaces, and working with APIs is an essential skill for any developer using it. In this article, we’ll walk you through integrating an API into a Vue.js application using Axios.

What You’ll Need

• A basic understanding of Vue.js.
• Axios installed in your project (or install it via npm install axios).

Example API

We’ll be using the following API configuration for this guide:

const options = {
  method: 'POST',
  url: 'SANDBOX_URL/advanced-search',
  headers: {
    Authorization: 'Bearer API_KEY_HERE',
  },
  data: { company: '43286528' }
};

try {
  const { data } = await axios.request(options);
  console.log(data);
} catch (error) {
  console.error(error);
}

Now, let’s see how we can integrate this into a Vue.js application.

Step 1: Set Up Your Vue.js Project

1. Create a Vue.js project If you don’t already have a Vue project, create one using Vue CLI:

2. vue create my-app
   cd my-app

3. Install Axios Install Axios for handling HTTP requests:

4. npm install axios

Step 2: Create a Component for API Integration

1. Create a new Vue component Create a file named ApiComponent.vue in the src/components folder of your project.
2. Write the code Here’s how to implement the API request inside your Vue component:

3. <template>
     <div>
       <h1>API Integration Example</h1>
       <button @click="fetchData">Fetch Data</button>
       <div v-if="responseData">
         <h2>Response:</h2>
         <pre>{{ responseData }}</pre>
       </div>
       <div v-if="error">
         <h2>Error:</h2>
         <p>{{ error }}</p>
       </div>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
       return {
         responseData: null,
         error: null,
       };
     },
     methods: {
       async fetchData() {
         const options = {
           method: 'POST',
           url: 'SANDBOX_URL/advanced-search',
           headers: {
             Authorization: 'Bearer API_KEY_HERE',
           },
           data: { company: '43286528' },
         };
   
         try {
           const { data } = await axios.request(options);
           this.responseData = data;
         } catch (err) {
           this.error = err.message;
         }
       },
     },
   };
   </script>
   
   <style>
   /* Add your styles here */
   </style>

Step 3: Add the Component to Your App

1. Register the component in App.vue Open src/App.vue and update it:

2. <template>
     <div id="app">
       <ApiComponent />
     </div>
   </template>
   
   <script>
   import ApiComponent from './components/ApiComponent.vue';
   
   export default {
     components: {
       ApiComponent,
     },
   };
   </script>
   
   <style>
   /* Add your styles here */
   </style>

3. Run the app Start the development server using:

4. npm run serve

5. You’ll see the button “Fetch Data” in your app. Clicking it will trigger the API request, and the response will be displayed on the screen.