Nuxt Tip: Detecting Server vs. Client-Side Code Execution
Michael Hoffmann
Sep 29, 2023
| 1 min read
| 12 views
Michael Hoffmann
Sep 29, 2023
1 min read
| 12 views
Nuxt
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:
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:
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: