Weekly Vue News #89 - Render Nuxt Component Only on Client-Side

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:

😘 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: 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:

MyComponent.vue


          1 <script setup>

          2 localStorage.setItem('test', 'A test string')

          3 

          4 const localStorageItem = ref('')

          5 

          6 onMounted(() => {

          7   localStorageItem.value = localStorage.getItem('test')

          8 })

          9 </script>

          10 

          11 <template>

          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>

          16 </template>

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:

app.vue


          1 <template>

          2   <div>

          3     <ClientOnly fallback-tag="span" fallback="Loading on server...">

          4       <MyComponent />

          5     </ClientOnly>

          6   </div>

          7 </template>

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 Demo

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

logaretm.com

📕 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

serversideup.net

📕 Better Navigation with NuxtLink