I’m migrating a Nuxt 2 application to Nuxt 3 (Vue2 to Vue3 as well) and I used to use Axios library in my old application but now Vue 3 has its own internal fetch to make HTTP requests so Axios library for Nuxt 3 is not supported anymore. I followed the documentation on how to create a custom fetch function and it’s working fine but I want to add a wrapper around it to make it work in a similar way as it used to with Axios. Currently I’m making my requests like this:

I need to apply an intersection observer from VueUse https://vueuse.org/core/useIntersectionObserver/#directive-usage to multiple elements. Instead of creating individual refs for each element, which is becoming cumbersome with over 10 elements in every component, I decided to use a directive. However, I need to create different states as well, because if I intersect one element, the isVisible sets to true and ‘fade-in’ class will apply to all of the elements. I need the class to apply only when I intersect a particular element. Is there any better way to make a reusable composable, so that I can pass options like rootMargin and so that I don’t need to create a separate ref and a state for each element?

I’m migrating a large application from Nuxt 2 to Nuxt 3 and I decided to create a fresh Nuxt 3 application and move code from my previous version to this one but I encountered a problem in my nuxt.config.js file when adding my old middleware array in the configuration. Here’s what it looks like:

I have a /profile page that includes common elements like sidebar, which I handle with a profile layout. The /profile page also has a sub-page at /profile/favorite. I want to use both the default layout (which includes a header and a footer) and the profile layout (which includes the sidebar and other common parts) at the same time for both /profile and /profile/favorite.

I have set up a default layout that includes a header and footer. This layout works fine for all of my pages since they are inside the pages directory and because I have a <NuxtPage/> wrapped in <NuxtLayout/> in app.vue.

I am facing an issue with route transitions when conditionally disabling layouts on specific pages. I have a <NuxtPage /> in app.vue wrapped in default <NuxtLayout />, which contains a header and a footer. I don’t need this layout on the ‘About’ page, so what I tried to do disable it there – definePageMeta({ layout: false });. The problem is that when if I use a transition and disable a layout on the ‘About’ page, now when I visit this page, the transition disappears. Also, I tried adding a layoutTransition in nuxt.config.ts, but I couldn’t make it work having <NuxtLayout /> in app.vue.

I’m building a nuxt module, and want to set loadingTemplate within this module.

I’m building a nuxt module, and want to set loadingTemplate within this module.