[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$fUr8hYbH4G8Riyaa21R6_sCNsuFa6-155IWoznpQngbc":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,391,42,3170,1347,"\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:640px){.container{max-width:640px!important}}@media(min-width:768px){.container{max-width:768px!important}}@media(min-width:1024px){.container{max-width:1024px!important}}@media(min-width:1280px){.container{max-width:1280px!important}}@media(min-width:1536px){.container{max-width:1536px!important}}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-0{margin-top:0px!important;margin-bottom:0px!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.my-6{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-\\[40px\\]{margin-top:40px!important;margin-bottom:40px!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mb-0{margin-bottom:0px!important}.mb-1{margin-bottom:0.25rem!important}.mb-2{margin-bottom:0.5rem!important}.mb-3{margin-bottom:0.75rem!important}.mb-4{margin-bottom:1rem!important}.mt-0{margin-top:0px!important}.mt-1{margin-top:0.25rem!important}.mt-10{margin-top:2.5rem!important}.mt-2{margin-top:0.5rem!important}.mt-4{margin-top:1rem!important}.mt-6{margin-top:1.5rem!important}.block{display:block!important}.table{display:table!important}.hidden{display:none!important}.h-12{height:3rem!important}.w-1\\/3{width:33.333333%!important}.w-12{width:3rem!important}.w-full{width:100%!important}.max-w-\\[600px\\]{max-width:600px!important}.max-w-\\[650px\\]{max-width:650px!important}.rounded{border-radius:0.25rem!important}.rounded-full{border-radius:9999px!important}.rounded-md{border-radius:0.375rem!important}.border{border-width:1px!important}.border-t-4{border-top-width:4px!important}.bg-\\[\\#f0f0f0\\]{background-color:rgb(240,240,240)!important}.bg-white{background-color:rgb(255,255,255)!important}.p-\\[20px\\]{padding:20px!important}.px-1{padding-left:0.25rem!important;padding-right:0.25rem!important}.text-center{text-align:center!important}.font-sans{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\"!important}.text-\\[12px\\]{font-size:12px!important}.text-\\[16px\\]{font-size:16px!important}.text-\\[18px\\]{font-size:18px!important}.text-\\[24px\\]{font-size:24px!important}.leading-relaxed{line-height:1.625!important}.text-\\[\\#35495E\\]{color:rgb(53,73,94)!important}.text-\\[\\#42B883\\]{color:rgb(66,184,131)!important}.text-\\[\\#706a7b\\]{color:rgb(112,106,123)!important}.underline{text-decoration-line:underline!important}.decoration-1{text-decoration-thickness:1px!important}.underline-offset-\\[6px\\]{text-underline-offset:6px!important}.hover\\:text-\\[\\#35495E\\]:hover{color:undefined!important}.hover\\:text-\\[\\#35495E\\]:hover:text-\\[\\#35495E\\]:hover{color:rgb(53,73,94)!important}@media(min-width:768px){.md\\:p-7{padding:1.75rem!important}}\u003C/style>\u003C/head>\u003Ctitle>Simpler Two-Way Binding in Vue With defineModel\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\">\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-container\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"max-width:37.5em;\" class=\"mx-auto my-[40px] w-full max-w-[650px] p-[20px] 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\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cimg data-id=\"__vue-email-img\" style=\"display:block;outline:none;border:none;text-decoration:none;\" 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\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ch2 data-id=\"__vue-email-heading\" class=\"mb-3 mt-4\">Weekly Vue News #144\u003C/h2>\u003Ch1 data-id=\"__vue-email-heading\" class=\"mt-2\">Simpler Two-Way Binding in Vue With defineModel\u003C/h1>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"my-0 text-center\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/issues/144\" target=\"_blank\" class=\"text-[12px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">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\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003C!-- TODO: START -->\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">Hi 👋\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">You can now view some statistics about this newsletter at \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fweekly-vue.news%2Fstats&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">this page.\u003C/a>\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">I love to develop such features and be as transparent as possible.\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">Have a nice week ☀️\u003C/p>\u003C!-- TODO: VUE -->\u003Ch2 data-id=\"__vue-email-heading\" 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;\" 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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.vuemastery.com%2Fblog%2Fthe-future-of-vue-vapor-mode%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 The Future of Vue: Vapor Mode\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Learn how Vapor Mode elegantly enhances app efficiency and how to get started trying it out today. \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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fblog.theletstream.com%2Fbetter-stores-in-pinia-with-vue3-global-stores-nesting-and-accessing-vue-router-in-pinia-0064a6f22ed6&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Better Stores in Pinia with Vue3 — Global Stores, Nesting and Accessing Vue Router in 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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 This article offers some practical tips to migrating from Vuex to 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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2Fintlify%2Fvue-i18n-next&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ vue-i18n-next\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Vue I18n is internationalization plugin of Vue.js. \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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 It easily integrates some localization features to your Vue.js application.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Ftresjs.org%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ TresJS\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Create 3D scenes with Vue components and Three.js.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: TIP -->\u003Ch2 data-id=\"__vue-email-heading\" class=\"mb-0 mt-10 text-[24px]\">🔥 Vue Tip: Simpler Two-Way Binding in Vue With defineModel\u003C/h2>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea;\" class=\"mb-4 border-t-4\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">\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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span> is a powerful feature in Vue that allows you to create two-way data bindings on your components. However, defining the props and emits in every component can be a bit verbose. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Since Vue 3.4 you can simplify two-way binding in Vue with 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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">defineModel\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">defineModel\u003C/span> compiler-macro, which is now the recommended way to define \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span> bindings. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> When you create a component that uses \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span>, you need to define a prop and an emit for the value. For example, if you have a component that uses \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span> to bind to a value prop, you would need to define the following: \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\">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;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:#91B4D5\">  const\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> props\u003C/span>\u003Cspan style=\"color:#91B4D5\"> =\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\"> defineProps\u003C/span>\u003Cspan style=\"color:#A6ACCD\">([\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">modelValue\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">3\u003C/span>\u003Cspan style=\"color:#91B4D5\">  const\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> emit\u003C/span>\u003Cspan style=\"color:#91B4D5\"> =\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\"> defineEmits\u003C/span>\u003Cspan style=\"color:#A6ACCD\">([\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">update:modelValue\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;\">4\u003C/span>\u003Cspan style=\"color:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\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>\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:#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;\">7\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">input\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\">    :\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\">value\u003C/span>\u003Cspan style=\"color:#A6ACCD\">=\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\u003C/span>\u003Cspan style=\"color:#E4F0FB\">modelValue\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\">    @\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\">input\u003C/span>\u003Cspan style=\"color:#A6ACCD\">=\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\">emit\u003C/span>\u003Cspan style=\"color:#A6ACCD\">(\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#5DE4C7\">update:modelValue\u003C/span>\u003Cspan style=\"color:#A6ACCD\">'\u003C/span>\u003Cspan style=\"color:#A6ACCD\">,\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> $event\u003C/span>\u003Cspan style=\"color:#A6ACCD\">.\u003C/span>\u003Cspan style=\"color:#E4F0FB\">target\u003C/span>\u003Cspan style=\"color:#A6ACCD\">.\u003C/span>\u003Cspan style=\"color:#E4F0FB\">value\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:#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;\">11\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;\" class=\"mt-2 text-[16px]\"> defineModel is a new \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">script setup\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">script setup\u003C/span> macro that aims to simplify the implementation of components that support \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span>. It automatically defines the modelValue prop and the update:modelValue emit for you. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Let's rewrite the above example using \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">defineModel\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">defineModel\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\"><\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;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:#91B4D5\">const\u003C/span>\u003Cspan style=\"color:#E4F0FB\"> model\u003C/span>\u003Cspan style=\"color:#91B4D5\"> =\u003C/span>\u003Cspan style=\"color:#E4F0FBD0\"> defineModel\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:#E4F0FB\"></\u003C/span>\u003Cspan style=\"color:#5DE4C7\">script\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>\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;background-color: rgba(101, 117, 133, .16);\">\u003Cspan class=\"line-number\" style=\"padding-left: 5px; padding-right: 15px; color: #636E7B; user-select: none;\">6\u003C/span>\u003Cspan style=\"color:#E4F0FB\">  <\u003C/span>\u003Cspan style=\"color:#5DE4C7\">input\u003C/span>\u003Cspan style=\"color:#91B4D5;font-style:italic\"> v-model\u003C/span>\u003Cspan style=\"color:#A6ACCD\">=\u003C/span>\u003Cspan style=\"color:#A6ACCD\">\"\u003C/span>\u003Cspan style=\"color:#E4F0FB\">model\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;\">7\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;\">8\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;\" class=\"mt-2 text-[16px]\"> I love this simple and clean syntax. It makes the code much easier to read and write. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fmokkapps.de%2Fblog%2Fsimpler-two-way-binding-in-vue-with-define-model&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">My blog post\u003C/a> contains additional information about multiple \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=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cino\">v-model\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">v-model\u003C/span> bindings, modifiers and typing.\u003C/p>\u003C!-- TODO: NUXT -->\u003Ch2 data-id=\"__vue-email-heading\" 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;\" 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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fmasteringnuxt.com%2Fblog%2Fdynamic-pages-in-nuxt-3%3Ffriend%3DMOKKAPPS&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Dynamic Pages and Route Params in Nuxt 3\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Nuxt 3 routing builds on the functionality of Nuxt 2 by giving you more ways than ever before to express your dynamic routes. \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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fmasteringnuxt.com%2Fblog%2Fnuxt-islands%3Ffriend%3DMOKKAPPS&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Nuxt Islands\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 The NuxtIsland component offers the capability to fully render your component on the server without shipping any JavaScript to the client.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DtYyTt52xxug&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📹 Nuxt's Server-Only Components Should Be on Your Radar\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Learn how they optimize web performance by eliminating client-side rendering and reducing hydration, a feature inspired by React's Server Components.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fgithub.com%2Fyuyinws%2Fnuxt-module-intellisense&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ nuxt-module-intellisense\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Intelligent Nuxt Module autocompletes for VS 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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.usagebasedspaghetti.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ Usage-based Spaghetti\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Try Stripe's usage-based billing in this demo built with Nuxt 3 and hosted on Vercel.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: EVENTS -->\u003Ch2 data-id=\"__vue-email-heading\" 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;\" 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;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fvueconf.us%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[16px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">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;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fpragvue.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[16px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">PrageVue 2024\u003C/a> (17 September 2024, Prag, Czech Republic) \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;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fconf.vuejs.de%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[16px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">vuejs.de Conf\u003C/a> (8 - 9 October 2024, Bonn, Germany) \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;\" class=\"mb-1 mt-1\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.vuetoronto.com%2Ftickets&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[16px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">VueConf Toronto\u003C/a> (18 - 20 November 2024, Toronto, Canada) \u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: QUOTE -->\u003Ch2 data-id=\"__vue-email-heading\" 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;\" class=\"mb-4 border-t-4\">\u003Cimg data-id=\"__vue-email-img\" style=\"display:block;outline:none;border:none;text-decoration:none;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/issues/144/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\" 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;\" 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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fblog.stackblitz.com%2Fposts%2Fwhat-is-vite-introduction%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 What is Vite (and why is it so popular)?\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 This article explains what Vite is, and why is everyone choosing and loving it so much.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fdanielnagy.me%2Fposts%2FPost_jt4adn0o5bnr&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 The Two-Tree Problem with Styling on the Web\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 One of the root problems with web styling is the “two-tree problem”.\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 It is needed to maintain separate, interconnected trees for document structure (HTML) and styles (CSS).\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fbold-edit.com%2Fwrote-my-own.html&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 I Wrote My Own Editor\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 This author was frustrated with bugs, slowness, and limited debugging features in VSCode and wrote his own editor.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fwww.franken-ui.dev%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ franken/ui\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Franken UI is a collection of copy-pastable components that are HTML-first and framework agnostic.\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;\" class=\"mb-1 mt-6\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fslab.com%2Fblog%2Fannouncing-quill-2-0%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=144\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ Announcing Quill 2.0\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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Quill is a rich text editor that has official TypeScript support, support for multiple editors on the same page with different configurations, auto-scrolling container detection, a smoother editing experience, and more.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: FUN -->\u003Ch2 data-id=\"__vue-email-heading\" 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;\" class=\"mb-4 border-t-4\">\u003Cimg data-id=\"__vue-email-img\" style=\"display:block;outline:none;border:none;text-decoration:none;\" src=\"https://mokkapps.twic.pics/weekly-vue.news/issues/144/programmers-feel-this.png?twic=v1/cover=600\" alt=\"Programmers feel this\" 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;\" class=\"my-6\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" 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;\" href=\"https://discord.gg/AWxF7cq3Qj\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Discord community\u003C/a>.\u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" 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;\" 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;\" href=\"https://mokkapps.de\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Michael Hoffmann\u003C/a> (Curator) \u003C/p>\u003C/td>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\" class=\"w-1/3\"/>\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;\" class=\"mb-2 text-center text-[#706a7b] text-[12px]\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/unsubscribe?token=UNSUBSCRIBE_TOKEN_PLACEHOLDER\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Unsubscribe \u003C/a> from this newsletter \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" 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=144&email=EMAIL_PLACEHOLDER\"/>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/body>\u003C/html>",625,144,{"absoluteUrl":15,"relativeUrl":16},"https://mokkapps.twic.pics/weekly-vue.news/issues/144/og.png","/issues/144/og.png","2024-05-05T22:00:00.000Z","Weekly Vue News #144 - Simpler Two-Way Binding in Vue With defineModel","/issues/144",1,1794479158747]