Weekly Vue News #161

Avoid Empty Class Attributes

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.