Weekly Vue News #103 - Differentiate Client and Server Components in Nuxt

View and discuss online,

Weekly Vue News #103 Differentiate Client and Server Components in Nuxt

Vue School announced Vue.js Forge Episode 4! At Vue.js Forge Episode 4, you'll get to build a Web 3 Kickstarter Clone! Yes, you read that right. We will build a blockchain crowdfunding app. This is an excellent opportunity to dabble in the decentralized web, all within the context of a Vue.js application, and interact with smart contracts via JavaScript. 🗓️ Date: 2-3 August 💲 Entry Cost: FREE 👉🏻 Code with Blockchain 👉🏻 Learn about Crowdfunding 👉🏻 Discover Web 3 → Yes, I want to build a Kickstarter Clone!

Hi 👋 Last week I again put a lot of work into CodeSnap.dev and published a new feature to manage editor presets. Additionally, I recorded a short video for Vue.js Forge Episode 4 where we will build a Web 3 Kickstarter Clone. You can find more details about the event in the section above. 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: Differentiate Client and Server Components

Client Components

By adding the .client suffix to a component you tell Nuxt to render that component only client-side.

1 | components/ 2 --| MyComponent.client.vue

.client components are rendered only after being mounted. If you need to access the rendered template in onMounted() you need to call await nextTick() inside the onMounted() callback. Alternatively, you can wrap your component with Nuxt's <ClientOnly> component:

App.vue 1 <template> 2 <div> 3 <ClientOnly> 4 <MyComponent /> 5 </ClientOnly> 6 </div> 7 </template>

Server Components

Server components are currently experimental. You can enable them in your Nuxt config: nuxt.config.ts 1 export default defineNuxtConfig({ 2 experimental: { 3 componentIslands: true, 4 }, 5 })

By adding the .server suffix to a component you tell Nuxt to always render that component on the server. Such a component adds zero JavaScript to your client bundle and does not parse markdown in your client which makes your app faster. If you update its props, a network is triggered to update the HTML.

1 | components/ 2 --| MyComponent.server.vue

LearnVue produced a good video about server components:

📺 Watch on YouTube

Combine Server and Client Components

You can either use .client and .server components on their own or pair them. Combining them enables advanced use cases if your components need to have separate implementations on the client and server side.

1 | components/ 2 --| MyComponent.client.vue 3 --| MyComponent.server.vue

Be aware that the client component needs to be able to hydrate the HTML which was generated by the server component to avoid hydration mismatches.

Quote of the week

Curated Vue & Nuxt Content

Lazy Load Vue Component When It Becomes Visible In this blog post, I'll show you a simple mechanism to lazy load your Vue components if they become visible using the Intersection Observer API.

📹 They Just Fixed VUE ROUTER 👉🏻 "unplugin-vue-router" is a Vite plugin that adds "automatically typed file-based routing" to your Vue application www.youtube.com

📕 Understanding Web Accessibility in Vue.js 👉🏻 This article tackles the basics of web accessibility in Vue.js applications. 👉🏻 Looking at some concepts and strategies to consider when designing accessible applications. vueschool.io

📕 Deploying a Fastify & Vue 3 Static Site to Heroku 👉🏻 In this article, you'll learn how to deploy a Vue 3 static site to Heroku with a Fastify Node.js backend server to serve the static files. www.lirantal.com

📕 Nuxt on the Edge 👉🏻 Learn how the Nuxt team made Nuxt 3 capable of running on edge runtimes to run with server-side rendering close to your users. nuxt.com

📕 Component Party 👉🏻 Quick overview of different frontend frameworks with simple code snippets covering various tasksk. 👉🏻 Covers frameworks like Vue, React, Svelte, Angular, etc. component-party.dev

Fun

Curated Web Development Content

📕 Too Much JavaScript? Why the Frontend Needs to Build Better 👉🏻 A retail company found that they were losing $700,000 per year per kilobyte of Javascript due to bad user experiences. thenewstack.io

📕 Learn JavaScript for Beginners 👉🏻 freeCodeCamp just published this full-length handbook on JavaScript. www.freecodecamp.org

📕 A Practical Guide To Service Workers 👉🏻 This article dives deep into how service workers work and how to implement them in your own web application. blog.openreplay.com

📹 htmx in 100 seconds 👉🏻 htmx is an HTML-focused UI library that can handle data fetching and rendering in web applications without complex JavaScript code or frameworks. www.youtube.com

🛠️ Featurevisor 👉🏻 An open source solution for managing your feature flags, experiments, and remote config management. 👉🏻 It's built for developers, by developers. The workflow is fully git-based. github.com

🛠️ driver.js 👉🏻 Powerful, highly customizable vanilla JavaScript engine for page tours and contextual help systems. 👉🏻 No external dependencies, light-weight, supports all major browsers and highly customizable. driverjs.com

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