\n```\n\nI tried to check `this.$refs.customCalendar` if I could find any exposed method, but got nothing.\n\nDo you know how and if this is feasible ?",[2014,2017],{"name":2015,"color":2016},"question","d876e3",{"name":2018,"color":2019},"v3","49DCB8",3764,"ui","How to control Calendar outside the component","2025-04-01T13:02:51Z","https://github.com/nuxt/ui/issues/3764",0.7397423,{"description":2027,"labels":2028,"number":2035,"owner":1991,"repository":1991,"state":2036,"title":2037,"updated_at":2038,"url":2039,"score":2040},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.16.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@9.5.1\r\n- Builder: -\r\n- User Config: devtools, ssr, nitro, app, modules, vite, css, elementPlus, plugins\r\n- Runtime Modules: @element-plus/nuxt@1.0.9, @pinia/nuxt@0.4.11\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nexport const BASE_URL = process.env.BASE_URL;\r\nimport { getToken, delToken } from \"#imports\";\r\n\r\nconst request = () => {\r\n\r\n const http = async (url, method, data = null, params = {}, options = {}) => {\r\n const token = getToken();\r\n const app = useNuxtApp()\r\n const loginInvalid = () => {\r\n app.runWithContext(() => {\r\n navigateTo('/login', { replace: true })\r\n })\r\n }\r\n const preOptions = {\r\n baseURL: BASE_URL,\r\n method: method,\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n 'Content-Type': method !== 'get' ? 'application/json' : undefined,\r\n },\r\n body: method !== 'get' ? JSON.stringify(data) : undefined,\r\n params: params,\r\n ...options,\r\n };\r\n\r\n\r\n const { data: resData, error, response } = await useFetch(url, {\r\n ...preOptions,\r\n onRequest({ request, options }) {\r\n // 请求前的处理\r\n },\r\n onRequestError({ request, options, error }) {\r\n // 处理请求错误\r\n },\r\n onResponse({ request, response, options }) {\r\n // 处理响应数据\r\n if (response.status === 401) {\r\n loginInvalid()\r\n }\r\n },\r\n onResponseError({ request, response, options }) {\r\n // 处理响应错误\r\n },\r\n });\r\n\r\n\r\n return resData.value;\r\n\r\n\r\n\r\n };\r\n\r\n const get = (url, params = {}, options = {}) => {\r\n return http(url, 'get', null, params, options);\r\n };\r\n\r\n const post = (url, data, params = {}, options = {}) => {\r\n return http(url, 'post', data, params, options);\r\n };\r\n\r\n const put = (url, data, params = {}, options = {}) => {\r\n return http(url, 'put', data, params, options);\r\n };\r\n\r\n const del = (url, data, params = {}, options = {}) => {\r\n return http(url, 'delete', data, params, options);\r\n };\r\n\r\n return {\r\n get,\r\n post,\r\n put,\r\n delete: del\r\n };\r\n};\r\n\r\nexport default request();\r\n\n\n### Describe the bug\n\nWhen usefetch carries the token request interface from cookies, if the returned status code is 401, I called loginInvalid(), but navigateTo did not take effect\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2029,2032],{"name":2030,"color":2031},"3.x","29bc7f",{"name":2033,"color":2034},"pending triage","E99695",27509,"closed","navigateTo doesn't work in usefetch ","2024-06-10T19:37:18Z","https://github.com/nuxt/nuxt/issues/27509",0.724688,{"description":2042,"labels":2043,"number":2049,"owner":1991,"repository":1991,"state":2036,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### Discussed in https://github.com/nuxt/nuxt/discussions/27301\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **theathleticnerd** May 22, 2024\u003C/sup>\r\nI'm trying to navigate the app to a path in my $fetch wrapper plugin. The url to be redirected to is being sent by the API.\r\nIf response._data.redirect is true, then it should redirect to response._data.redirect_url_path. \r\nThe code below doesn't work on the initial render (while directly going to the particular url), but it does work after the app loads and the user navigates through the app to the particular url.\r\n\r\nThis is payload in case of a page that should be redirected:\r\n```javascript\r\n{\r\n \"redirect\":true,\r\n \"redirect_url_path\":\"/xyz/def\",\r\n}\r\n``` \r\n\r\n\r\nThis is the code of the $fetch wrapper.\r\n```typescript\r\n// plugins/customFetch.ts\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n const config = useRuntimeConfig();\r\n const $customFetch = $fetch.create({\r\n baseURL: config.public.baseURL,\r\n async onRequest({ request, options, error }) {\r\n options.headers = {\r\n \"X-PUBLIC-URL\": `https://www.abcd.com${request}`,\r\n };\r\n },\r\n async onResponse({ response }) {\r\n if (response._data.redirect) {\r\n await navigateTo(response._data.redirect_url_path);\r\n }\r\n },\r\n });\r\n // Expose to useNuxtApp().$customFetch\r\n return {\r\n provide: {\r\n customFetch: $customFetch,\r\n },\r\n };\r\n});\r\n``` \r\nThis is the code of the the useFetch wrapper composable\r\n```typescript\r\n// composables/serverFetch.ts\r\nimport type { UseFetchOptions } from \"nuxt/app\";\r\nexport function $serverFetch\u003CT>(\r\n url: string | (() => string),\r\n options: UseFetchOptions\u003CT> = {},\r\n) {\r\n return useFetch(url, {\r\n ...options,\r\n $fetch: useNuxtApp().$customFetch,\r\n });\r\n}\r\n``` \r\nI have tried using nuxtApp.runWithContext and callWithNuxt but it is still not working.\r\nI would greatly appreciate your help.\r\nThank you.\u003C/div>",[2044,2045,2046],{"name":2030,"color":2031},{"name":2033,"color":2034},{"name":2047,"color":2048},"needs reproduction","FBCA04",27335,"navigateTo not working inside defineNuxtPlugin on initial render","2024-05-26T15:21:29Z","https://github.com/nuxt/nuxt/issues/27335",0.72731376,{"description":2055,"labels":2056,"number":2058,"owner":1991,"repository":2021,"state":2036,"title":2059,"updated_at":2060,"url":2061,"score":2062},"### Description\n\nHeya. Is there a way to open a modal, while passing props and keep their reactivity? \r\n```ts\r\nconst localModalValue = ref(false);\r\nconst isLoading = ref(false);\r\n\r\nuseModal().open(MyModal, {\r\n\tmodelValue: localModalValue,\r\n\tisLoading: isLoading\r\n});\r\n```",[2057],{"name":2015,"color":2016},2274,"Reactive props with programmatic modals","2025-03-28T21:04:57Z","https://github.com/nuxt/ui/issues/2274",0.73219,{"description":2064,"labels":2065,"number":2068,"owner":1991,"repository":1991,"state":2036,"title":2069,"updated_at":2070,"url":2071,"score":2072},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `css`, `vite`, `typescript`, `modules`, `unocss`\r\n- Runtime Modules: `@unocss/nuxt@^0.44.7`, `@vueuse/nuxt@9.1.1`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/s/nuxt-3-navigateto-with-usefetch-15ihel\n\n### Describe the bug\n\nTo intercept every 401 error I receive from my API, I created a wrapper method of `useFetch` : \r\n\r\n```ts\r\nexport function useApi(request) {\r\n return useFetch(request, {\r\n async onResponseError(ctx) {\r\n if (ctx.response.status === 401) {\r\n await navigateTo(\"/login\", { replace: true, redirectCode: 401 });\r\n }\r\n }\r\n });\r\n}\r\n```\r\n\r\nBut somehow, it only works if I don't have any plugins declared.\r\nIf you comment every line of [this file](https://codesandbox.io/s/nuxt-3-navigateto-with-usefetch-15ihel?file=/plugins/guilty.ts), the redirection works well, but as long as the `defineNuxtPlugin` function is called, the redirection does not work. Why ?\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2066,2067],{"name":2030,"color":2031},{"name":2033,"color":2034},14771,"`navigateTo` has no effect when a plugin is declared","2023-08-08T12:27:55Z","https://github.com/nuxt/nuxt/issues/14771",0.73570234,{"description":2074,"labels":2075,"number":2079,"owner":1991,"repository":1991,"state":2036,"title":2080,"updated_at":2081,"url":2082,"score":2083},"I created an ExtendRouter like this: \r\n`routes.push({\r\n name: 'ershoufangDetail',\r\n path: '/ershoufang/:id?',\r\n component: resolve(__dirname,'pages/ershoufang/_id.vue'),\r\n \r\n }),\r\n routes.push({\r\n name: 'ershoufanglist',\r\n path: '/ershoufang/:yama/:hi?/:woqu?',\r\n component: resolve(__dirname,'pages/ershoufang/index.vue'),\r\n // alias: '/ershoufang/pg1'\r\n })\r\n`\r\nI use middleware in _id.vue page, middleware's code:\r\n`\r\nexport default function ({route,redirect}) {\r\n let haha = route.params.id\r\n console.log(haha)\r\n if(!parseInt(haha)){\r\n redirect({name: \"ershoufanglist\",params:{yama:'esf'}}) \r\n }\r\n}\r\n`\r\nbut input url like '/ershoufang/pg1',it also into _id.vue page . i want url like '/ershoufang/pg1' into index page . how to deal with it\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7721\">#c7721\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2076],{"name":2077,"color":2078},"2.x","d4c5f9",3876,"Redirect function had a Problem","2023-01-18T16:26:42Z","https://github.com/nuxt/nuxt/issues/3876",0.74033785,{"description":2085,"labels":2086,"number":2089,"owner":1991,"repository":1991,"state":2036,"title":2090,"updated_at":2091,"url":2092,"score":2093},"### Environment\n\nsystem:Window\r\ndependencies:{\r\n \"nuxt\": \"^3.6.5\",\r\n \"pinia\": \"^2.1.4\",\r\n}\n\n### Reproduction\n\nhttps://github.com/HW-maintenance/HW_maintenance_web.git\n\n### Describe the bug\n\nI have a problem when i send http request\r\n\r\nI need to call a third-party interface, and when the third-party token becomes invalid, I need to jump to the login page\r\nI hope to write the logic as a common method, but nuxt does not expose the route object\r\n\r\nI thought about posting a new feature pr, but before doing that, I'd like to be able to discuss it as an issue\n\n### Additional context\n\n### the Generic http request method\r\n\r\n```utils\\HttpsUtils.ts\r\nimport type { WatchSource } from 'nuxt/dist/app/compat/capi'\r\nimport type { KeysOf } from 'nuxt/dist/app/composables/asyncData'\r\nimport type { Method } from 'types/commonModel'\r\nimport type { HttpConstructor } from 'types/commonModel/http'\r\n\r\nclass HttpsUtils\u003CDataT> {\r\n key: string | undefined\r\n params: URLSearchParams | undefined\r\n lazy: boolean | undefined\r\n immediate: boolean | undefined\r\n pick: KeysOf\u003CDataT> | undefined\r\n watch: WatchSource[] | undefined\r\n baseURL: string | undefined = ''\r\n header: HeadersInit | undefined = {}\r\n\r\n constructor({ key, lazy, immediate, pick, watch, baseUrlFlag, defaultFun }: HttpConstructor\u003CDataT>) {\r\n const runtimeConfig = useRuntimeConfig()\r\n this.key = key\r\n this.lazy = lazy\r\n this.immediate = immediate\r\n this.pick = pick as KeysOf\u003CDataT>\r\n this.watch = watch\r\n this.baseURL = runtimeConfig.public[baseUrlFlag] as string | undefined\r\n defaultFun && (this._default = defaultFun)\r\n }\r\n\r\n _default = (): DataT => {\r\n return {} as DataT\r\n }\r\n\r\n transform = (input: DataT): DataT => {\r\n return input?.data ? input?.data : input\r\n }\r\n\r\n _onRequest = () => { }\r\n _onRequestError = () => { }\r\n _onResponse = () => { }\r\n _onResponseError = () => { }\r\n\r\n requestData = async (url: string, method: Method, param: { body?: any; params?: any }) => {\r\n const res = await useFetch(url, {\r\n method,\r\n server: false,\r\n headers: this.header,\r\n baseURL: this.baseURL,\r\n params: param?.params,\r\n body: param?.body,\r\n lazy: this.lazy,\r\n immediate: this.immediate,\r\n pick: this.pick,\r\n watch: this.watch,\r\n default: this._default,\r\n transform: this.transform,\r\n onRequest: ({ request, options }) => {\r\n // 设置请求头\r\n options.headers && ((options.headers as any).Authorization = bearerStore().token)\r\n },\r\n onRequestError: ({ request, options, error }) => {\r\n // 处理请求错误\r\n },\r\n onResponse: ({ request, response, options }) => {\r\n // 处理响应数据\r\n if (response._data.code === 500) {\r\n ElMessage.error(response._data.msg)\r\n bearerStore().token = null\r\n }\r\n },\r\n onResponseError: ({ request, response, options }) => {\r\n // 处理响应错误\r\n ElMessage.error('网络错误')\r\n },\r\n })\r\n return res\r\n }\r\n}\r\n\r\nexport default HttpsUtils\r\n\r\n```\n\n### Logs\n\n_No response_",[2087,2088],{"name":2030,"color":2031},{"name":2033,"color":2034},22604,"How to use the route object in the ts file","2023-08-14T08:35:32Z","https://github.com/nuxt/nuxt/issues/22604",0.74077606,{"description":2095,"labels":2096,"number":2100,"owner":1991,"repository":1991,"state":2036,"title":2101,"updated_at":2102,"url":2103,"score":2104},"### Environment\n\nNuxt 3.12.3 with Nitro 2.9.7 \n\n### Reproduction\n\nsee Describe\n\n### Describe the bug\n\nthis is offical example,But it didn't work\r\nhttps://nuxt.com/docs/guide/recipes/custom-usefetch\r\n\r\nthis is plugins,to injecct nuxt\r\n```\r\nexport default defineNuxtPlugin(() => {\r\n const router=useRouter()\r\n const api = $fetch.create({\r\n baseURL: 'http://127.0.0.1:4523/m1/4632367-4282747-default',\r\n async onResponseError({response}) {\r\n if (response.status === 401) {\r\n console.log(\"yes, is runing here,but navigateTo doesn't work\")\r\n await navigateTo('/login', {\r\n redirectCode: 302,\r\n })\r\n }\r\n }\r\n })\r\n\r\n // Expose to useNuxtApp().$api\r\n return {\r\n provide: {\r\n api\r\n }\r\n }\r\n})\r\n```\r\n\r\nThe page does not change to login.vue when my http status is 401, navigateTo doesn't work\r\nI'm pretty sure this is the official case\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nlet path=\"/user/1\"\r\nconst { $api } = useNuxtApp()\r\nconst { data: modules } = await useAsyncData(path, () => $api(path))\r\n\u003C/script>\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2097],{"name":2098,"color":2099},"documentation","5319e7",27991,"navigateTo in $fetch onResponseError is doesn't work","2024-12-11T19:42:02Z","https://github.com/nuxt/nuxt/issues/27991",0.7427209,["Reactive",2106],{},["Set"],["ShallowReactive",2109],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"dnr9Mqv60SSyCfWatw-P4hYdL2tgn-RyY9UsBXMbEGk":-1},"/nuxt/nuxt.com/991"]