[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$fIbiQbqKSp_t9Usn5JjGwrorWTbsq7mvStR2rcJfIHFY":3},{"issue":4},{"analytics":5,"html":11,"issueId":12,"issueNumber":13,"ogImage":14,"publishedAt":17,"title":18,"url":19,"version":20},{"clickRate":6,"clicks":7,"openRate":8,"sent":9,"views":10},12,382,44,3084,1356,"\u003C!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\u003Chtml id=\"__vue-email\" lang=\"en\" dir=\"ltr\">\u003Chead>\u003Cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\u003C!---->\u003C/meta>\u003Cstyle>@media(min-width:768px){.md\\:p-7{padding:1.75rem!important}}\u003C/style>\u003C/head>\u003Ctitle>Share Styling Using Wrapper Components\u003C/title>\u003Cdiv id=\"__vue-email-preview\" style=\"display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0\">Ready for your weekly Vue & Nuxt dose?\u003Cdiv> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏\u003C/div>\u003C/div>\u003Cbody data-id=\"__vue-email-body\" 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, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-container\" 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\">\u003Ctbody>\u003Ctr style=\"width: 100%\">\u003Ctd>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4\" style=\"margin-top: 1rem;\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cimg data-id=\"__vue-email-img\" 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>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4 text-center\" style=\"margin-top: 1rem; text-align: center;\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0.75rem; margin-top: 1rem;\" class=\"mb-3 mt-4\">Weekly Vue News #141\u003C/h2>\u003Ch1 data-id=\"__vue-email-heading\" style=\"margin-top: 0.5rem;\" class=\"mt-2\">Share Styling Using Wrapper Components\u003C/h1>\u003Cp data-id=\"__vue-email-text\" 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 data-id=\"__vue-email-link\" 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/141\" target=\"_blank\" class=\"hover:text-[#35495E]\">View online \u003C/a>\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"mt-4\" style=\"margin-top: 1rem;\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003C!-- TODO: START -->\u003Cp data-id=\"__vue-email-text\" 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>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">I got the opportunity to raffle 3 in-person tickets for the first edition of the \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fc3fest.com&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">C3 Dev Festival\u003C/a> in Amsterdam. You can \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2FMokkapps%2Fmokkapps-de-discussions%2Fdiscussions%2F5&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">participate here.\u003C/a>\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">Have a nice week ☀️\u003C/p>\u003C!-- TODO: VUE -->\u003Ch2 data-id=\"__vue-email-heading\" 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\">\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\"/>\u003Cpath d=\"M25.997 9.393l23.002.009L64.035 34.36 79.018 9.404 102 9.398 64.15 75.053z\" fill=\"#35495e\"/>\u003Cpath d=\"M.91 9.569l25.067-.172 38.15 65.659L101.98 9.401l25.11.026-62.966 108.06z\" fill=\"#41b883\"/>\u003C/svg> Vue \u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.vuemastery.com%2Fblog%2Feffortless-forms-w-formkit%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Effortless Forms w/ FormKit\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 on FormKit teaches you how to build forms effortlessly, with a focus on great UX.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fblog.stackademic.com%2Fvue-tip-best-practices-for-working-with-slots-849ca127d5e6&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Vue Tip: Best Practices for Working with Slots\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 developing with slots in Vue.js, it's important to follow some best practices to ensure clean and maintainable code.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D2ZahQhb98-E&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 This is the Future of Vue\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 Matt took a look at what exactly makes Vue Vapor so exciting. \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPA4KFyeB_yI&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Should You Use Vue Slots Over Props?\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 John talks about the pros & cons of using Vue slots instead of props.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2Fposva%2Fpinia-colada&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ Pinia Colada\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 opinionated yet flexible data fetching layer on top of Pinia.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 It's still experimental and not ready for production.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2Fiamstevendao%2Fvue-tel-input&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ vue-tel-input\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 International Telephone Input with Vue.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: TIP -->\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">🔥 Vue Tip: Share Styling Using Wrapper Components\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\"> Often, you'll want to apply the same styling for Vue components. Instead of defining the class over and over again, you can include the styling within a wrapper component. Let's take a look at a simple example: \u003C/p>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;display:block;white-space:pre;font-family:monospace;padding:10px;border-radius:5px;\" 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\"><\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">2\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">div\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> class\u003C/span>\u003Cspan style=\"color:#A6ACCD\">=\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\u003C/span>\u003Cspan style=\"color:#5DE4C7\">bg-red-500\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\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;\">3\u003C/span>\u003Cspan style=\"color:#E4F0FB\">    <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">slot\u003C/span>\u003Cspan style=\"color:#D0679D\"> /\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">4\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  </\u003C/span>\u003Cspan style=\"color:#5DE4C7\">div\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;\">5\u003C/span>\u003Cspan style=\"color:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/span>\u003C/pre>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\"> Let's move this styling to a wrapper component: \u003C/p>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;display:block;white-space:pre;font-family:monospace;padding:10px;border-radius:5px;\" 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\"><\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">2\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">Wrapper\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;\">3\u003C/span>\u003Cspan style=\"color:#E4F0FB\">    <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">slot\u003C/span>\u003Cspan style=\"color:#D0679D\"> /\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">4\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  </\u003C/span>\u003Cspan style=\"color:#5DE4C7\">Wrapper\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;\">5\u003C/span>\u003Cspan style=\"color:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/span>\u003C/pre>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">If you are using Tailwind and have a lot of classes, this can make your code cleaner and more maintainable.\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-top: 0.5rem; font-size: 16px;\" class=\"mt-2 text-[16px]\">This approach is also useful to provide scoped styling for your components. You can define the styles in the wrapper component and ensure that they don't leak to the parent component:\u003C/p>\u003Cpre class=\"shiki poimandres\" style=\"background-color:#1b1e28;display:block;white-space:pre;font-family:monospace;padding:10px;border-radius:5px;\" 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\"><\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\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:#E4F0FB\">  <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">Wrapper\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;\">3\u003C/span>\u003Cspan style=\"color:#E4F0FB\">    <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">slot\u003C/span>\u003Cspan style=\"color:#D0679D\"> /\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;\">4\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  </\u003C/span>\u003Cspan style=\"color:#5DE4C7\">Wrapper\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;\">5\u003C/span>\u003Cspan style=\"color:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">template\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;\">6\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;\">7\u003C/span>\u003Cspan style=\"color:#E4F0FB\"><\u003C/span>\u003Cspan style=\"color:#5DE4C7\">style\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> scoped\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">8\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:deep(\u003C/span>\u003Cspan style=\"color:#E4F0FBD0;font-style:italic\">.\u003C/span>\u003Cspan style=\"color:#5FB3A1;font-style:italic\">inner-container\u003C/span>\u003Cspan style=\"color:#E4F0FBD0;font-style:italic\">::\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\">after\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;\">9\u003C/span>\u003Cspan style=\"color:#A6ACCD\">  @apply absolute top-0 -right-0.5 h-full pointer-events-none bg-gray-200 content-empty z-1;\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;\">10\u003C/span>\u003Cspan style=\"color:#ADD7FF\">  mask-image\u003C/span>\u003Cspan style=\"color:#A6ACCD\">: linear-gradient(\u003C/span>\u003Cspan style=\"color:#91B4D5\">to\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> right\u003C/span>\u003Cspan style=\"color:#A6ACCD\">, \u003C/span>\u003Cspan style=\"color:#ADD7FF\">transparent\u003C/span>\u003Cspan style=\"color:#A6ACCD\">, \u003C/span>\u003Cspan style=\"color:#ADD7FF\">black\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;\">11\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:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">style\u003C/span>\u003Cspan style=\"color:#E4F0FB\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/span>\u003C/pre>\u003C!-- TODO: NUXT -->\u003Ch2 data-id=\"__vue-email-heading\" 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\">\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\"/>\u003C/svg> Nuxt \u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fneon.tech%2Fblog%2Fbuild-and-deploy-global-serverless-nuxt-ssr-app-with-cloudflare-hyperdrive-and-postgres&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Build and Deploy a Global Serverless Nuxt SSR App with Cloudflare Hyperdrive and Postgres\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 deploy a Nuxt app on Cloudflare using Neon Postgres, Drizzle, and Cloudflare Hyperdrive.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQgsd6-Hsbz4%26ab_channel%3DAlexanderLichter&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Faster Nuxt Builds? 🤔 No problem ✅\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 Alexander Lichter explains how to improve build time for re-builds and deploys in Nuxt.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 He's taking a look inside the module and figuring out how things work.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: EVENTS -->\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">📅 Events\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fvuejslive.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vue.js Live Conference\u003C/a> (25 - 26 April 2024, Online) \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fvueconf.us%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vueconf US 2024\u003C/a> (22 - 24 May 2024, New Orleans, US) \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 0.25rem;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fconf.vuejs.de%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">vuejs.de Conf\u003C/a> (8 - 9 October 2024, Bonn, Germany) \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: QUOTE -->\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">💬 Quote of the week\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Cimg data-id=\"__vue-email-img\" 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/141/quote.png?twic=v1/cover=600\" alt=\"Quote of the week\" class=\"rounded-md my-4 w-full max-w-[600px]\">\u003C!-- TODO: IN OTHER NEWS -->\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">🧑🏻‍💻 In Other News\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Feisenbergeffect.medium.com%2Fa-tc39-proposal-for-signals-f0bedd37a335&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 A Proposal to Add Signals to JavaScript\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 (very) early stage proposal for bringing signgals to ECMAScript/JavaScript.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Flogaretm.com%2Fblog%2Ffix-your-annoying-popups-with-the-closewatcher-api%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Fix Your Annoying Popups with the CloseWatcher API\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 CloseWatcher API can help you build better and more accessible UIs.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2Fheyform%2Fheyform&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ HeyForm\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 form builder that allows anyone to create engaging conversational forms for surveys, questionnaires, quizzes, and polls. \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 No coding skills required.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0; margin-bottom: 0.25rem; margin-top: 1.5rem;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" 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://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwicky.nillia.ms%2Fcally%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=141\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ Cally\u003C/a>\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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 collection of open-source calendar components for selecting single dates or date ranges.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-row\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\u003Ctbody style=\"width: 100%\">\u003Ctr style=\"width: 100%\">\u003Cp data-id=\"__vue-email-text\" 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]\">👉🏻 Framework-agnostic, themeable, localizable, and accessible.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: FUN -->\u003Ch2 data-id=\"__vue-email-heading\" style=\"margin-bottom: 0px; margin-top: 2.5rem; font-size: 24px;\" class=\"mb-0 mt-10 text-[24px]\">😂 Fun\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-bottom: 1rem; border-top-width: 4px;\" class=\"mb-4 border-t-4\">\u003Cimg data-id=\"__vue-email-img\" 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/141/fun-terminal-power.png?twic=v1/cover=600\" alt=\"Fun Terminal Power\" class=\"rounded-md my-4 w-full max-w-[600px]\">\u003C!-- TODO: END -->\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea; margin-top: 1.5rem;\n    margin-bottom: 1.5rem;\" class=\"my-6\">\u003Cp data-id=\"__vue-email-text\" 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 data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://discord.gg/AWxF7cq3Qj\" target=\"_blank\" class=\"hover:text-[#35495E]\">Discord community\u003C/a>.\u003C/p>\u003Cp data-id=\"__vue-email-text\" 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>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\">\u003Cimg data-id=\"__vue-email-img\" 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/profile-pic.png?twic=v1/cover=200\" class=\"h-12 w-12 rounded-full\"/>\u003C/td>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size: 14px; line-height: 24px; margin: 16px 0;\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://mokkapps.de\" target=\"_blank\" class=\"hover:text-[#35495E]\">Michael Hoffmann\u003C/a> (Curator) \u003C/p>\u003C/td>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\" class=\"w-1/3\" style=\"width: 33.333333%;\"/>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/hr>\u003C/img>\u003C/hr>\u003C/hr>\u003C/img>\u003C/hr>\u003C/hr>\u003C/hr>\u003C/hr>\u003C/hr>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cp data-id=\"__vue-email-text\" 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 data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none; color: rgb(66,184,131); text-decoration-line: underline; text-decoration-thickness: 1px;\" href=\"https://weekly-vue.news/unsubscribe?token=UNSUBSCRIBE_TOKEN_PLACEHOLDER\" target=\"_blank\" class=\"hover:text-[#35495E]\">Unsubscribe \u003C/a> from this newsletter \u003C/p>\u003Cp data-id=\"__vue-email-text\" 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>\u003Cimg width=\"1px\" height=\"1px\" src=\"https://weekly-vue.news/api/log.gif?issueId=141&email=EMAIL_PLACEHOLDER\"/>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/body>\u003C/html>",617,141,{"absoluteUrl":15,"relativeUrl":16},"https://mokkapps.twic.pics/weekly-vue.news/issues/141/og.png","/issues/141/og.png","2024-04-14T22:00:00.000Z","Weekly Vue News #141 - Share Styling Using Wrapper Components","/issues/141",1,1794479158911]