Hi 👋

I deleted my account at Revue as they will shut down in January 2023.

This is the first issue that is sent via my custom-built newsletter solution:

I store the subscriber list on Supabase, manage the content as Markdown files on my Nuxt 3-powered newsletter website and send the emails using Amazon SES.

If you have any problems with this email, please email me! It's also possible to read it online.

Be sure to add newsletter@weekly-vue.news to your email contact list. Doing this protects against overzealous spam filters.

And sorry to all of you that received some test emails...

I plan to write a blog post about how I replaced Revue with my custom-built solution.

Have a nice week ☀️

Vue Tip: Pass Custom Arguments to Event Handler Method

Watch on YouTube

In Vue, we use the v-on (typically shortened with the @ symbol) to listen to DOM events and run some JavaScript code when triggered.

We can use inline handlers or method handlers if the logic for the event handler is more complex:

    
<script setup>
    

    
const name = ref('Vue.js')
    

    

    

    
const greet = (event) => {
    

    
  alert(`Hello ${name.value}!`)
    

    
  if (event) {
    

    
    alert(event.target.tagName)
    

    
  }
    

    
}
    

    
</script>
    

    

    

    
<template>
    

    
  <button @click="greet">Greet</button>
    

    
</template>
    

Sometimes we need to pass custom arguments to the method and access the original DOM event:

    
<script setup>
    

    
const name = ref('Vue.js')
    

    

    

    
const greet = (event, name) => {
    

    
  alert(`Hello ${name.value}!`)
    

    
  if (event) {
    

    
    alert(event.target.tagName)
    

    
  }
    

    
}
    

    
</script>
    

    

    

    
<template>
    

    
  <button @click="greet($event, “Michael”)">Greet</button>
    

    
</template>
    

The original DOM event is accessible via the unique $event variable. Custom arguments can be added by calling the method in an inline handler instead of directly binding it to a method name.

Curated Vue Content

Quote of the week

JavaScript Tip: A function that throws an error if a required parameter is missing

Watch on YouTube

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

We can use this approach to write a function that throws an error if a required parameter is missing:

    
const isRequired = () => {
    

    
  throw new Error('Parameter is required!')
    

    
}
    

    

    

    
const foo = (bar = isRequired()) => {
    

    
  console.log(bar)
    

    
}
    

    

    

    
foo() // throws the isRequired error
    

    
foo(undefined) // throws the isRequired error
    

    
foo(false) // logs "false"
    

    
foo(null) // logs "null"
    

    
foo('Test') // logs "true"
    

Curated Web Development Content