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

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>
2if (process.client) { // [!code  focus]
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>
2if (process.server) { // [!code  focus]
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.