Weekly Vue News #123 - Composable to Define Keyboard Shortcuts

十二月 11, 2023

View and discuss online,

Weekly Vue News #123

Composable to Define Keyboard Shortcuts

Sponsored

supastarter for Nuxt 3 - Ship your SaaS in days

Save time and focus on your business with our scalable and production-ready SaaS starter kit.

It includes authentication, multi-tenancy, i18n, billing, AI and much more!

🚀 Get 10% off with the code WEEKLYVUENEWS (valid until 31th December).

Hi 👋

Last week, I updated all my Nuxt projects (mokkapps.de, weekly-vue.news and codesnap.dev) to the latest version of Nuxt 3.

Additionally, I'm still working on CodeSnap: Fixing bugs, adding new features, and improving the overall user experience.

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 Better Vue.js inputs with Generics: The Select

👉🏻 This article is about the Select input and how to craft a strict and clear API.

logaretm.com

📕 Vue 3 Velocity: The Cache Busting Blueprint

👉🏻 Vue 3 cache busting is a crucial technique for delivering a seamless and up-to-date user experience.

medium.com

📕 Vue.js Parallel Fetching improves LCP and FCP

👉🏻 This article focuses on Vue.js and how you can enhance LCP and FCP through parallel fetching of component files and images.

medium.com

📹 Component Design Patterns - Vue.js Live 2023

👉🏻 In this talk, Michael Thiessen explores several patterns for writing better components.

www.youtube.com

Nuxt

📕 Why Haven't u Migrated to Nuxt 3 Yet?

👉🏻 This post lists the overall benefits of migrating from Nuxt 2 to Nuxt 3.

dev.to

📹 The Lazy component prefix and when to use it - Nuxt Performance in Depth

👉🏻 In this video, Alexander looks at the lazy prefix, what it does, and when to use it to achieve sweet performance gains.

www.youtube.com

📹 Common Mistakes in Vue and Nuxt and How to Avoid Them

👉🏻 In this talk, Daniel looks at some common mistakes that lead to bugs, wasted time, and frustration for Nuxt developers.

www.youtube.com

📅 Events

Vue.js Nation Conference

👉🏻 24 - 25 January 2024, Online Live Event

👉🏻 100% free

vuejsnation.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

🔥 Vue Tip: Composable to Define Keyboard Shortcuts

I want to show you a handy Vue composable that allows you to define keyboard shortcuts in your app. I discovered it in Nuxt UI, and it's called defineShortcuts.

How to Use It

Let me first demonstrate how to use it. You can define your shortcuts in a setup function like this:

App.vue

            1 <script setup lang="ts">
              2 const isActive = ref(false)
              3 
              4 defineShortcuts({
              5   meta_k: {
              6     handler: () => {
              7       isActive.value = !isActive.value
              8     }
              9   }
              10 })
              11 </script>

I don't want to repeat the documentation, but let me highlight a few things:

Shortcuts can be combined with the _ character. For example, meta_k is the meta key (Command key on MacOS, Control on other OS) key and the k key.
usingInput is a flag that tells the composable to only trigger the shortcut when the user is not typing in an input field.
whenever is used to add constraints so that the shortcut is only triggered when the constraints are met. For example, you can use whenever: [isActive] to only trigger the shortcut when isActive is true.

Source Code

You can grab the source code from GitHub.

😂 Fun

🧑🏻‍💻 In Other News

📕 Tailwind has a scalability problem. How can we solve that?

👉🏻 Tailwind CSS is known for its focus on class-based design, but the emphasis on classes can pose scalability challenges.

byteofdev.com

📕 Front-end security best practices

👉🏻 Front-end security plays a critical role in safeguarding web applications against threats like cross-site scripting (XSS), cross-site request forgery (CSRF), and other vulnerabilities.

griddynamics.medium.com