API Integration and Axios

npm install axios

// src/api/axios.js — Configured Axios instance
import axios from 'axios'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
})

// Request interceptor — runs before every request
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  (error) => Promise.reject(error)
)

// Response interceptor — runs after every response
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default api

// src/api/users.js
import api from './axios'

export const userApi = {
  // GET — fetch data
  getAll: () => api.get('/users'),
  getById: (id) => api.get(`/users/${id}`),
  search: (query) => api.get('/users', { params: { q: query, limit: 10 } }),

  // POST — create
  create: (userData) => api.post('/users', userData),

  // PUT — full update
  update: (id, userData) => api.put(`/users/${id}`, userData),

  // PATCH — partial update
  patch: (id, fields) => api.patch(`/users/${id}`, fields),

  // DELETE — remove
  delete: (id) => api.delete(`/users/${id}`)
}

<script setup>
import { ref, onMounted } from &#039;vue'
import axios from &#039;axios'

const users = ref([])
const loading = ref(false)
const error = ref(null)
const searchQuery = ref(&#039;')

// Composable-style API call
async function fetchUsers() {
  loading.value = true
  error.value = null
  try {
    const { data } = await axios.get(&#039;https://jsonplaceholder.typicode.com/users')
    users.value = data
  } catch (err) {
    error.value = err.response?.data?.message || err.message || &#039;Failed to load users'
  } finally {
    loading.value = false
  }
}

async function createUser(userData) {
  try {
    const { data } = await axios.post(&#039;https://jsonplaceholder.typicode.com/users', userData)
    users.value.unshift(data)  // Add to beginning of list
    return data
  } catch (err) {
    error.value = &#039;Failed to create user'
    throw err
  }
}

async function deleteUser(id) {
  try {
    await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`)
    users.value = users.value.filter(u => u.id !== id)
  } catch (err) {
    error.value = &#039;Failed to delete user'
  }
}

onMounted(fetchUsers)
</script>

<template>
  <div>
    <div v-if="loading" class="loading">⏳ Loading...</div>
    <div v-else-if="error" class="error">❌ {{ error }} <button @click="fetchUsers">Retry</button></div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} — {{ user.email }}
        <button @click="deleteUser(user.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<!-- WeatherApp.vue -->
<script setup>
import { ref } from &#039;vue'
import axios from &#039;axios'

const city = ref(&#039;London')
const weather = ref(null)
const loading = ref(false)
const error = ref(null)

// Using Open-Meteo (free, no API key needed!)
async function fetchWeather() {
  if (!city.value.trim()) return
  loading.value = true
  error.value = null
  weather.value = null

  try {
    // Step 1: Geocode city to coordinates
    const geoRes = await axios.get(&#039;https://geocoding-api.open-meteo.com/v1/search', {
      params: { name: city.value, count: 1 }
    })
    if (!geoRes.data.results?.length) throw new Error(&#039;City not found')

    const { latitude, longitude, name, country } = geoRes.data.results[0]

    // Step 2: Fetch weather
    const weatherRes = await axios.get(&#039;https://api.open-meteo.com/v1/forecast', {
      params: {
        latitude,
        longitude,
        current: &#039;temperature_2m,wind_speed_10m,weather_code,relative_humidity_2m',
        wind_speed_unit: &#039;kmh'
      }
    })

    weather.value = {
      city: name,
      country,
      ...weatherRes.data.current
    }
  } catch (err) {
    error.value = err.message || &#039;Failed to fetch weather'
  } finally {
    loading.value = false
  }
}

function getWeatherIcon(code) {
  if (code <= 1) return &#039;☀️'
  if (code <= 3) return &#039;⛅'
  if (code <= 67) return &#039;🌧️'
  if (code <= 77) return &#039;❄️'
  return &#039;⛈️'
}
</script>

<template>
  <div class="weather-app">
    <h1>🌍 Weather Forecast</h1>
    <div class="search">
      <input
        v-model="city"
        @keyup.enter="fetchWeather"
        placeholder="Enter city name..."
      />
      <button @click="fetchWeather" :disabled="loading">
        {{ loading ? &#039;⏳' : '🔍 Search' }}
      </button>
    </div>

    <div v-if="loading" class="loading">Fetching weather for {{ city }}...</div>
    <div v-else-if="error" class="error">❌ {{ error }}</div>

    <div v-else-if="weather" class="weather-card">
      <div class="city-name">{{ weather.city }}, {{ weather.country }}</div>
      <div class="weather-icon">{{ getWeatherIcon(weather.weather_code) }}</div>
      <div class="temperature">{{ Math.round(weather.temperature_2m) }}°C</div>
      <div class="details">
        <span>💧 Humidity: {{ weather.relative_humidity_2m }}%</span>
        <span>💨 Wind: {{ Math.round(weather.wind_speed_10m) }} km/h</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.weather-app { max-width: 420px; margin: 2rem auto; font-family: sans-serif; text-align: center; }
.search { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.search input { flex: 1; padding: .75rem 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; outline: none; }
.search input:focus { border-color: #6366f1; }
.search button { padding: .75rem 1.25rem; background: #6366f1; color: white; border: none; border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; }
.weather-card { background: linear-gradient(135deg, #1e3a5f, #0ea5e9); color: white; padding: 2.5rem; border-radius: 20px; }
.city-name { font-size: 1.25rem; opacity: .85; margin-bottom: .5rem; }
.weather-icon { font-size: 5rem; margin: .5rem 0; }
.temperature { font-size: 4rem; font-weight: 800; }
.details { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; opacity: .85; }
.loading { color: #64748b; }
.error { color: #ef4444; }
</style>