Avoid Empty Class Attributes Ready for your weekly Vue & Nuxt dose? ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ Weekly Vue News #161 Avoid Empty Class Attributes View online Hi 👋 I'm currently working on a blog post about optimistic updates in Vue—stay tuned for that! In the meantime, enjoy the awesome articles, videos, and podcasts featured in this issue. Have a lovely week ☀️ Vue 🛠️ Reactive VS Code Extension API 👉🏻 Develop VS Code extensions with Vue Reactivity API. 🛠️ v0 now supports basic Vue rendering 👉🏻 This demo was generated with the prompt "a calculator in vue with a cool background". 🛠️ vue-pdf-embed 👉🏻 A PDF embed component for Vue 2 and Vue 3. 👉🏻 It offers features for password-protected documents, text layers and annotations. 🛠️ Vuestic UI 1.10 👉🏻 It now ships with reduced bundle size, Vuestic Compiler, custom input masks, sticky table headers, and sticky scrollbar. 💡 Vue Tip: Avoid Empty Class Attributes If you want to conditionally add a class to an element in Vue, you might be tempted to use a ternary operator to check if a condition is met. However, this can lead to an empty class attribute being rendered when the condition is false. 1 < template > 2 < div : class = " isDisabled ? ' disabled ' : null " ></ div > 3 <!-- Will render <div class></div> --> 4 </ template > Instead, use a falsy value like an empty string to avoid this issue 1 < template > 2 < div : class = " isDisabled ? ' disabled ' : ''" ></ div > 3 <!-- Will render <div></div> --> 4 </ template > Nuxt 📕 Using Cloudflare AI Models for User Experience 👉🏻 Learn how Sebastien leveraged Cloudflare AI models in Nuxt to improve his drawing app accessibility, SEO and user experience. 📕 Seamless Contact Form experience with Netlify Form in Nuxt 3 👉🏻 In this article, you'll explore how to use Netlify Form service to create a contact form and handle its submission from end to end in a Nuxt static site. 📹 This New Nuxt Feature Improves Performance 👉🏻 In this video, Matt takes a look at the new Nuxt Scripts module. 📹 Redirects in Nuxt 3 👉🏻 Alexander explains redirects in Nuxt 3. 👉🏻 They are essential for web applications, at least at some point when a migration has to happen or SEO should be improved by having more descriptive URLs. 🎧 Nuxt Tips You Have To Know 👉🏻 Michael and Alex are going through more than five big tips around Nuxt. 👉🏻 From features under the radar over to a big chunk of amazing benefits and why they exist. 🛠️ Official Sentry SDK for Nuxt 👉🏻 We finally have an official Nuxt module for Sentry. 👉🏻 Still experimental and under active development. 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Frontend Security Checklist 👉🏻 It's important to secure both frontend and backend systems against vulnerabilities like XSS, CSRF, and IDOR. 👉🏻 Proper input validation, content security policies, and secure handling of environment variables are important for security. 📕 Node.js Toolbox 👉🏻 Node.js toolbox is a catalog of Node.js libraries. 🛠️ RoundtableJS 👉🏻 An open-source JavaScript library for building complex surveys, forms, and data annotation tasks. 👉🏻 It's designed to be simple but completely customizable. 🛠️ Whirl 👉🏻 A collection of CSS loading animations. 👉🏻 It offers a variety of pre-made animations that you can easily incorporate into your web projects through copy-paste. 😂 Fun 🔗 Want more Vue & Nuxt content? More Exclusive Vue Tips : Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Weekly Vue & Nuxt Videos : You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt. DejaVue Podcast : A weekly podcast about Vue.js and the ecosystem around it. Comments? Join the discussion about this issue in our Discord community . Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany {{ TrackView }}