[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"$feQtF4_7gaGevoztz-HxCVgW6Wum5qrU4emfP8IawBSE":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},11,340,43,3207,1382,"\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}.mt-8{margin-top:2rem!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-2\\/3{width:66.666667%!important}.w-full{width:100%!important}.max-w-\\[600px\\]{max-width:600px!important}.max-w-\\[650px\\]{max-width:650px!important}.transform{transform:translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)!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-2{border-top-width:2px!important}.border-t-4{border-top-width:4px!important}.border-solid{border-style:solid!important}.border-\\[\\#eaeaea\\]{border-color:rgb(234,234,234)!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}.px-3{padding-left:0.75rem!important;padding-right:0.75rem!important}.pb-3{padding-bottom:0.75rem!important}.pl-8{padding-left:2rem!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}.font-bold{font-weight:700!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>My Top 5 Nuxt Modules\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 #146\u003C/h2>\u003Ch1 data-id=\"__vue-email-heading\" class=\"mt-2\">My Top 5 Nuxt Modules\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/146\" 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]\">I played around with \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fcoolify.io%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Coolify\u003C/a> and use it now to manage my self-hosted services like Grafana, my PostgreSQL database for my analytics provider and more. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> It's an amazing tool that helps me to manage my services in a more efficient way. I can highly recommend it. \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%2Flogaretm.com%2Fblog%2Fhandling-async-component-loading-errors%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Handling Async Components' loading errors\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]\">👉🏻 Abdelrahman explains how to handle errors if you are using async components 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;\" 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%2Fdev.to%2Fmatthewsaintbull%2Fhow-i-discovered-to-not-put-eventlisteners-in-on-mount-in-vue-spas-525d&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 How I Discovered to Not Put EventListeners in On Mount in Vue SPAs\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 author explains why you should not forget to remove event listeners in your Vue 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%2Fvuejstips.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Vue Tips\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]\">👉🏻 A collection of Vue, Nuxt and Vite tips, tricks and good practices.\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%3Du3Mik1sdKd0&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📹 State of Vite & Vue 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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Evan You talked about the 10 years of Vue's history in this talk at Vuejs Amsterdam 2024.\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%2Fvuejs%2Fdevtools-next&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ Vue DevTools Next v7.2 is out\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]\">👉🏻 Ship Vuex/Vue Query/Vee Validate DevTools\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]\">👉🏻 Add `launchEditor` option to specify the 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=\"mt-1 mb-0 text-[16px]\">👉🏻 Further compatibility with legacy DevTools plugin API\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%2Fvueform.com%2Freference%2Fphone-element&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ New phone element in open-source Vueform\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]\">👉🏻 Vueform's phone element is out and it's free to use for everyone.\u003C/p>\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=\"rounded-md border border-solid border-[#eaeaea] px-3 pb-3 mt-8\">\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ctable align=\"center\" width=\"100%\" data-id=\"__vue-email-section\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\">\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;\" class=\"mt-2 font-bold\">Sponsored\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\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>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\" class=\"w-1/3\">\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/146/frontend-nation.gif?twic=v1/cover=600\" alt=\"Frontend Nation\" class=\"rounded-md my-4 w-full max-w-[600px]\"/>\u003C/td>\u003Ctd data-id=\"__vue-email-column\" role=\"presentation\" class=\"w-2/3 pl-8\">\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;\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Ffrontendnation.com%2F%3Futm_source%3DWeeklyVueNews%26utm_medium%3Dnewsletter%26utm_campaign%3Dfen_2024&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">Frontend Nation\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 School announced Frontend Nation, the largest FREE online frontend 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;\" class=\"mt-1 mb-0 text-[16px]\">Mark your calendars - It's happening on June 4th - 7th, 2024.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\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%2Fbuilding-a-blog-with-nuxt-content-part-1%3Ffriend%3DMOKKAPPS&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Building a blog with Nuxt content - Part 1\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]\">👉🏻 In this article explore how to setup a blog using Nuxt and Nuxt Content.\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%2Fdev.to%2Fjacobandrewsky%2Fnuxt-supabase-technology-stack-of-dreams-4dop&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Nuxt + Supabase = Technology Stack of Dreams\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]\">👉🏻 Jakub tries to convince you why he thinks that Nuxt & Supabase is a technology stack of dreams.\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%2Fdevelopers.netlify.com%2Fguides%2Favoiding-lock-in-for-your-image-pipeline-with-nuxt-image-and-netlify-image-cdn%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Avoiding lock-in for your image pipeline with Nuxt Image and Netlify Image CDN\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 sites using Nuxt Image have great portability, and automatically use Netlify Image CDN under the hood when deployed to Netlify.\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%3Dr4wFKlcJK6c&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📹 Migrate to Nuxt 4 NOW!?\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]\">👉🏻 Alexander Lichter provides condensed info about the Nuxt 4 major version.\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]\">👉🏻 He explains how to migrate today and opt in to breaking changes.\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%3Db1S5os65Urs&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📹 You're Probably Using Nuxt Wrong\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]\">👉🏻 Matt explains the internals of the useAsyncData composable from Nuxt which is used to fetch data from APIs.\u003C/p>\u003C/tr>\u003C/tbody>\u003C/table>\u003C!-- TODO: TIP -->\u003Ch2 data-id=\"__vue-email-heading\" class=\"mb-0 mt-10 text-[24px]\">🔥 My Top 5 Nuxt Modules\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]\">\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fnuxt.com%2Fmodules&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Nuxt modules\u003C/a> can be used to enhance or extend any Nuxt applications. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Let me show you my top 5 Nuxt modules: \u003C/p>\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fcontent.nuxt.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">1. Nuxt Content\u003C/a>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Nuxt Content reads 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\">content/\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">content/\u003C/span> directory in your project, parses \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\">.md\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">.md\u003C/span>, \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\">.yml\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">.yml\u003C/span>, \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\">.csv\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">.csv\u003C/span> and \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\">.json\u003C/code>\u003Cspan class=\"bg-[#f0f0f0] text-[#35495E] px-1 rounded cio\" style=\"display:none;\">.json\u003C/span> files to create a powerful data layer for your application. Additionally, you can use Vue components in Markdown with the MDC syntax. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> I heavily use this module in my \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&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">portfolio website\u003C/a>. \u003C/p>\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fnuxtseo.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">2. Nuxt SEO\u003C/a>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Nuxt SEO is both a collection of modules and a module itself. The Nuxt SEO module is all the SEO modules combined into one that is guaranteed to work well together. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Easy to use and configure, Nuxt SEO is the perfect solution for your Nuxt application. \u003C/p>\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fimage.nuxt.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">3. Nuxt Image\u003C/a>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Supports many providers like Cloudinary, IPX, Imgix, and more. \u003C/p>\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fui.nuxt.com&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">4. Nuxt UI\u003C/a>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Nuxt UI simplifies the creation of stunning and responsive web applications with its comprehensive collection of fully styled and customizable UI components designed for Nuxt. \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%2Fui.nuxt.com%2Fpro%3Faff%3Dz1NAy&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Nuxt UI Pro\u003C/a> is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> I use it for \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&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">mokkapps.de\u003C/a> and \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&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">weekly-vue.news\u003C/a>. \u003C/p>\u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Ftailwindcss.nuxtjs.org%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">5. Nuxt Tailwind CSS\u003C/a>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> The Tailwind CSS module for Nuxt enables you to set up Tailwind CSS in your Nuxt application in seconds, with many goodies. \u003C/p>\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> A must-have module for every Nuxt project that uses Tailwind CSS. \u003C/p>\u003Chr data-id=\"__vue-email-hr\" style=\"width:100%;border:none;border-top:1px solid #eaeaea;\" class=\"mb-4 border-t-2\">\u003Cp data-id=\"__vue-email-text\" style=\"font-size:14px;line-height:24px;margin:16px 0;\" class=\"mt-2 text-[16px]\"> Of course, there are many more awesome Nuxt modules available. This is just a selection of my top 5 modules. Some modules that I also recommend are: \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Feslint.nuxt.com%2Fpackages%2Fmodule&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"mt-2 text-[16px] text-[#42B883] hover:text-[#35495E] underline decoration-1\">Nuxt ESLint\u003C/a>, \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fnuxt.com%2Fmodules%2Ffonts&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Nuxt Fonts\u003C/a>, \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fvueuse.org%2Fguide%2F%23nuxt&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">VueUse\u003C/a> and \u003Ca data-id=\"__vue-email-link\" style=\"color:#067df7;text-decoration:none;\" href=\"https://weekly-vue.news/api/track-click?linkUrl=https%3A%2F%2Fsupabase.nuxtjs.org%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[#42B883] hover:text-[#35495E] underline decoration-1\">Nuxt Supabase\u003C/a>.\u003C/p>\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%2Fpragvue.com%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" 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=146\" 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=146\" 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/146/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%2Fgebna.gg%2Fblog%2Fbrief-history-of-web-development&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 A brief history of web development. And why your framework doesn't matter.\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 core goal of all the frontend framework evolutions was to create enjoyable user experiences, so the tools being used don't matter 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%2Frailsdesigner.com%2Fhidden-gems-tailwind%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">📕 Hidden Gems of Tailwind 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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 Tailwind CSS has some lesser-known features that can make developing web UIs easier.\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 goes over a couple of them, such as using gap-* to add space between elements.\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%2Fkhang-nd.github.io%2F7.css%2F&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">🛠️ 7.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;\" class=\"mt-1 mb-0 text-[16px]\">👉🏻 A CSS framework for recreating the Windows 7 UI.\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%2Fcodepen.io%2Fcobra_winfrey%2Fpen%2FoNOMRav&token=VERIFICATION_TOKEN_PLACEHOLDER&issueId=146\" target=\"_blank\" class=\"text-[18px] text-[#42B883] hover:text-[#35495E] decoration-1 underline underline-offset-[6px] leading-relaxed\">😮 Doom Scroll\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]\">👉🏻 A neat demo of @scroll-timeline — a new CSS property that allows animations to be driven by a container’s scroll position. \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/146/job-programmer.png?twic=v1/cover=600\" alt=\"Job Programmer\" 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/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=146&email=EMAIL_PLACEHOLDER\"/>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/body>\u003C/html>",629,146,{"absoluteUrl":15,"relativeUrl":16},"https://mokkapps.twic.pics/weekly-vue.news/issues/146/og.png","/issues/146/og.png","2024-05-19T22:00:00.000Z","Weekly Vue News #146 - My Top 5 Nuxt Modules","/issues/146",1,1794479158696]