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

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:
App.vue
            1<script setup lang="ts">
  
            2if (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">
  
            2const 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
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.
medium.com
📕 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.
medium.com
📕 AbortController — Abort ongoing calls in Vue with Axios interceptor
👉🏻 Learn how you can use Axios to abort ongoing calls in Vue.
medium.com
🛠️ Histoire
👉🏻 Histoire is a tool written in Vue to generate stories applications (similar to Storybook)
👉🏻 Powered by Vite for some extra speed
histoire.dev
🛠️ Headless UI
👉🏻 Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
👉🏻 Available for Vue and React.
headlessui.com
🛠️ Vue for Cesium
👉🏻 A Vue3 based component library of CesiumJS for 3D Geospatial Visualizations.
zouyaoji.top
Fun
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,

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

评论

发表评论