Javascript is required
Weekly Vue News Logo Weekly Vue News

High-quality Vue tips and curated content every week

Join 720+ other developers and get Vue & Nuxt content straight to your inbox, every week.
This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js & Nuxt expert. Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3. Published each Monday since June 2021.
I will never share any of your personal data.
Free eBook: Bring your Vue skills to the next level!
Free ebookfor newsletter subscribers
Curated by:
Newsletter Author Michael Hoffmann
Michael Hoffmann
I look forward to receiving it each Monday.I always pick up a few new pieces of information that help me in my daily job.Thank you!
Dave F.
via email
Thank you for all your dedication and for what you offer to the community pure quality.
Dennis J. Marquez
via email

Here's the latest issue

Sent at Jan 23, 2023, 2:00 PM
Newsletter Author Michael Hoffmann
Michael Hoffmann

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:

middleware/latest-blog-post.ts
1 export default defineNuxtRouteMiddleware(async (to, from) => {
2 if (to.fullPath === '/blog/latest') {
3 const data = await queryContent('blog').where({ _partial: false }).sort({ date: -1 }).findOne()
4 navigateTo(data._path)
5 }
6 })

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.

Info

Want to give it a try? Try navigating to https://mokkapps.de/blog/latest!

Curated Vue Content

๐Ÿ“• Use Shiki to Style Code Blocks in HTML Emails

๐Ÿ‘‰๐Ÿป In this article, I'll explain how I use Shiki in Nuxt 3 & Nuxt Content to generate nicely styled code blocks in my newsletter emails.

mokkapps.de
๐Ÿ“• Server Routes in Nuxt 3

๐Ÿ‘‰๐Ÿป Nuxt 3 not only does it give us amazing tools to make building our frontend radically easier, it also gives us some awesome tools for building our backend.

masteringnuxt.com
๐Ÿ“• How to Build Feature Rich Forms in Vue.js

๐Ÿ‘‰๐Ÿป In this article, Daniel explains why FormKit is his go to solution for building forms in Vue.

vueschool.io
๐Ÿ“• Start Testing With Vitest (Beginnerโ€™s Guide)

๐Ÿ‘‰๐Ÿป This beginner's guide will teach you how to set up your testing environment, write and run tests, and utilize the features of Vitest for testing your Vue components.

vueschool.io

Quote of the week

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:

1 const doubleCount = (value) => {
2 return {
3 doubleCount: value * 2
4 }
5 }

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

1 const doubleCount = value => {
2 doubleCount: value * 2
3 }

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:

1 const doubleCount = value => ({
2 doubleCount: value * 2
3 })

Curated Web Development Content

๐Ÿ“• State of JavaScript 2022 has been released

๐Ÿ‘‰๐Ÿป Each year thousands of devs are surveyed to find out what the most popular parts of the JavaScript world are, from language features to frameworks.

2022.stateofjs.com
๐Ÿ“• Draw SVG rope using JavaScript
๐Ÿ‘‰๐Ÿป This article presents a method for storing app states in the URL.
๐Ÿ‘‰๐Ÿป The method involves encoding the entire application state as a Base64 encoded string in the hashmark of the URL.
muffinman.io
๐Ÿ“• Draw SVG rope using JavaScript

๐Ÿ‘‰๐Ÿป Stanko takes us through the process he came up with in regard to transforming an SVG path into a vector rope drawing.

www.scottantipa.com
๐Ÿ› ๏ธ RippleUI

๐Ÿ‘‰๐Ÿป A nice collection of 20+ customizable components with support for dark mode out-of-the-box. Includes good documentation and examples for each component.

www.ripple-ui.com
๐Ÿ› ๏ธ Pure CSS

๐Ÿ‘‰๐Ÿป This website contains a set of small CSS modules that can be used in any web project.

purecss.io
๐Ÿ˜ฎ Live coding a custom JavaScript runtime

๐Ÿ‘‰๐Ÿป Luca wrote a custom JavaScript runtime in 30 minutes live on stage during his talk at Armada JS Conf 2022

twitter.com
Not convinced yet? Read some more issues!
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
ยฉ 2023 weekly-vue.news. All rights reserved.Created with โ™ฅ by Michael Hoffmann