Javascript is required
Michael Hoffmann LogoMichael Hoffmann

Nuxt Tip: Detecting Server vs. Client-Side Code Execution

Michael Hoffmann - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Sep 29, 2023
1 min read
|
12 views
Nuxt
Nuxt Tip: Detecting Server vs. Client-Side Code Execution Image

If you need to specify that you want run a certain code block in your Nuxt 3 application only on the client-side, you can use the process.client variable:

Component.vue
1
<script setup>
2
if (process.client) {
3
// This code will only run on the client-side
4
}
5
</script>

Analogously, if you need to specify that you want run a certain code block only on the server-side, you can use the process.server variable:

Component.vue
1
<script setup>
2
if (process.server) {
3
// This code will only run on the server-side
4
}
5
</script>

Why is this useful?

This is useful if you need to run code that is only available on the client-side or server-side. For example, if you need to access the window object, you can only do so on the client-side.


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

New Vue & Nuxt tips delivered to your inbox:
I will never share any of your personal data.