Michael Hoffmann LogoMichael Hoffmann
·
1 min read

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

Nuxt Tip: Detecting Server vs. Client-Side Code Execution Image
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:

Component.vue
<script setup> if (process.client) { // [!code focus] // This code will only run on the client-side } </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
<script setup> if (process.server) { // [!code focus] // This code will only run on the server-side } </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.

Vue Tip: Event Handling

There are different ways how to handle events in Vue. Let's take a look at them.

Vue Tip: Dynamic Slot Names

Dynamic directive arguments also work on v-slot, allowing the definition of dynamic slot names.