Weekly Vue News #125 - Best Way to Force Re-Render Vue Component

👉🏻 In this blog post, you'll explore the provide and inject feature in Vue.js, its use cases, and how to implement it effectively in your Vue.js applications.

vueschool.io

📕 Common Vue.js Development Mistakes and How to Avoid Them

👉🏻 The goal of this article is to help you understand and avoid these common Vue.js pitfalls, saving you time and frustration in your development process.

dev.to

🛠️ vue-chartjs

👉🏻 A wrapper for Chart.js in Vue to easily create reusable chart components.

github.com

Nuxt

📕 Did you know it's possible to use Nuxt, Vue and Tailwind CSS to build an Adobe Premier Pro plugin? twitter.com

📹 Nuxt's runtimeConfig - The most common mistake

👉🏻 In this video, Alexander explains the common mistake, why you shouldn't do it, and how to use runtimeConfig correctly.

www.youtube.com

🛠️ Nuxt Security 1.0.0

👉🏻 The first stable release of the Nuxt security module.

👉🏻 It automatically configures your app to follow OWASP security patterns and principles by using HTTP headers and middleware.

github.com

📅 Events

Vue.js Nation Conference

👉🏻 24 - 25 January 2024, Online Live Event

👉🏻 100% free

vuejsnation.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

Vueconf US 2024

👉🏻 22 - 24 May 2024, New Orleans, US

vueconf.us

💬 Quote of the week

🔥 Vue Tip: Best Way to Force Re-Render Vue Component

If you need to force re-render your Vue component, you're most likely experiencing issues with Vue's reactivity system. In my experience, you're probably doing something wrong and not using Vue's reactivity system correctly.

However, there are scenarios where it's necessary to force the re-rendering of a component. An example of this is when you're using a third-party library that doesn't play well with Vue's reactivity system. If the third-party library directly modifies the DOM and doesn't provide a way to notify Vue of changes, you'll have to force the re-rendering of the component.

Let me show you the correct way to force re-render a Vue component using the key attribute:

App.vue

            1 <script setup>
              2 import { ref } from 'vue';
              3 
              4 const componentKey = ref(0);
              5 
              6 const forceRender = () => {
              7   componentKey.value += 1;
              8 };
              9 </script>
              10 
              11 
              12 <template>
              13   <MyComponent :key="componentKey" />
              14   <button @click="forceRender">Force re-render</button>
              15 </template>

Each invocation of forceRender changes the componentKey value, which is added as key attribute to MyComponent. Vue recognizes this change, destroys the old component instance, and creates a new one.

Check the official documentation for more information about the key attribute.

😂 Fun

🧑🏻‍💻 In Other News

📕 date-fns v3

👉🏻 Full TypeScript rewrite

👉🏻 No more runtime type checking

👉🏻 Minimal size is now 200 bytes!

👉🏻 and more...

blog.date-fns.org

📕 Care beyond code: 7 best design practices for frontend developers

👉🏻 This post highlights the importance of a holistic approach, offering pointers and best practices to ultimately result in less bugs and overall delays.

evilmartians.com

📕 JavaScript or TypeScript? How To Benefit From the Dichotomy

👉🏻 Not every project needs TypeScript, but it's useful to use TypeScript when data schema matters, whereas JavaScript can be used where errors don't matter as much.

iximiuz.com