[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"$fKiFyvAzycWPhPVWwmxEBpYKeSwx8ZfJ8sazmleg_hhw":3},{"analytics":4,"html":10,"issueId":11,"issueNumber":12,"ogImage":13,"publishedAt":16,"title":17,"url":18,"version":19},{"clickRate":5,"clicks":6,"openRate":7,"sent":8,"views":9},10,378,45,3680,1652,"\u003C!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n\u003Chtml lang=\"en\" dir=\"ltr\">\n\n  \u003Chead>\n    \u003Cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n    \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n    \u003C/meta>\n    \u003C/meta>\n  \u003C/head>\n  \u003Ctitle>Registering Cleanup Callbacks in Watchers\u003C/title>\n  \u003Cdiv style=\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0;\">Ready for your weekly Vue &amp; Nuxt dose?\u003Cdiv> ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿\u003C/div>\n  \u003C/div>\n\n  \u003Cbody class=\"mx-auto my-auto w-full bg-white font-sans\" style=\"margin-left: auto;\n    margin-right: auto; margin-top: auto;\n    margin-bottom: auto; width: 100%; background-color: rgb(255,255,255); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;\">\n    \u003Ctable align=\"center\" width=\"100%\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"max-width:37.5em; margin-left: auto;\n    margin-right: auto; margin-top: 40px;\n    margin-bottom: 40px; width: 100%; max-width: 650px; padding: 20px;\" class=\"md:p-7\">\n      \u003Ctbody>\n        \u003Ctr style=\"width: 100%\">\n          \u003Ctd>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4\" style=\"margin-top: 1rem;\">\n              \u003Ctbody>\n                \u003Ctr>\n                  \u003Ctd>\u003Cimg style=\"display:block;outline:none;border:none;text-decoration:none; margin-left: auto;\n    margin-right: auto; margin-top: 0px;\n    margin-bottom: 0px;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/logo-with-text.png?twic=v1/cover=200\" width=\"114\" class=\"mx-auto my-0\" />\u003C/td>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4 text-center\" style=\"margin-top: 1rem; text-align: center;\">\n              \u003Ctbody>\n                \u003Ctr>\n                  \u003Ctd>\n                    \u003Ch2 style=\"margin-bottom: 0.75rem; margin-top: 1rem;\" class=\"mb-3 mt-4\">Weekly Vue News #164\u003C/h2>\n                    \u003Ch1 style=\"margin-top: 0.5rem;\" class=\"mt-2\">Registering Cleanup Callbacks in Watchers\u003C/h1>\n                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0px;\n    margin-bottom: 0px; text-align: center;\" class=\"my-0 text-center\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 12px; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://weekly-vue.news/issues/v2/127\" target=\"_blank\" class=\"hover:text-[#35495E]\">View online \u003C/a>\u003C/p>\n                  \u003C/td>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4\" style=\"margin-top: 1rem;\">\n              \u003Ctbody>\n                \u003Ctr>\n                  \u003Ctd>\n                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">Hi 👋\u003C/p>\n                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">\u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"nuxtnation.com@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Nuxt Nation 2024\u003C/a> got announced last week. It&#39;s a free 2-day virtual conference from 12-13 November. Learn everything Nuxt has to offer in 2024 🤩.\u003C/p>\n                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">Have a lovely week ☀️\u003C/p>\n                    \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">\u003Csvg style=\"height:25px;width:25px;\" viewBox=\"0 0 128 128\">\n                        \u003Cpath d=\"M0 8.934l49.854.158 14.167 24.47 14.432-24.47L128 8.935l-63.834 110.14zm126.98.637l-24.36.02-38.476 66.053L25.691 9.592.942 9.572l63.211 107.89zm-25.149-.008l-22.745.168-15.053 24.647L49.216 9.73l-22.794-.168 37.731 64.476zm-75.834-.17l23.002.009m-23.002-.01l23.002.01\" fill=\"none\" />\n                        \u003Cpath d=\"M25.997 9.393l23.002.009L64.035 34.36 79.018 9.404 102 9.398 64.15 75.053z\" fill=\"#35495e\" />\n                        \u003Cpath d=\"M.91 9.569l25.067-.172 38.15 65.659L101.98 9.401l25.11.026-62.966 108.06z\" fill=\"#41b883\" />\n                      \u003C/svg> Vue \u003C/h2>\n                    \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://vueschool.io/articles/vuejs-tutorials/10-practical-tips-for-better-vue-apps/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 10 Practical Tips for Better Vue Apps*\u003C/a>\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 1. Use the Composition API and script setup for Cleaner Component Code\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 2. Leverage defineProps and defineEmits for Type-Safe Props and Emits\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 and more...\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Dynamic Layouts with Vue jsx: A Guide to Flexible and Maintainable UIs\u003C/a>\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness.\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://medium.com/@olufemioyedepo/implement-feature-flags-in-vue-3-using-growthbook-8e2c60dbe2c0@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Implement feature flags in Vue 3 using GrowthBook\u003C/a>\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 This article demonstrates how feature flags can be used to remotely toggle on/off the flash sale section of a web app written in Vue 3.\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.youtube.com/watch?v=yShWoHCUick@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Is Vue the fastest when it comes to SSR?\u003C/a>\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 The &quot;SSR showdown&quot; benchmark was heavily discussed in the past weeks. \u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 In this video, Alex takes look at the first and the final iteration of the benchmark, issues and results.\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://primeblocks.org/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ PrimeBlocks\u003C/a>\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Introducing 480 Vue Components crafted with PrimeVue and Tailwind.\u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                      \u003Ctbody style=\"width:100%;\">\n                        \u003Ctr style=\"width:100%;\">\n                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Components are copy-paste ready, meaning you can grab the source code and add to your project. \u003C/p>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"rounded-md border border-solid border-[#eaeaea] px-3 pb-3 mt-8\" style=\"border-radius: 0.375rem; border-width: 1px; border-style: solid; border-color: rgb(234,234,234); padding-left: 0.75rem;\n    padding-right: 0.75rem; padding-bottom: 0.75rem; margin-top: 2rem;\">\n                      \u003Ctbody>\n                        \u003Ctr>\n                          \u003Ctd>\n                            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                              \u003Ctbody>\n                                \u003Ctr>\n                                  \u003Ctd>\n                                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                                      \u003Ctbody style=\"width:100%;\">\n                                        \u003Ctr style=\"width:100%;\">\n                                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0px; margin-top: 0.5rem; font-weight: 700;\" class=\"mb-0 mt-2 font-bold\">Sponsored\u003C/p>\n                                        \u003C/tr>\n                                      \u003C/tbody>\n                                    \u003C/table>\n                                  \u003C/td>\n                                \u003C/tr>\n                              \u003C/tbody>\n                            \u003C/table>\n                            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                              \u003Ctbody>\n                                \u003Ctr>\n                                  \u003Ctd>\n                                  \u003Ctd role=\"presentation\" class=\"w-1/3\" style=\"width: 33.333333%;\">\u003Cimg style=\"display:block;outline:none;border:none;text-decoration:none; border-radius: 0.375rem; margin-top: 1rem;\n    margin-bottom: 1rem; width: 100%; max-width: 600px;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/issues/v2/127/js-spreadsheet.png?twic=v1/cover=600\" alt=\"JavaScript DataGrid with Advanced Spreadsheet Controls\" class=\"rounded-md my-4 w-full max-w-[600px]\" />\u003C/td>\n                                  \u003Ctd role=\"presentation\" class=\"w-2/3 pl-8\" style=\"width: 66.666667%; padding-left: 2rem;\">\n                                    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n                                      \u003Ctbody style=\"width:100%;\">\n                                        \u003Ctr style=\"width:100%;\">\n                                          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0px;\n    margin-bottom: 0px; padding-top: 0px;\n    padding-bottom: 0px;\" class=\"my-0 py-0\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.jspreadsheet.com?utm_source=weeklyvue&amp;utm_medium=newsletter&amp;utm_campaign=september2024@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">JavaScript DataGrid with Advanced Spreadsheet Controls\u003C/a>\u003C/p>\n                                        \u003C/tr>\n                                      \u003C/tbody>\n                                    \u003C/table>\n                                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">Deliver Spreadsheet Experiences to your Applications\u003C/p>\n                                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\"> Over 400 implemented excel-like formulas. A feature-rich data grid component that includes functions like cross worksheets, filtering, export and import from xlsx, data binding, and more\u003C/p>\n                                  \u003C/td>\n                          \u003C/td>\n                        \u003C/tr>\n                      \u003C/tbody>\n                    \u003C/table>\n                  \u003C/td>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">💡 Vue Tip: Registering Cleanup Callbacks in Watchers\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\"> When you register a cleanup callback in a watcher, you can ensure that the cleanup logic is executed when the watcher is destroyed. This is especially useful when you need to clean up resources like event listeners or network requests. \u003C/p>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\"> Let&#39;s take a look at the following watcher which performs a network request: \u003C/p>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;display:block;white-space:pre;font-family:monospace;padding:10px;border-radius:5px;max-width:80vw;overflow:auto;\" tabindex=\"0\">\u003Cspan>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;color:#a6accd\" tabindex=\"0\">\u003Ccode style=\"display: table; width: 100%;\">\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">1\u003C/span>\u003Cspan style=\"color:#E4F0FB\">&#x3C;\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> setup\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">2\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">watch\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FB\">id\u003C/span>\u003Cspan style=\"color:#A6ACCD\">, (\u003C/span>\u003Cspan style=\"color:#E4F0FB\">newId\u003C/span>\u003Cspan style=\"color:#A6ACCD\">) \u003C/span>\u003Cspan style=\"color:#91B4D5\">=>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">3\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">  fetch\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#A6ACCD\">`\u003C/span>\u003Cspan style=\"color:#5DE4C7\">/api/\u003C/span>\u003Cspan style=\"color:#A6ACCD\">${\u003C/span>\u003Cspan style=\"color:#E4F0FB\">newId\u003C/span>\u003Cspan style=\"color:#A6ACCD\">}`\u003C/span>\u003Cspan style=\"color:#A6ACCD\">).\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">then\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(() \u003C/span>\u003Cspan style=\"color:#91B4D5\">=>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">4\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // callback logic\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">5\u003C/span>\u003Cspan style=\"color:#A6ACCD\">  })\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">6\u003C/span>\u003Cspan style=\"color:#A6ACCD\">})\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">7\u003C/span>\u003Cspan style=\"color:#E4F0FB\">&#x3C;/\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/span>\u003C/pre>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\"> But this code has a problem: If \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">id\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">id\u003C/span> changes before the request completes, the callback logic executes with the stale ID. To fix this, you can use the \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">onWatcherCleanup\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">onWatcherCleanup\u003C/span> function to abort the stale request: \u003C/p>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;display:block;white-space:pre;font-family:monospace;padding:10px;border-radius:5px;max-width:80vw;overflow:auto;\" tabindex=\"0\">\u003Cspan>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;color:#a6accd\" tabindex=\"0\">\u003Ccode style=\"display: table; width: 100%;\">\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">1\u003C/span>\u003Cspan style=\"color:#E4F0FB\">&#x3C;\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> setup\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">2\u003C/span>\u003Cspan style=\"color:#5DE4C7\">import \u003C/span>\u003Cspan style=\"color:#A6ACCD\">{\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> watch\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> onWatcherCleanup\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> }\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> from\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">vue\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">3\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">4\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">watch\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FB\">id\u003C/span>\u003Cspan style=\"color:#A6ACCD\">, (\u003C/span>\u003Cspan style=\"color:#E4F0FB\">newId\u003C/span>\u003Cspan style=\"color:#A6ACCD\">) \u003C/span>\u003Cspan style=\"color:#91B4D5\">=>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">5\u003C/span>\u003Cspan style=\"color:#91B4D5\">  const\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> controller\u003C/span>\u003Cspan style=\"color:#91B4D5\"> =\u003C/span>\u003Cspan style=\"color:#5DE4C7\"> new\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\"> AbortController\u003C/span>\u003Cspan style=\"color:#A6ACCD\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">6\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">7\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">  fetch\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#A6ACCD\">`\u003C/span>\u003Cspan style=\"color:#5DE4C7\">/api/\u003C/span>\u003Cspan style=\"color:#A6ACCD\">${\u003C/span>\u003Cspan style=\"color:#E4F0FB\">newId\u003C/span>\u003Cspan style=\"color:#A6ACCD\">}`\u003C/span>\u003Cspan style=\"color:#A6ACCD\">, {\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> signal\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> controller\u003C/span>\u003Cspan style=\"color:#A6ACCD\">.\u003C/span>\u003Cspan style=\"color:#E4F0FB\">signal\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> }).\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">then\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(() \u003C/span>\u003Cspan style=\"color:#91B4D5\">=>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">8\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // callback logic\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">9\u003C/span>\u003Cspan style=\"color:#A6ACCD\">  })\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">10\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">11\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">  onWatcherCleanup\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(() \u003C/span>\u003Cspan style=\"color:#91B4D5\">=>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">12\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // abort stale request\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">13\u003C/span>\u003Cspan style=\"color:#E4F0FB\">    controller\u003C/span>\u003Cspan style=\"color:#A6ACCD\">.\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">abort\u003C/span>\u003Cspan style=\"color:#A6ACCD\">()\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">14\u003C/span>\u003Cspan style=\"color:#A6ACCD\">  })\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">15\u003C/span>\u003Cspan style=\"color:#A6ACCD\">})\u003C/span>\u003C/span>\n\u003Cspan class=\"line\" style=\"display: table-row; line-height: 1.5; height: 1.5em;\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">16\u003C/span>\u003Cspan style=\"color:#E4F0FB\">&#x3C;/\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/span>\u003C/pre>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">\u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">onWatcherCleanup\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">onWatcherCleanup\u003C/span> is only available in Vue 3.5 and must be called during the synchronous execution of a \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">watchEffect\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">watchEffect\u003C/span> effect function or \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">watch\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">watch\u003C/span> callback function: you cannot call it after an \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">await\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">await\u003C/span> statement in an async function. \u003C/p>\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">\u003Csvg style=\"height:25px;width:25px;\" viewBox=\"0 0 900 900\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                \u003Cpath d=\"M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z\" fill=\"#00DC82\" />\n              \u003C/svg> Nuxt \u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://masteringnuxt.com/blog/exploring-server-components-in-nuxt?friend=MOKKAPPS@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Exploring Server Components in Nuxt*\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Learn how to enhance your Nuxt apps by using server components for selective server-side rendering, without sacrificing client-side interactivity.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://nuxt.studio/blog/visual-editor@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Behind the scenes of Nuxt Studio&#39;s visual editor\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Discover the inner workings of Nuxt Studio&#39;s visual editor and how it interprets the Markdown syntax and generates it back.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://soubiran.dev/posts/nuxt-going-full-stack-how-to-validate-forms@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Nuxt Going Full-Stack: How to Validate Forms?\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 In this article, the author managed to validate forms on both the client and server sides without duplicating the validation logic, from simple text fields to complex file uploads with NuxtHub.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.youtube.com/watch?v=SiT_1tfuPa4@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Nuxt Build or Nuxt Generate?\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 When you build your Nuxt application for production, you can use \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">nuxt build\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">nuxt build\u003C/span> or \u003Ccode class=\"cino\" style=\"background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">nuxt generate\u003C/code>\u003Cspan class=\"cio\" style=\"display:none; background-color: rgb(240,240,240); color: rgb(53,73,94); padding-left: 0.25rem;\n    padding-right: 0.25rem; border-radius: 0.25rem;\">nuxt generate\u003C/span>. \u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Alex explains what the difference between both are and when to use which one.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://github.com/elk-zone/elk@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ Elk\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 An open source Twitter-clone for Mastodon made with Nuxt.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">📅 Events\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://conf.vuejs.de/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">vuejs.de Conf\u003C/a> (8 - 9 October 2024, Bonn, Germany) \u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://vuefes.jp/2024/en/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vue Fes Japan 2024\u003C/a> (19 October 2024, Otemachi, Japan) \u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://nuxtnation.com/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Nuxt Nation\u003C/a> (12 - 13 November 2024, Virtual Conference) \u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.vuetoronto.com/tickets@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">VueConf Toronto\u003C/a> (18 - 20 November 2024, Toronto, Canada) \u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">💬 Quote of the week\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Cimg style=\"display:block;outline:none;border:none;text-decoration:none; border-radius: 0.375rem; margin-top: 1rem;\n    margin-bottom: 1rem; width: 100%; max-width: 600px;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/issues/v2/127/quote.png?twic=v1/cover=600\" alt=\"Quote of the week\" class=\"rounded-md my-4 w-full max-w-[600px]\">\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">🧑🏻‍💻 In Other News\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Common Causes of Memory Leaks in JavaScript\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Learn how to identify and fix common JavaScript memory leaks in Node.js and Deno.js\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.totaltypescript.com/how-to-create-an-npm-package@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 How To Create An NPM Package\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.webdesignmuseum.org/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ Web Design Museum\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Thousands of screens and videos of old websites, mobile apps, and software from the 1990s to mid-00s.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 18px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.codeviz.ai/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ CodeViz\u003C/a>\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 A VSCode extension for visualizing and navigating through your codebase&#39;s architecture and functions.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">😂 Fun\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Cimg style=\"display:block;outline:none;border:none;text-decoration:none; border-radius: 0.375rem; margin-top: 1rem;\n    margin-bottom: 1rem; width: 100%; max-width: 600px;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/issues/v2/127/unit-tests.png?twic=v1/cover=600\" alt=\"Unit Tests\" class=\"rounded-md my-4 w-full max-w-[600px]\">\n            \u003Ch2 style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">🔗 Want more Vue &amp; Nuxt content?\u003C/h2>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem; margin-left: 2rem; display: list-item;\" class=\"mb-1 mt-1 ml-8 list-item\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://michaelnthiessen.com/newsletter@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">More Exclusive Vue Tips\u003C/a>: Join Michael Thiessen&#39;s newsletter and get great Vue tips and insights delivered to your inbox each\n                    week.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem; margin-left: 2rem; display: list-item;\" class=\"mb-1 mt-1 ml-8 list-item\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://www.youtube.com/@TheAlexLichter@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Weekly Vue &amp; Nuxt Videos\u003C/a>: You must subscribe Alexander Lichter&#39;s YouTube channel if you are interested in Vue &amp; Nuxt.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody style=\"width:100%;\">\n                \u003Ctr style=\"width:100%;\">\n                  \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem; margin-left: 2rem; display: list-item;\" class=\"mb-1 mt-1 ml-8 list-item\">\u003Ca style=\"color:#067df7;text-decoration:none; font-size: 16px; color: rgb(66,184,131); text-decoration-thickness: 1px; text-decoration-line: underline; text-underline-offset: 6px; line-height: 1.625;\" href=\"https://dejavue.fm/@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">DejaVue Podcast\u003C/a>: A weekly podcast about Vue.js and the ecosystem around it.\u003C/p>\n                \u003C/tr>\n              \u003C/tbody>\n            \u003C/table>\n            \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-top: 1.5rem;\n    margin-bottom: 1.5rem;\" class=\"my-6\">\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">Comments? Join the discussion about this issue in our \u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://discord.gg/AWxF7cq3Qj@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Discord community\u003C/a>.\u003C/p>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">Until next week,\u003C/p>\n            \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n              \u003Ctbody>\n                \u003Ctr>\n                  \u003Ctd>\n                  \u003Ctd role=\"presentation\">\u003Cimg style=\"display:block;outline:none;border:none;text-decoration:none; height: 3rem; width: 3rem; border-radius: 9999px;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/2024-profile-pic-2.png?twic=v1/cover=200\" class=\"h-12 w-12 rounded-full\" />\u003C/td>\n                  \u003Ctd role=\"presentation\">\n                    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0;\">\u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://mokkapps.de@TrackLink\" target=\"_blank\" class=\"hover:text-[#35495E]\">Michael Hoffmann\u003C/a> (Curator) \u003C/p>\n                  \u003C/td>\n                  \u003Ctd role=\"presentation\" class=\"w-1/3\" style=\"width: 33.333333%;\" />\n          \u003C/td>\n        \u003C/tr>\n      \u003C/tbody>\n    \u003C/table>\n    \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-top: 0.75rem;\n    margin-bottom: 0.75rem;\" class=\"my-3\">\n    \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px; font-weight: 700;\" class=\"mt-2 text-[16px] font-bold\">To support me: \u003C/p>\n    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n      \u003Ctbody style=\"width:100%;\">\n        \u003Ctr style=\"width:100%;\">\n          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px; margin-left: 2rem; display: list-item;\" class=\"mt-2 text-[16px] ml-8 list-item\">😘 Recommend the newsletter to your friends: it really helps!\u003C/p>\n          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px; margin-left: 2rem; display: list-item;\" class=\"mt-2 text-[16px] ml-8 list-item\">💸 \u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://weekly-vue.news/sponsor\" target=\"_blank\" class=\"hover:text-[#35495E]\">Sponsor\u003C/a> this newsletter\u003C/p>\n          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px; margin-left: 2rem; display: list-item;\" class=\"mt-2 text-[16px] ml-8 list-item\">🧵 \u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://twitter.com/weekly_vue_news\" target=\"_blank\" class=\"hover:text-[#35495E]\">Repost\u003C/a> the latest X thread\u003C/p>\n          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px; margin-left: 2rem; display: list-item;\" class=\"mt-2 text-[16px] ml-8 list-item\">📨 Reply to this email: feedback is welcome\u003C/p>\n          \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; font-size: 12px; font-style: italic; color: rgb(112,106,123);\" class=\"text-[12px] italic text-[#706a7b]\"> * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. \u003C/p>\n        \u003C/tr>\n      \u003C/tbody>\n    \u003C/table>\n    \u003Chr style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-top: 0.75rem;\n    margin-bottom: 0.75rem;\" class=\"my-3\">\n    \u003C/hr>\n    \u003C/hr>\n    \u003C/hr>\n    \u003C/hr>\u003C/img>\u003C/hr>\n    \u003C/hr>\u003C/img>\u003C/hr>\n    \u003C/hr>\n    \u003C/hr>\n    \u003C/hr>\n    \u003C/hr>\n    \u003C/td>\n    \u003C/tr>\n    \u003C/tbody>\n    \u003C/table>\n    \u003Ctable align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\n      \u003Ctbody>\n        \u003Ctr>\n          \u003Ctd>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.5rem; text-align: center; color: rgb(112,106,123); font-size: 12px;\" class=\"mb-2 text-center text-[#706a7b] text-[12px]\">\u003Ca style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"{{ UnsubscribeURL }}\" target=\"_blank\" class=\"hover:text-[#35495E]\">Unsubscribe \u003C/a> from this newsletter \u003C/p>\n            \u003Cp style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0px; text-align: center; color: rgb(112,106,123); font-size: 12px;\" class=\"mt-0 text-center text-[#706a7b] text-[12px]\"> Holzapfelkreuther Str. 19, 81375 Munich, Germany \u003C/p> {{ TrackView }}\n          \u003C/td>\n        \u003C/tr>\n      \u003C/tbody>\n    \u003C/table>\n    \u003C/td>\n    \u003C/tr>\n    \u003C/tbody>\n    \u003C/table>\n  \u003C/body>\n\n\u003C/html>",127,164,{"absoluteUrl":14,"relativeUrl":15},"https://mokkapps.twic.pics/weekly-vue.news/issues/v2/127/og.png","/issues/v2/127/og.png","2024-09-23T13:00:00Z","Weekly Vue News #164 - Registering Cleanup Callbacks in Watchers","/issues/v2/127",2,1794479153880]