Nuxt 3: How to Reload and Navigate to the Path

I had been kind of struggling just to achieve a simple solution and finally found it so it might be helpful for you and save some time.

What I wanted to achieve:

In my Nuxt application, users can log in to the app and switch between different client profiles.

So when the user switches from one client to another, I need to reload the whole app and navigate to the home page.

Tried different ways to achieve this but this one worked for me.

In Nuxt3, we can import reloadNuxtApp from “nuxt/app”:

<script setup lang="ts">
  import { reloadNuxtApp } from "nuxt/app";
  reloadNuxtApp({
    path: "/",
    ttl: 1000, // default 10000
  });
</script>

Here, the default path is “window.location.pathname”, but you can change it to the desired one; in my case, it is just a “/” which is a home route.

Make sure you adjust TTL as mentioned above. The default value is 10000 (10sec), which means, if you run this code again within 10sec, it will not reload.

There is also an optional property — “force” to enforce the reload.

Happy learning! Happy coding!