How can I refresh the whole page on link visit in NuxtJS?

In Nuxt.js, pages typically do not perform a full page refresh during client-side navigation; instead, they leverage Vue.js's Single Page Application (SPA) capabilities for dynamic loading and rendering of components. However, sometimes we may need to force a complete page reload, for example, to reset the application state or apply certain updates.

To achieve a full page refresh in Nuxt.js, several methods can be employed:

1. Using Native JavaScript's location.reload()

This is the most straightforward method to force the browser to refresh the current page.

javascript
if (needsRefresh) {
  window.location.reload();
}

2. Using nuxt-link with a Key

nuxt-link is the component in Nuxt.js that replaces the <a> tag, utilizing Vue Router for client-side navigation. By adding a unique key to nuxt-link, you can force the component to re-render on each click, achieving a similar effect to a refresh.

html
<nuxt-link :to="{ path: '/your-path', query: { refresh: new Date().getTime() } }">Refresh Page</nuxt-link>

Here, by adding a time-based variable in the query parameters, each navigation is treated as distinct, triggering a page reload.

3. Modifying the Routing Mode

In the Nuxt.js configuration file nuxt.config.js, you can set the routing mode to hash, where the page reloads when the URL changes.

javascript
export default {
  router: {
    mode: 'hash'
  }
}

This method affects the URL format and may not be suitable for all applications.

Example Scenario

Suppose you have a shopping cart page where a full page refresh is needed after adding items to update the total price. You can do the following:

javascript
methods: {
  addToCart(product) {
    this.$axios.post('/api/cart', { product })
      .then(() => {
        window.location.reload(); // Refresh the page after adding to cart
      })
      .catch(err => console.error('Error adding to cart', err));
  }
}

In this example, whenever a user adds an item to the shopping cart, calling window.location.reload() forces the browser to refresh the page, ensuring the total price is up-to-date.

With these methods, you can choose the appropriate approach based on your specific requirements to achieve a full page refresh in Nuxt.js.