Hi 👋

This is the first issue that includes a Nuxt tip, you can expect more of them in upcoming issues.

This week is my lightning talk at Vue.js Nation 2023, it's scheduled for 16:40 (Europe/Berlin timezone) on January 25th.

Register your free ticket

Have a nice week ☀️

Nuxt Tip: Adding a Latest Route

Utilizing Nuxt Middleware you can implement an easy way for visitors to always read the latest blog posts (or any other content) without needing to know its name or specific URL.

Let's take a look at the route middleware's code:

    
export default defineNuxtRouteMiddleware(async (to, from) => {
    

    
  if (to.fullPath === '/blog/latest') {
    

    
    const data = await queryContent('blog').where({ _partial: false }).sort({ date: -1 }).findOne()
    

    
    navigateTo(data._path)
    

    
  }
    

    
})
    

Route middleware are navigation guards that receive the current route and the next route as arguments. First, you need to check if the fullPath of the current route equals the expected latest route.

Next, we use Nuxt Content's queryContent function to find the latest blog post using the sort({ date: -1 }) query.

Finally, we use the navigateTo function, which is globally available in Nuxt and redirects to the given route.

Curated Vue Content

Quote of the week

JavaScript Tip: Return Object Literal From an Arrow Function

ECMAScript 2015 introduced the use of arrow functions, which offer a concise syntax for defining functions without the need for the function keyword.

An example of this shorthand syntax can be seen in a function that doubles a given integer:

    
const doubleCount = (value) => {
    

    
  return {
    

    
    doubleCount: value * 2
    

    
  }
    

    
}
    

You might be tempted to simplify the code by removing the return statement, like this:

    
const doubleCount = value => {
    

    
  doubleCount: value * 2
    

    
}
    

Upon calling the doubleCount function, it is observed that it is not functioning as intended. Regardless of the input value passed, the function returns undefined. Why is that?

The problem with the arrow function is that it's not returning the expected value because the parser is treating the braces as a block statement instead of an object literal. As a result, the parser is interpreting the label doubleCount as belonging to the expression statement value * 2 and there is no return statement, resulting in the function returning undefined.

To correct this behavior, you must ensure that the parser interprets the object literal as an expression instead of a block statement. This can be achieved by adding parentheses around the entire body of the function:

    
const doubleCount = value => ({
    

    
  doubleCount: value * 2
    

    
})
    

Curated Web Development Content