\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nimport BulmaDashboard from \"@/components/SampleContent/BulmaDashboard\";\n\nexport default {\n middleware: \"auth\",\n layout: \"section\",\n fetch({ store, params }) {\n store.dispatch(\"user/getUser\")\n .then(() => console.log(\"user action dispatched\"));\n },\n components: {\n BulmaDashboard\n },\n mounted() {\n console.log(\"index mounted!\");\n }\n};\n\u003C/script>\n```\n\nauth/logout\n```javascript\nasync logout(vuexContext) {\n //if token is available, destroy it, needed so no loop is created (would return unauthorized which is then catched)\n //additionaly check if token already expired, wouldn't make sense requesting logout without valid token\n if (\n vuexContext.state.token &&\n new Date() \u003C new Date(vuexContext.state.tokenExpiry)\n ) {\n await this.$axios.get(\"/auth/logout.json\");\n }\n\n vuexContext.commit(\"CLEAR\");\n Cookie.remove(\"token\");\n Cookie.remove(\"tokenExpiry\");\n Cookie.remove(\"refreshToken\");\n Cookie.remove(\"refreshTokenExpiry\");\n Cookie.remove(\"userId\");\n\n //remove axios header\n this.$axios.setHeader(\"Authorization\", false);\n\n this.$router.replace(\"/login\");\n\n return \"[AUTH] Auth data cleared, safe to redirect\";\n }\n};\n```\n\n\n\n\n### What is expected ?\n\nWhen the user is not authenticated the initAuth action shoul be called which will redirect the user if there aren't any cookies or token is expired. No fetch() / asyncData() / mounted() functions should be called. \n\n### What is actually happening?\n\nThe user sees the page for a split second, it also fires fetch and mounted(), and then gets redirected.\n\nThe flow looks like this:\n\n[MIDDLEWARE] Not authenticated, reading data from cookie...\n[AUTH] No cookie files found , redirecting...\nindex mounted!\nfetch()\n\n### Additional comments?\n\nI've seen a similar issue like this here which is now resolved: https://github.com/nuxt/nuxt.js/issues/542\nWhen redirecting directly from the middleware everything works as expected, however when dispatching an action which in turn redirects, the problem described on this site still exists.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7469\">#c7469\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2919,2922],{"name":2920,"color":2921},"pending triage","E99695",{"name":2907,"color":2908},3618,"fetch/asyncData gets fired even when middleware redirects","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3618",0.6290952,{"description":2929,"labels":2930,"number":2935,"owner":2910,"repository":2910,"state":2911,"title":2936,"updated_at":2937,"url":2938,"score":2939},"If a page has `fetch` method which invokes `redirect` immediately (e.g. rejecting users without required permissions), that page is still rendered internally for no reason. This happens in nuxt@1.0.0-rc11.\r\n\r\nThis is however not happening if the same logic is moved to the middleware. It requires a developer to create separate single-use middleware even for ad-hoc page-specific logic.\r\n\r\n## Experiment 1\r\n\r\nCreate `pages/test.vue`:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n This will crash: {{ noSuchVar }}\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n fetch ({ redirect }) {\r\n return redirect('/')\r\n },\r\n}\r\n\u003C/script>\r\n```\r\n\r\n**Result:** opening \u003Chttp://localhost:3000/test> immediately redirects to \u003Chttp://localhost:3000> but the following is printed to stderr:\r\n\r\n```\r\n[Vue warn]: Property or method \"noSuchVar\" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in\r\n the data option.\r\n\r\nfound in\r\n\r\n---> \u003CClient/pages/test.vue> at client/pages/test.vue\r\n \u003CNuxt> at .nuxt/components/nuxt.vue\r\n \u003CDefault> at client/layouts/default.vue\r\n \u003CRoot>\r\n```\r\n\r\n## Experiment 2\r\n\r\nCreate `pages/test2.vue`:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n This will not crash: {{ noSuchVar }}\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nexport default {\r\n middleware: 'test',\r\n}\r\n\u003C/script>\r\n```\r\n\r\nand `middleware/test.vue`:\r\n\r\n```js\r\nexport default function ({ redirect }) {\r\n return redirect('/')\r\n}\r\n```\r\n\r\n**Result:** opening \u003Chttp://localhost:3000/test> immediately redirects to \u003Chttp://localhost:3000> and no errors are produced.\r\n\r\n## Expected result\r\n\r\nThe two experiments behave identically (no errors are produced in either case).\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1665\">#c1665\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2931,2934],{"name":2932,"color":2933},"available soon","6de8b0",{"name":2907,"color":2908},1853,"Page is rendered even if `fetch` called `redirect`","2023-01-18T15:42:46Z","https://github.com/nuxt/nuxt/issues/1853",0.66843355,{"description":2941,"labels":2942,"number":2945,"owner":2910,"repository":2910,"state":2911,"title":2946,"updated_at":2947,"url":2948,"score":2949},"Does the middleware or fetch run first when entering into a route? It currently appears to fire asynchronously. \r\n\r\nScenario\r\n1. I have a page route that uses fetch to populate a store. \r\n2. I have a middleware that uses store state to determine access to the page route\r\n\r\nResult currently is that the store state is not populated in time for the middleware to work. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c346\">#c346\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2943,2944],{"name":2904,"color":2905},{"name":2907,"color":2908},404,"nuxt fetch and middleware life cycle","2023-01-18T15:38:50Z","https://github.com/nuxt/nuxt/issues/404",0.6728238,{"description":2951,"labels":2952,"number":2954,"owner":2910,"repository":2910,"state":2911,"title":2955,"updated_at":2956,"url":2957,"score":2958},"Hi,\r\n\r\nIm using middleware that checks auth. If its empty i will redirect user to login page with a message.\r\n\r\n```\r\nexport default function ({ store, redirect }) {\r\n if (!store.state.authUser) {\r\n store.commit('SET_NOTI', {\r\n type: 'warn',\r\n title: 'Login',\r\n message: 'You need to log in'\r\n })\r\n console.log(store.state.notiAfterRoute)\r\n redirect('/login')\r\n }\r\n}\r\n```\r\n\r\nBut after redirect by store is null ( the value it should be on start) . If i console log it before redirect. it returns a object like it should. \r\n\r\nI have tryed to solve this for couple of hours now. I tryed to use dispatch, promises everything.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1667\">#c1667\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2953],{"name":2907,"color":2908},1855,"Store is empty after redirect.","2023-01-18T15:42:45Z","https://github.com/nuxt/nuxt/issues/1855",0.6830067,{"description":2960,"labels":2961,"number":2964,"owner":2910,"repository":2910,"state":2911,"title":2965,"updated_at":2925,"url":2966,"score":2967},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://codepen.io/](https://codepen.io/)\n\n### Steps to reproduce\n\n* Create a middleware (e.g. middleware/auth-sitemap.js)\n* Assign the middleware to route\n**middleware/auth-sitemap.js**\n```\nexport default ({ store }) => {\n if (process.server) return\n\n if (!store.state.user.login) {\n console.log('no login!');\n }\n}\n```\n\n**nuxt.config.js**\n```\nmodule.exports = {\n router: {\n middleware: ['auth-sitemap']\n }\n}\n```\n* Run dev script\n* Visit http://localhost:3000\n\n### What is expected ?\n\nWhen the application is visited for first time by clicking an external link or writing down the url manually, the router middleware should work.\n\n### What is actually happening?\n\nRouter middleware works only when the route is changed by a nuxt-link or router-link component. Visiting an url directly does not trigger the middleware.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7708\">#c7708\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2962,2963],{"name":2920,"color":2921},{"name":2907,"color":2908},3864,"Router middleware does not fire with first render","https://github.com/nuxt/nuxt/issues/3864",0.68323517,{"description":2969,"labels":2970,"number":2964,"owner":2910,"repository":2971,"state":2911,"title":2972,"updated_at":2973,"url":2974,"score":2967},"The Tailwind site recommends installing tailwind in a Nuxt project as tailwind/vite, but this causes a conflict with nuxt/ui that I cant seem to resolve, although I have tried many tweaks. Is there a way to make them work together, or do you plan to make this work in the near future?",[],"ui","Tailwind/vite Conflicts","2025-04-13T07:55:44Z","https://github.com/nuxt/ui/issues/3864",{"description":2976,"labels":2977,"number":2987,"owner":2910,"repository":2910,"state":2911,"title":2988,"updated_at":2989,"url":2990,"score":2991},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.0`\r\n- Nuxt Version: `3.0.0-rc.13`\r\n- Nitro Version: `0.6.1`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `vite`, `modules`, `i18n`\r\n- Runtime Modules: `@pinia/nuxt@0.4.3`, `@nuxtjs/i18n@8.0.0-beta.1`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n```js\r\n// middleware/auth.global.js\r\nexport default defineNuxtRouteMiddleware(async (to)=> {\r\n if (process.client) return\r\n\r\n const app = useNuxtApp()\r\n const event = app.ssrContext.event\r\n const accessToken = getCookie(event, 'accessToken')\r\n \r\n // Authenticate if accessToken exists\r\n // ...\r\n\r\n const { isLoggedIn } = useUserStore()\r\n const publicPaths = [\r\n //.. some public paths not needing authentication\r\n ]\r\n if (!publicPaths.includes(to.path) && !isLoggedIn) {\r\n return navigateTo('/login')\r\n } else if (publicPaths.includes(to.path) && isLoggedIn) {\r\n return navigateTo('/')\r\n } \r\n})\r\n\r\n```\r\n```js\r\n// pages/index.vue\r\nexport default defineNuxtComponent({\r\n async setup() {\r\n const {data: someData} = await useAsyncData(()=> {\r\n return $fetch('/api/some_api_auth_required', {\r\n method: 'get',\r\n headers: useRequestHeaders(['cookie'])\r\n })\r\n })\r\n return {\r\n someData\r\n }\r\n }\r\n})\r\n```\n\n### Describe the bug\n\n\r\nI'm seeing that setup block data fetching is being called before router middleware is resolved.\r\n\r\nWhen I visit '/' without authentication, the page redirects to '/login' like expected.\r\n\r\nBut, on nuxt server console, I'll see that `'/api/some_api_auth_required'` was called and \r\nfailed because accesstoken doesnt exist (not authenticated).\r\n\r\nIs this normal behavior? If so, how w\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2978,2981,2984],{"name":2979,"color":2980},"3.x","29bc7f",{"name":2982,"color":2983},"bug","d73a4a",{"name":2985,"color":2986},"❗ p4-important","D93F0B",15407,"Component setup runs before router middleware is resolved","2023-01-23T11:18:35Z","https://github.com/nuxt/nuxt/issues/15407",0.68612534,{"labels":2993,"number":2996,"owner":2910,"repository":2910,"state":2911,"title":2997,"updated_at":2998,"url":2999,"score":3000},[2994,2995],{"name":2920,"color":2921},{"name":2907,"color":2908},8009,"middleware redirect - params discarded","2023-01-22T15:36:08Z","https://github.com/nuxt/nuxt/issues/8009",0.686361,{"labels":3002,"number":3005,"owner":2910,"repository":2910,"state":2911,"title":2965,"updated_at":2925,"url":3006,"score":3007},[3003,3004],{"name":2920,"color":2921},{"name":2907,"color":2908},3865,"https://github.com/nuxt/nuxt/issues/3865",0.6864153,["Reactive",3009],{},["Set"],["ShallowReactive",3012],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgaEXzLaX7SeuiDvpF1f2jNbmY23I9qYMWy9EVNCTcAc":-1},"/nuxt/ui/2665"]