Nuxt•2y ago

What is the suggested alternative to layout middlewares in Nuxt 3?

In Nuxt 2 it was possible to define middlewares on layouts, this is no longer supported with Nuxt 3. I would like to avoid .global middleware, as these would be called on all pages, even if not needed?

<script lang="ts" setup>
//
definePageMeta({
  middleware: ["auth"], // definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
})
</script>

<script lang="ts" setup>
//
definePageMeta({
  middleware: ["auth"], // definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
})
</script>

5 Replies

🇨🇭 Marko Bolliger <cannap>•2y ago

wait are you sure this is not supported in layouts?

🇨🇭 Marko Bolliger <cannap>•2y ago

look 1 second google https://stackoverflow.com/questions/73293352/nuxt-3-how-to-use-route-middleware-in-a-layout-can-i

Stack Overflow

NUXT 3: How to use route middleware in a layout? (Can I?)

I've been looking to use Nuxt middleware in a layout. But I am not sure if I even can, however, since I used it in Nuxt 2, it may be possible in Nuxt 3. The project has 2 different layouts: Public....

oemerOP•2y ago

Yes, this is definetely not possible. You can see the error page is telling, that it only works for SFC that are also a page. I found that stackoverflow search, but i did not want to use .global as stated in my original question. I don't want to call the middleware on every page. And I also don't want to nest my pages in /admin, thats why I asked here as well. I ended up using .global middleware, since I didn't found any alternative. Thanks for your help tho!

wypratama•2y ago

Can you define it in something like this?

<script lang="ts">
export default defineNuxtComponent({
  middleware: ['auth']
})
</script>

<script lang="ts">
export default defineNuxtComponent({
  middleware: ['auth']
})
</script>

it seems like the error is coming from importing the definePageMeta instead of defining the middleware it self

oemerOP•2y ago

@wypratama Sorry for my late response. And even though it throws no error, it still doesn't work. Nothing happens.
Also I am using <script lang="ts" setup> and there you cannot return export default. But I also tried it without export default and also using it without script setup notation. No success. I also tried defineComponent. It doesn't seem to be possible.

Gaming

Programming

What is the suggested alternative to layout middlewares in Nuxt 3?