Nuxt•2w ago

defineNuxtRouteMiddleware not working

File is in middleware/nuxtRouteMiddleware.ts as docs imply.

export default defineNuxtRouteMiddleware(async (to) => {
  console.log("Middleware running"); // Nothing is logged
});

export default defineNuxtRouteMiddleware(async (to) => {
  console.log("Middleware running"); // Nothing is logged
});

This seems like a super simple use case, yet I can't even get it to console log?

6 Replies

kapa.ai•2w ago

Hi @Zyme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it seems that your middleware implementation is correct, but there might be a few reasons why it's not working as expected. Let's go through some potential issues and solutions: 1. Middleware Registration: Make sure your middleware file is properly named and placed in the correct directory. According to the Nuxt documentation on middleware, middleware files should be placed in the middleware/ directory at the root of your project. 2. Middleware Naming: If your file is named nuxtRouteMiddleware.ts, it should be automatically loaded. However, you might want to try renaming it to something more specific, like auth.ts or logger.ts, to ensure it's not conflicting with any internal Nuxt naming conventions. 3. Applying the Middleware: If you want this middleware to run on specific pages, you need to explicitly apply it using definePageMeta. For example:

   <script setup>
   definePageMeta({
     middleware: ['nuxt-route-middleware']
   })
   </script>

   <script setup>
   definePageMeta({
     middleware: ['nuxt-route-middleware']
   })
   </script>

Note that the middleware name is normalized to kebab-case, so nuxtRouteMiddleware becomes nuxt-route-middleware. 4. Global Middleware: If you want this middleware to run on every route, you should rename your file to include the .global suffix, for example: nuxtRouteMiddleware.global.ts. 5. Checking Server-Side Execution: Remember that middleware runs on both server and client sides. If you're not seeing the console log, it might be because it's running on the server. Try modifying your middleware to check for the client-side environment:

   export default defineNuxtRouteMiddleware(async (to) => {
     if (process.client) {
       console.log("Middleware running on client");
     } else {
       console.log("Middleware running on server");
     }
   });

   export default defineNuxtRouteMiddleware(async (to) => {
     if (process.client) {
       console.log("Middleware running on client");
     } else {
       console.log("Middleware running on server");
     }
   });

6. Returning a Value: According to the Nuxt documentation on middleware usage, if you don't want to block navigation, you should either return nothing or just return. If you've checked all these points and the middleware is still not working, there might be an issue with your Nuxt configuration or setup. In that case, you might want to check your nuxt.config.ts file for any conflicting settings or try creating a minimal reproduction of the issue to isolate the problem. If the problem persists, you may want to consult the Nuxt GitHub issues to see if there are any known bugs or open a new issue with a detailed description of your setup and the problem you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@105676519669538816> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ZymeOP•2w ago

Should middleware directory be in the same directory as package.json or in src? @kapa.ai

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Zyme, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

ZymeOP•2w ago

Nope... I'm running into so many bugs with nuxt it's not even funny It's called 00.nuxtRouteMiddleware.global.ts now No other registrations made Guess I'll create a new repo... I have srcDir: "src", the middleware needs to be in the src dir

Cue•2w ago

Not a bug then 👀

Gaming

Programming

defineNuxtRouteMiddleware not working

Did you find this page helpful?