[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$f9bbrRz03EPisINOakj2LrafTvSjb8zG1NhigvlJGDxc":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},13,389,43,3003,1296,"\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>Validate Props in Script Setup With TypeScript\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 &amp; 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, &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;;\">\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 #138\u003C/h2>\u003Ch1 data-id=\"__vue-email-heading\" style=\"margin-top: 0.5rem;\" class=\"mt-2\">Validate Props in Script Setup With TypeScript\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/138\" 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>\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]\">While there&#39;s not much excitement to report from my end this time around, I do have something special for you! I&#39;ve snagged a ticket to the Vue.js Live 2024 Online conference, and I&#39;m thrilled to raffle it off to one lucky subscriber. Check out the link below for your chance to join in on the action!\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>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" class=\"rounded-md border border-solid border-[#eaeaea] px-3\" 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;\">\u003Ctbody>\u003Ctr>\u003Ctd>\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.5rem; font-weight: 700;\" class=\"mt-2 font-bold\">Sponsored\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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/138/raffle-promo.png?twic=v1/cover=600\" alt=\"Vue.js Live Conference 2024 Ticket Raffle\" class=\"rounded-md my-4 w-full max-w-[600px]\">\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%2Fweekly-vue.news%2Fraffle%2Fvue-js-live-2024&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">Win a free ticket for Vue.js Live 2024\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]\"> ✨ I teamed up with the Vue.js Live team to raffle one ticket for the conference.\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]\">🗓️ April 25 &amp; 26 | 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-top: 0.25rem; margin-bottom: 0px; font-size: 16px;\" class=\"mt-1 mb-0 text-[16px]\">🎙️ 15+ speakers \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]\">🧑‍💻 5K+ attendees \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%\">\u003Ca data-id=\"__vue-email-button\" style=\"line-height:100%;text-decoration:none;display:inline-block;max-width:100%; margin-top: 1rem;\n    margin-bottom: 1rem; font-size: 16px; color: rgb(66,184,131);\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fweekly-vue.news%2Fraffle%2Fvue-js-live-2024&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"my-4 text-[16px] text-[#42b883]\">\u003Cspan>\u003C!--[if mso]>\u003Ci style=\"letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0\" hidden>&nbsp;\u003C/i>\u003C![endif]-->\u003C/span>\u003Cspan style=\"max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;\">👉 Participate here\u003C/span>\u003Cspan>\u003C!--[if mso]>\u003Ci style=\"letter-spacing: 0px;mso-font-width:-100%\" hidden>&nbsp;\u003C/i>\u003C![endif]-->\u003C/span>\u003C/a>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/img>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\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%2Fdev.to%2Fjesusantguerrero%2Fapp-structure-for-vue-projects-2pbf&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 App structure for big Vue projects\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 author describe what he thinks has been the more intuitive easy to work and maintain folder structure in medium to large Vue applications.\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%2Fmasteringpinia.com%2Fblog%2Fhow-to-create-private-state-in-stores%3Ffriend%3DMOKKAPPS&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 How to create private state in stores\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]\">👉🏻 Discover the secrets to creating private state in Pinia stores.\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 explores the differences between Options &amp; Setup Stores and how to maintain data integrity.\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.devgenius.io%2Fvue-tip-validate-emitted-events-6e823a5a115f&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Vue Tip: Validate Emitted Events\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]\">👉🏻 In this article, you&#39;ll learn how to implement validation in emitted events within the Vue.js framework.\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%2Ftighten.com%2Finsights%2Fstate-management-in-vue-3-why-you-should-try-out-pinia%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 State management in Vue 3: Why you should try out Pinia\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]\">👉🏻 Delve into state management strategies in Vue and get an introduction to Pinia, the intuitive store.\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%3DhxXRXWnuAh4&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Vapor: 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]\">👉🏻 A pretty good overview from Theo about Signals and Vapor mode in Vue.\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]\">👉🏻 Check out the comment section for some minor corrections from Evan You.\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%3DN-CS73eHld0&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Vue.js and Firebase crash course\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]\">👉🏻 In this crash course David East will take you through all of the basics and build an Vue app using Authentication, Firestore, and Vue Router with VueFire.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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%2Fdev.to%2Fmayashavin%2Fbuild-a-nuxt-app-with-azure-serverless-rest-api-2ci7&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Build a Nuxt app with Azure serverless REST 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]\">👉🏻 In this article, we will learn how to build an static web app using Nuxt, with serverless APIs using Azure Functions CLI and Static Web Apps Emulator.\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%2Feslint.nuxt.com%2Fguide%2Ffaq%23packages-disambiguation&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Frequently asked questions about ESLint integration in Nuxt\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 Nuxt team created a list to help you choose the ESLint integrations for your Nuxt app.\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%3DSXk-L19gTZk&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Type-safe routing in Nuxt\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]\">👉🏻 Have you ever wondered if Nuxt could be more type-safe?\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]\">👉🏻 With the experimental typed pages support, it can!\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%3DOfY7JcrqkPg&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📹 Integrating WebSockets in Nuxt and Nitro\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 show you how to set up WebSockets in Nitro and in Nuxt.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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: 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%2Fvuejslive.com%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vue.js Live Conference \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]\">👉🏻 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: 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%2Fvueconf.us%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vueconf US 2024 \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]\">👉🏻 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: 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%2Fconf.vuejs.de%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">vuejs.de Conf \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]\">👉🏻 8 - 9 October 2024, Bonn, Germany\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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/138/quote.png?twic=v1/cover=600\" alt=\"Quote of the week\" class=\"rounded-md my-4 w-full max-w-[600px]\">\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: Validate Props in Script Setup With TypeScript\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]\">You can define prop validations for your component in the \u003Cstyle>\n      meta ~ .cino {\n        display: none !important;\n        opacity: 0 !important;\n      }\n\n      meta ~ .cio {\n        display: block !important;\n      }\n    \u003C/style>\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;\">script setup\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;\">script setup\u003C/span> using the \u003Cstyle>\n      meta ~ .cino {\n        display: none !important;\n        opacity: 0 !important;\n      }\n\n      meta ~ .cio {\n        display: block !important;\n      }\n    \u003C/style>\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;\">defineProps()\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;\">defineProps()\u003C/span> compiler macro. This is a great way to ensure that the props you receive are of the correct type and shape.\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]\"> Let&#39;s first take a look at the official example from 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%2Fvuejs.org%2Fguide%2Fcomponents%2Fprops.html%23prop-validation&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">Vue docs\u003C/a> without using TypeScript: \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\">&#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\">defineProps\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:#767C9DB0;font-style:italic\">  // Basic type check\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\">  //  (null and undefined values will allow any type)\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:#ADD7FF\">  a\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> Number\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:#767C9DB0;font-style:italic\">  // Multiple possible types\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:#ADD7FF\">  b\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> [\u003C/span>\u003Cspan style=\"color:#E4F0FB\">String\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> Number\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\">  // Required string\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:#ADD7FF\">  v\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\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>\u003Cspan style=\"color:#ADD7FF\">    type\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> String\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;\">11\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    required\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#5DE4C7\"> true\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;\">12\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;\">13\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">  // Number with a default value\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;\">14\u003C/span>\u003Cspan style=\"color:#ADD7FF\">  d\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\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:#ADD7FF\">    type\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> Number\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:#ADD7FF\">    default\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#5DE4C7\"> 100\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;\">17\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;\">18\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">  // Object with a default value\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;\">19\u003C/span>\u003Cspan style=\"color:#ADD7FF\">  e\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\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;\">20\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    type\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> Object\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;\">21\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // Object or array defaults must be returned from\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;\">22\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // a factory function. The function receives the raw\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;\">23\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // props received by the component as the argument.\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;\">24\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    default\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FB\">rawProps\u003C/span>\u003Cspan style=\"color:#A6ACCD\">)\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;\">25\u003C/span>\u003Cspan style=\"color:#5DE4C7C0\">      return\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> message\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">hello\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\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;\">26\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;\">27\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;\">28\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">  // Custom validator function\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;\">29\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">  // full props passed as 2nd argument in 3.4+\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;\">30\u003C/span>\u003Cspan style=\"color:#ADD7FF\">  f\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\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;\">31\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    validator\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FB\">value\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> props\u003C/span>\u003Cspan style=\"color:#A6ACCD\">)\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;\">32\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">      // The value must match one of these strings\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;\">33\u003C/span>\u003Cspan style=\"color:#5DE4C7C0\">      return\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> [\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">success\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">warning\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">danger\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">].\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">includes\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FB\">value\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;\">34\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;\">35\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;\">36\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">  // Function with a default value\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;\">37\u003C/span>\u003Cspan style=\"color:#ADD7FF\">  g\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\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;\">38\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    type\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> Function\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;\">39\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // Unlike object or array default, this is not a factory\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;\">40\u003C/span>\u003Cspan style=\"color:#767C9DB0;font-style:italic\">    // function - this is a function to serve as a default value\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;\">41\u003C/span>\u003Cspan style=\"color:#ADD7FF\">    default\u003C/span>\u003Cspan style=\"color:#A6ACCD\">()\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;\">42\u003C/span>\u003Cspan style=\"color:#5DE4C7C0\">      return\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> [\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">one, two\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\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;\">43\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;\">44\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;\">45\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;\">46\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>\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]\">Now let&#39;s rewrite the same example using TypeScript inside \u003Cstyle>\n      meta ~ .cino {\n        display: none !important;\n        opacity: 0 !important;\n      }\n\n      meta ~ .cio {\n        display: block !important;\n      }\n    \u003C/style>\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;\">script setup\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;\">script setup\u003C/span>:\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\">&#x3C;\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> setup\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> lang\u003C/span>\u003Cspan style=\"color:#A6ACCD\">=\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\u003C/span>\u003Cspan style=\"color:#5DE4C7\">ts\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;\">2\u003C/span>\u003Cspan style=\"color:#91B4D5\">interface\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> Props\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:#A6ACCD\">  a\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> number\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:#A6ACCD\">  b\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> string\u003C/span>\u003Cspan style=\"color:#91B4D5\"> |\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> number\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:#A6ACCD\">  c\u003C/span>\u003Cspan style=\"color:#91B4D5\">:\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> string\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\">  d\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> number\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:#A6ACCD\">  e\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> { message\u003C/span>\u003Cspan style=\"color:#91B4D5\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">string\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\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:#A6ACCD\">  f\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">success\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#91B4D5\"> |\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">warning\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#91B4D5\"> |\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">danger\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\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;\">9\u003C/span>\u003Cspan style=\"color:#A6ACCD\">  g\u003C/span>\u003Cspan style=\"color:#91B4D5\">?:\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\"> Array\u003C/span>\u003Cspan style=\"color:#A6ACCD\">&#x3C;\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\">string\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>\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;\">11\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">withDefaults\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">defineProps\u003C/span>\u003Cspan style=\"color:#A6ACCD\">&#x3C;\u003C/span>\u003Cspan style=\"color:#A6ACCDC0\">Props\u003C/span>\u003Cspan style=\"color:#A6ACCD\">>(), {\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> d\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#5DE4C7\"> 100\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> e\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> {\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> message\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">hello\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> },\u003C/span>\u003Cspan style=\"color:#ADD7FF\"> g\u003C/span>\u003Cspan style=\"color:#A6ACCD\">:\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> ()\u003C/span>\u003Cspan style=\"color:#91B4D5\"> =>\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> [\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">one\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#A6ACCD\"> '\u003C/span>\u003Cspan style=\"color:#5DE4C7\">two\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">]\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;\">12\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>\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]\"> All we need to do is define an interface for the props and use the \u003Cstyle>\n      meta ~ .cino {\n        display: none !important;\n        opacity: 0 !important;\n      }\n\n      meta ~ .cio {\n        display: block !important;\n      }\n    \u003C/style>\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;\">withDefaults\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;\">withDefaults\u003C/span> helper to set default values. TypeScript will take care of the rest. \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]\">Try it yourself on StackBlitz:\u003C/p>\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%\">\u003Ca data-id=\"__vue-email-button\" style=\"line-height:100%;text-decoration:none;display:inline-block;max-width:100%; font-size: 16px; color: rgb(66,184,131);\" href=\"https://stackblitz.com/edit/vue-tip-validate-props-in-script-setup-with-type-script?file=README.md\" target=\"_blank\" class=\"text-[16px] text-[#42b883]\">\u003Cspan>\u003C!--[if mso]>\u003Ci style=\"letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0\" hidden>&nbsp;\u003C/i>\u003C![endif]-->\u003C/span>\u003Cspan style=\"max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;\">✨ Open Demo\u003C/span>\u003Cspan>\u003C!--[if mso]>\u003Ci style=\"letter-spacing: 0px;mso-font-width:-100%\" hidden>&nbsp;\u003C/i>\u003C![endif]-->\u003C/span>\u003C/a>\u003C/tr>\u003C/tbody>\u003C/table>\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/138/webdave-making-website.png?twic=v1/cover=600\" alt=\"Web developer making website\" class=\"rounded-md my-4 w-full max-w-[600px]\">\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%2Feloquentjavascript.net%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Eloquent 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]\">👉🏻 An online book for learning 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%2Fblog.sentry.io%2Fwhat-is-inp%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 What is INP and why you should care\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]\">👉🏻 Google introduced Interaction to Next Paint (INP) as a new Core Web Vital on March 12 to emphasize the importance of a website&#39;s overall responsiveness throughout a user&#39;s entire visit.\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%2Fcodersblock.com%2Fblog%2Fplaying-with-infinity-in-css%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">📕 Playing with Infinity in CSS \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 blog explores the concept of using `infinity` within CSS, specifically in the `calc()` function. \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 can be used to achieve unique effects like ensuring an element has the highest `z-index`. \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.404s.design%2F&amp;token=VERIFICATION_TOKEN_PLACEHOLDER&amp;issueId=138\" target=\"_blank\" class=\"hover:text-[#35495E]\">🛠️ 404s\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 gallery of unique, creative 404 pages.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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 \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/issues/138\" target=\"_blank\" class=\"hover:text-[#35495E]\">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]\">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/hr>\u003C/img>\u003C/hr>\u003C/hr>\u003C/img>\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=138&amp;email=EMAIL_PLACEHOLDER\"/>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/body>\u003C/html>",610,138,{"absoluteUrl":15,"relativeUrl":16},"https://mokkapps.twic.pics/weekly-vue.news/issues/138/og.png","/issues/138/og.png","2024-03-24T23:00:00.000Z","Weekly Vue News #138 - Validate Props in Script Setup With TypeScript","/issues/138",1,1794479158981]