Weekly Vue News #127 - Watch Slot Changes

Weekly Vue News #127 - Watch Slot Changes

一月 08, 2024

View and discuss online,

Weekly Vue News #127

Watch Slot Changes

Hi 👋

I hope you had a great start into the new year. I'm currently redesigning my portfolio website with Nuxt UI Pro.

No other personal news this week. Let's jump right into the latest Vue & Nuxt news.

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

New in Vue 3.4: defineModel

New in Vue 3.4: same-name shorthand for v-bind

📕 Upcoming Vue 3 "Vapor Mode"

👉🏻 "Let's take a closer look at what Vapor Mode is, how it works, and its future! "

javascript.plainenglish.io

📕 My Journey from React.js to Vue.js

👉🏻 In this article, the author shares the effects of his shift to Vue.js

👉🏻 He talks about the highs and lows of the learning curve, the differences between these frameworks, and the impact it had on his career.

📕 A "Wordle" on Test Driven Development in Vue.js

👉🏻 VueSchool has a new hands-on course where you will learn how to write applications using Test-Driven Development (TDD).

👉🏻 You will make your own clone of the game Wordle completely from scratch.

📕 Real-time updates in Vue apps with Polling

👉🏻 This article introduces you to the concept of polling in your Vue application.

🛠️ neoconfetti/vue

👉🏻 Show an awesome confetti explosion on your page with Vue.

👉🏻 SSR friendly, works like a charm in Nuxt.

Nuxt

📕 Build an X clone w/ Nuxt UI

👉🏻 The new Nuxt UI library contains pre-built components that are ready to use for your next project.

👉🏻 Build an X (Twitter) Clone using Nuxt UI in this tutorial.

www.vuemastery.com

📹 Nuxt vs. Nitro - What does what in your App

👉🏻 When Nitro is used in your Nuxt application?

👉🏻Which limitations the server folder offers?

👉🏻 Examples how Nitro and Nuxt work together.

www.youtube.com

📹 Nuxt Server Components Explained

👉🏻 In this video, Eric introduces the feature, and the new slots feature it has.

www.youtube.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

💬 Quote of the week

Quote of the week

🔥 Vue Tip: Watch Slot Changes

Sometimes, you need to react to changes in the slot content. For example, if you have a dynamic list of items in a slot, you might want to update the list when the slot content changes.

Unfortunately, Vue does not provide a built-in way to watch slot changes, but you can use the MutationObserver API to react to changes in the slot content. It's a built-in browser API and, thus framework agnostic:

Component.vue

            1 <script setup lang="ts">
              2 import { ref, onMounted, onBeforeUnmount } from 'vue';
              3 
              4 const slotElement = ref(null);
              5 const observer = ref(null);
              6 
              7 const update = () => {
              8   console.log('UPDATE');
              9 };
              10 
              11 onMounted(() => {
              12   observer.value = new MutationObserver(update);
              13 
              14   observer.value.observe(slotElement.value, {
              15     childList: true,
              16     subtree: true,
              17   });
              18 });
              19 
              20 onBeforeUnmount(() => {
              21   if (observer.value) {
              22     observer.value.disconnect();
              23   }
              24 });
              25 </script>
              26 
              27 <template>
              28   <div ref="slotElement">
              29     <slot />
              30   </div>
              31 </template>

If the component is mounted, we create a new MutationObserver instance and call the observe method to start observing the slot element. We pass the update method as the callback function and an object with the childList and subtree options to observe changes in the slot content.

When the component is unmounted, we call the disconnect method to stop observing the slot element. This is necessary to avoid memory leaks.

Try it yourself in the following StackBlitz project. Each time you click the "Increment" button, the update method is called and logs a message to the console:

😂 Fun

Fun

🧑🏻‍💻 In Other News

📕 Deep Cloning Objects in JavaScript, the Modern Way

👉🏻 The structured clone function, which is built into the JavaScript runtime, can be used to make deep copies of objects in JavaScript.

📕 A Crash Course on Caching Fundamentals

👉🏻 This article dives into different types of caching, such as page, content, data, instruction, browser, and query caching.

www.swequiz.com

📕 Getting started with Web Performance

👉🏻 A look at how to improve your website's performance with strategies, tools, and tips to help you make notable improvements.

www.htmhell.dev

🎮 Dungeons and Directories

👉🏻 An open-source short-text adventure game that you play in your file browser.

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany

评论