I have a Nuxt3 app, and I am needing to persist any query variables across all internal instances of .
An example would be if a user were to arrive from a Google ad, several query variables would be appended to the URL. However once I start clicking around on internal buttons, those query variables are lost.
I was looking into global middleware that would look for from.query
, and if that exists, set that to to.query
, however it doesn't appear to run when clicking on any (I only see console logs on page refresh).
export default defineNuxtRouteMiddleware((to, from) => {
console.log({ from });
console.log({ to }); <-- these don't run across pages
if (from.query) {
to.query = from.query;
}
});
I suppose one way would be to manually alter each and every nuxt-link within the application to look for query variables and append those to the href, however there are a ton of buttons and would require a lot of code duplication.
What's the best way to persist these variables?