Nuxt•15mo ago

Best way to run code once on nuxt ready

Hello guys! I'm wondering how to achieve a thing. Hope you can help me.
I'd like to generate a CSS variable with the user's font size configured on the browser.
I'll use it to calculate some clamp() functions based on Root font size. I can't assume it's 16px by default, so I need to run a script like this:

const HTMLDocument = document.querySelector('html');
if (!HTMLDocument) return;
return +getComputedStyle(HTMLDocument).fontSize.slice(0, -2);

const HTMLDocument = document.querySelector('html');
if (!HTMLDocument) return;
return +getComputedStyle(HTMLDocument).fontSize.slice(0, -2);

My question is: "What is the best approach to run this just once when page's loading or as soon as I have access to this browser information? Should I use a Plugin? Should I use a Hook in nuxt.config? Should I use a middleware?" It's important to run this just once... I don't need to get this info every time I change a route.

Thanks in advance for any tip!

PisandelliOP•9/23/24, 9:10 PM

I need to calculate a slope for a clamp(). But I don't want to use 16 as the root font size. I need this info coming from browser. Most people use 16px as root font size, but some people use different values. To calculate the clamp accordingly I need the number... 16 or 22 or x... I can't use 1rem because is a relative unit.
Anyway, the point is not the calc I need to do, but how to run a script only once, on the client side as soon as the app is ready, better before any css or html rendering.

PisandelliOP•9/23/24, 10:21 PM

Cool @L422Y ! I was tending to create a plugin but wondering if there was a better way. Thanks for your time and help!!