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.

bash

| components/ --| 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

Server Components

Warning

Server components are currently experimental. You can enable them in your Nuxt config:

nuxt.config.ts

export default defineNuxtConfig({ experimental: { componentIslands: true, }, })

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.

bash

| components/ --| MyComponent.server.vue

LearnVue produced a good video about server components:

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.

bash

| components/ --| MyComponent.client.vue --| 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.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Use Eager Computed Without Lazy Evaluation

Computed properties are evaluated lazily which means they are only evaluated when they are accessed. The computedEager() from VueUse is a good alternative for simple operations.

Vue Tip: Split Your SFC into Multiple Files

Use the 'src' attribute to import an external file for a language block in your Vue Single-File Components (SFC).