Weekly Vue News #110 - An URL Object Working on Both Server-Side and Client-Side in Nuxt

Weekly Vue News #110 - An URL Object Working on Both Server-Side and Client-Side in Nuxt

九月 11, 2023

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:

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

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:

App.vue

            1 <script setup lang="ts">
              2 if (process.client) {
              3   console.log('Client href', window.location.href)
              4 }
              5 </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:

App.vue

            1 <script setup lang="ts">
              2 const url = useRequestURL()
              3 </script>
              4 
              5 <template>
              6   <p>URL is: {{ url }}</p>
              7   <p>Path is: {{ url.pathname }}</p>
              8 </template>

Try it yourself in the following StackBlitz playground:

Quote of the week

Quote of the week

Curated 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.

beginnersoftwaredeveloper.com

📕 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.

Fun

Developer Lifecycle

Curated 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.

news.ycombinator.com

📕 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."

devinterrupted.substack.com

📕 Internals of async / await in JavaScript

👉🏻 This article implements async and await in JavaScript from scratch.

akashhamirwasia.com

📕 When to use never and unknown in TypeScript

👉🏻 This article does a deep dive into TypeScript types.

blog.logrocket.com

📕 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.

www.sitepoint.com

📕 Introducing freeCodeCamp Press – Free Books for Developers

👉🏻 freeCodeCamp has published dozens of full length books and handbooks.

www.freecodecamp.org

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany

评论