Nuxt 3: Execute function on every page load

Question

How can I execute a function in Nuxt 3 that loads API data (countries, states, some other meta data) if the user is authenticated? I want to do this on every page but API endpoints should be "pinged" only once and it should be called before the page gets rendered. Any ideas?

Answer 1

1. Set up a Pinia store to manage your data.
2. Create a middleware that checks authentication and fetches data.
3. Apply the middleware globally to run on every page and send requests only if data does not exist.
4. Access the data in your pages using the asyncData method.