An URL Object Working on Both Server-Side and Client-Side in Nuxt

Hi 👋

I'm still working in the background on my high-quality developer shirts that I want to sell in the future. I'm currently working on the shop and I'm also looking for a good supplier. I'll keep you updated.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

Sometimes you need access to the current URL object in your Nuxt application. For example, you might want to get the current path or query parameters.

If you are using SSR (Server Side Rendering) your code will be executed on the server and the client. This means that you need to make sure that your code works on both the server and the client. For example, you can't use the window object on the server.

A simple workaround is to add an if statement to check if the window object is available:

This works but it's not very elegant. It would be better if we could use the same code on both the server and the client.

Luckily, Nuxt provides a helper function called useRequestURL that returns a URL object working on both the server side and client side:

Try it yourself in the following StackBlitz playground:

Until next week,