Weekly Vue News #133 - Trigger Transition Programmatically

Weekly Vue News #133 Trigger Transition Programmatically View online Hi 👋 This week, I'm excited to share with you a Vue tip on how to trigger transitions programmatically. Additionally, I've curated a list of articles, libraries, and events that I think you'll find interesting. Have a nice week ☀️ Vue 📕 Top UI Libraries for Building Stunning UIs in Vue 3 and Nuxt 3 👉🏻 Anthony shares a curated list of awesome UI libraries available for Vue 3 and Nuxt 3. 📕 Insights and Trends in Vue.js from Evan You 2024 👉🏻 In this publication, you will discover insights shared by Evan You during the Vuejs Nation 2024 conference, focusing on the Vue ecosystem. 📕 Exploring Cookie Management in Vue.js 👉🏻 In this tutorial, you'll explore cookie management in the Vue application. 👉🏻 Learn to write, read, and delete cookies in Vue. 🛠️ Tabulator 👉🏻 An interactive table and data grid library. 👉🏻 Supports all major browsers and can be used with Angular, Vue, and React if you wish. 🛠️ vue-currency-input 👉🏻 An input of currency formatted numbers based on the ECMAScript Internationalization API (Intl.NumberFormat). 👉🏻 Supports both Vue 2 and Vue 3. Nuxt 📕 EdgeDB and Nuxt: a fullstack app at your fingertips 👉🏻 Integrate Nuxt 3 with EdgeDB effortlessly, adding a robust database layer to your app with minimal configuration. 📕 5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects 👉🏻 Raycast snippets are small, reusable pieces of text or code that can be quickly inserted into your work. 📹 Creating APIs in Nuxt with Daniel Roe 👉🏻 Daniel Roe introduces Nuxt and its advantages for API development. 👉🏻 He gives a step-by-step guide on building efficient and scalable APIs using Nuxt. 🛠️ Nuxt 3.10 - Speed up your build time with sharedPrerenderData 👉🏻 Alexander explains the new experimental "sharedPrerenderData" features, figure out what it is and how it works. 📅 Events Vuejs Amsterdam 2024 👉🏻 28 - 29 February 2024, Amsterdam Meetup: Tech'n'Drinks x Alex Lichter // Nuxt in 2024 👉🏻 21 March 2024, Munich, Germany (not remote) 👉🏻 Alexander Lichter will talk about different topics from server components to Nuxt 4 Vueconf US 2024 👉🏻 22 - 24 May 2024, New Orleans, US 💬 Quote of the week 🔥 Vue Tip: Trigger Transition Programmatically Vue transitions are used to apply animations when an element or component is entering and leaving the DOM. These animations are triggered by: • Conditional rendering via v-ifv-if • Conditional display via v-showv-show • Dynamic components toggling via the componentcomponent special element • Changing the special keykey attribute The keykey attribute is handy if you need to trigger your transition programmatically. One use case for programmatically triggering Vue transitions is in form validation. By dynamically triggering transitions based on the validity of form inputs, users can receive visual feedback in real-time, enhancing the overall user experience and guiding them through the form submission process with clarity and ease. Let's take a look at a simple example of how to trigger a transition programmatically: 1<script setup lang="ts"> 2import { ref } from 'vue'; 3 4const show = ref(false); 5 6const animationTrigger = ref(0); 7</script> 8 9<template> 10 <div class="container"> 11 <Transition name="slide-fade"> 12 <p v-if="show" :key="animationTrigger">Hi</p> 13 </Transition> 14 <button @click="show = !show">Toggle</button> 15 <button @click="animationTrigger += 1"> 16 Re-trigger animation ({{ animationTrigger }}) 17 </button> 18 </div> 19</template> Try it yourself in the following StackBlitz: ✨ Open Demo 😂 Fun 🧑🏻‍💻 In Other News 📕 14 Things To Check Before Deploying a Website 👉🏻 Before deploying, it's useful to optimize images, have a 404 page and favicon, minify files, certify the SSL certificate for the site, check responsiveness and accessibility, and use fallbacks. 📕 Intro to Web Monetization 👉🏻 The Web Monetization API simplifies online payments for website users and owners by allowing visitors to pay a chosen amount directly to websites using a browser extension or native browser support. 📕 Making a PDF that's larger than Germany 👉🏻 Did you know that the largest size of a PDF is in the hundreds of kilometers? 🤯 📕 The ideal PR is 50 lines long 👉🏻 The ideal size for small pull requests (PRs) is around 50 lines long. 👉🏻 Smaller PRs are reviewed and merged faster, less likely to be reverted, and attract more review comments per line changed. 🛠️ Tempo 👉🏻 A new open-source library by FormKit for handling complex date operations across timezones. What makes Tempo different: ⭐ Timezones out of the box ⭐ Convert a Date to a token format ⭐ Small size Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany