Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #110 - An URL Object Working on Both Server-Side and Client-Side in Nuxt #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #110

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:

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

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:

<script setup lang="ts"> if (process.client) { console.log('Client href', window.location.href) } </script>

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:

<script setup lang="ts"> const url = useRequestURL() </script> <template> <p>URL is: {{ url }}</p> <p>Path is: {{ url.pathname }}</p> </template>

Try it yourself in the following StackBlitz playground:

โšก Open DemoQuote of the weekCurated Vue & Nuxt Content๐Ÿ“• Complete Vue Suspense guide with examples
๐Ÿ‘‰๐Ÿป This comprehensive guide goes over Vue Suspense.
๐Ÿ‘‰๐Ÿป Vue Suspense allows you to handle async components easily and provides a better user experience while components are loading.
๐Ÿ“• Preventing Duplicate API Requests Across Multiple Vue Components
๐Ÿ‘‰๐Ÿป In this article, Jason outlines the scenario, explains the challenges, and walks you through the code that helped him prevent duplicate API calls.
๐Ÿ“• Introducing Atomic Design in Vue.js
๐Ÿ‘‰๐Ÿป In this article, youโ€™ll explore how to implement Atomic Design in Vue.js with only HTML.
๐Ÿ‘‰๐Ÿป It explains the basics of Atomic Design and then demonstrate how to apply its principles in Vue.js.
๐Ÿ“• AbortController โ€” Abort ongoing calls in Vue with Axios interceptor
๐Ÿ‘‰๐Ÿป Learn how you can use Axios to abort ongoing calls in Vue.
๐Ÿ› ๏ธ Histoire
๐Ÿ‘‰๐Ÿป Histoire is a tool written in Vue to generate stories applications (similar to Storybook)
๐Ÿ‘‰๐Ÿป Powered by Vite for some extra speed
๐Ÿ› ๏ธ Headless UI
๐Ÿ‘‰๐Ÿป Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
๐Ÿ‘‰๐Ÿป Available for Vue and React.
๐Ÿ› ๏ธ Vue for Cesium
๐Ÿ‘‰๐Ÿป A Vue3 based component library of CesiumJS for 3D Geospatial Visualizations.
FunCurated Web Development Content๐Ÿ“• Front-end is harder than back-end
๐Ÿ‘‰๐Ÿป A Hacker News commenter opines that front-end development is harder than back-end development.
๐Ÿ‘‰๐Ÿป Other comments give their thoughts and opinions.
๐Ÿ“• The 11 Types Of Toxic Pull Requests (According To 4.5 Million Code Branches)
๐Ÿ‘‰๐Ÿป "After reviewing millions of PRs, we've found the 11 that are dragging down your engineering team."
๐Ÿ“• Internals of async / await in JavaScript
๐Ÿ‘‰๐Ÿป This article implements async and await in JavaScript from scratch.
๐Ÿ“• When to use never and unknown in TypeScript
๐Ÿ‘‰๐Ÿป This article does a deep dive into TypeScript types.
๐Ÿ“• A Guide to Migrating from Webpack to Vite
๐Ÿ‘‰๐Ÿป Vite can offer much faster build times and hot reloading times during development compared to Webpack.
๐Ÿ‘‰๐Ÿป But you should consider that Webpack is a more mature tool while Vite is still growing.
๐Ÿ“• Introducing freeCodeCamp Press โ€“ Free Books for Developers
๐Ÿ‘‰๐Ÿป freeCodeCamp has published dozens of full length books and handbooks.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
ยฉ 2023 All rights reserved.