Javascript is required
ยท
1 min read

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

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>
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:

Component.vue
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.

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:

I will never share any of your personal data. You can unsubscribe at any time.