Weekly Vue News #115 - Detecting Server vs. Client-Side Code Execution in Nuxt

👉🏻 In this article, you will learn the different lifecycle hooks in Vue 3, how to use them, and how to integrate them into your enterprise application.

kaperskyguru.medium.com

📕 Upgrading to Vue 3 and Nuxt 3 (from Vue 2, in case you didn't gather)

👉🏻 In this article, we're diving into the world of upgrading to Vue 3 and Nuxt 3.

medium.com

📕 Using URL to store state in Vue

👉🏻 This article explains how to persist state by using the browser's native URL.

dev.to

🛠️ Vue Data UI

👉🏻 A user-empowering data visualization Vue components library.

vue-data-ui.graphieros.com

Nuxt

📕 10 of the Best Nuxt 3 Tutorials

👉🏻 This article is compilation of 10 amazing tutorials to help you get started with Nuxt 3 or help you on your Nuxt 3 journey.

masteringnuxt.com

📕 Exploring the Nuxt 3 DevTools

👉🏻 In this article, you'll explore the installation and configuration of the @nuxt_js dev tools, as well as dive into each of the features offered, including viewing pages, components, imports, modules, and more.

www.vuemastery.com

📹 Nuxt 3 Course for Beginners

👉🏻 Learn how to use Nuxt 3 in this 3 hour full tutorial for beginners.

www.youtube.com

📹 Nuxt 3 Auto Imports - Unleash Their Full Potential

👉🏻 In this video, you'll explore the power of Nuxt 3 Auto Imports and how you can configure them to make your DX even better

www.youtube.com

📅 Events

Nuxt Nation 2023

👉🏻 18-19 October 2023, free online event.

nuxtnation.com

VueConf Toronto

👉🏻 9-10 November 2023, Toronto, Canada.

www.vuetoronto.com

💬 Quote of the week

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

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.