Strange Behavior in dev mode , works in production serving build mode
For Admin Layout the routes from sidebar are getting changed , but the content is not getting changed in development environment. but when i am creating build and serving it local everything works there, even when i am deploying code to vercel production server it works there, but this issue is occuring only in my local development mode.....
this project is in nuxt3
this project is in nuxt3
3 Replies
Hi @ExilienDev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This issue appears to be related to a known problem in Nuxt 3 development mode. Based on the information provided in the knowledge sources, I can offer some insights and potential solutions:
1. The behavior you're experiencing is similar to an issue reported in this GitHub issue. In development mode, the content doesn't update when changing routes, but it works correctly in production.
2. This problem might be related to how Nuxt handles payload caching and updates in development mode. The issue seems to affect
useFetch and payload updates.
3. A potential workaround, as suggested in the GitHub issue, is to use unique keys for each useFetch call. However, this might lead to data duplication.
4. Another approach is to use $fetch instead of useFetch for routes that you can prerender.
5. It's worth noting that this behavior is likely a bug or unintended behavior in Nuxt 3's development mode, as it works correctly in production.
To troubleshoot and potentially resolve this issue:
1. Ensure you're using the latest version of Nuxt 3.
2. Try clearing your browser cache and restarting the development server.
3. If possible, test with a minimal reproduction of your setup to isolate the issue.
4. Consider reporting this behavior to the Nuxt GitHub repository if it persists, as it may be a bug that needs addressing.
Remember that development mode behavior can sometimes differ from production, especially when it comes to caching and hot module reloading. If the issue only occurs in development and your production build works as expected, you might need to rely on the production build for accurate testing of route changes and content updates.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1248163022631997485> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
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;
}
};