Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 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 #89 - Render Nuxt Component Only on Client-Side #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #89

Render Nuxt Component Only on Client-Side

Hi πŸ‘‹

I'm still busy creating my remote talk for Vue.js Live 2023, I have to upload the video this Friday πŸ˜΅β€πŸ’«

I hope you enjoy this week's issue πŸ’š

Have a lovely week β˜€οΈ

To support me:

Nuxt Tip: Render Component Only on Client-Side

By default, Nuxt uses universal (client-side + server-side) rendering to render your application.

It's a typical use case to access browser APIs like localStorage in your Nuxt components:

1<script setup>
2localStorage.setItem('test', 'A test string')
4const localStorageItem = ref('')
6onMounted(() => {
7 localStorageItem.value = localStorage.getItem('test')
12 <div style="display: flex; flex-direction: column; gap: 10px">
13 <span>Hello from client</span>
14 <span>Local storage item: {{ localStorageItem }}</span>
15 </div>

If you try to run your app, Nuxt will throw an error:

localStorage is not defined

This error occurs because the code is first executed on the Node.js server which does not support localStorage.

You can solve this problem by using Nuxt 3's ClientOnly component:

2 <div>
3 <ClientOnly fallback-tag="span" fallback="Loading on server...">
4 <MyComponent />
5 </ClientOnly>
6 </div>

The <ClientOnly> component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin.

Try it yourself in the following StackBlitz project:

⚑ Open DemoCurated Vue & Nuxt ContentπŸ“• Reducing component noise with Composition API

πŸ‘‰πŸ» In the article you will come to understand what component noise is and how to reduce it with the Composition API in Vue.
πŸ“• Upgrading Nuxt 2 to Nuxt 3
πŸ‘‰πŸ» The migration from Nuxt 2 to Nuxt 3 is not easy.
πŸ‘‰πŸ» A course designed "to provide a one stop shop for all of the
helpful snippets, techniques, etc. that we came across in the process" of the Nuxt 3 migration
πŸ“• Better Navigation with NuxtLink
πŸ‘‰πŸ» The NuxtLink component in Nuxt 3 may seem simple at first glance, but there’s a lot going on beneath the surface.
πŸ‘‰πŸ» In this article find out how it works and how to use it.
Quote of the weekCurated Web Development ContentπŸ“• How to be a -10x Engineer

πŸ‘‰πŸ» A guide on how to waste resources and make projects harder to complete.
πŸ“• Writing Tips for Improving Your PullΒ Requests
πŸ‘‰πŸ» Make it scannable
πŸ‘‰πŸ» Speak plainly
πŸ‘‰πŸ» Avoid adverbs
πŸ‘‰πŸ» Simplify your sentences
πŸ‘‰πŸ» Avoid a passive voice
πŸ“• Modern HTML email (tables no longer required)

πŸ‘‰πŸ» The new Outlook switches rendering engines from Microsoft Word to Edge
πŸ› οΈ Croner - Cron for JavaScript and TypeScript

πŸ‘‰πŸ» It lets users trigger functions, evaluate cron expressions, and obtain a list of upcoming run times without any dependencies.
πŸ› οΈ Pretty TypeScript Errors (VS Code Extension)

πŸ‘‰πŸ» Make TypeScript errors prettier and human-readable in VSCode.
πŸ› οΈ Magicast
πŸ‘‰πŸ» It lets you modify a JS/TS file and write back magically, just like JSON
πŸ‘‰πŸ» It could be helpful for tools to update your configs written in JS.
πŸ› οΈ Tailwind Elements
πŸ‘‰πŸ» A 100% free open-source UI Kit forΒ TailwindΒ CSS
πŸ‘‰πŸ» Supports importing only the key plugins & components they need, without bloating the JS code
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.
I will never share any of your personal data.
Β© 2023 All rights reserved.