ExilienDev
Strange Behavior in dev mode , works in production serving build mode
i am using axios for fetching api calls for example
plugins/axios.ts
import { defineNuxtPlugin, useRuntimeConfig } from "#app";
import axios from "axios";
import type { AxiosInstance } from "axios";
export default defineNuxtPlugin(nuxtApp => {
const config = useRuntimeConfig();
const baseURL = config.public.apiBase as string;
// Create Axios Instance
const api: AxiosInstance = axios.create({
baseURL,
headers: {
"Content-Type": "application/json",
},
withCredentials: true, // Ensures cookies/session support
});
// Add Response Interceptors
api.interceptors.response.use(
response => response,
error => {
return Promise.reject(error);
}
);
// Provide Axios Globally
nuxtApp.provide("axios", api);
});
and then i am calling it in my pages in below format
import { useNuxtApp, useSeoMeta, definePageMeta } from "#imports";
const nuxtApp = useNuxtApp();
const $axios = nuxtApp.$axios;
try {
loading.value = true;
const response = await $axios.get(
/categories?page=${page.value}&limit=${perPage.value});
records.value = response.data.records;
docs.value = response.data.data as Category[];
} catch (error) {
} finally {
loading.value = false;
}
};5 replies