Weekly Vue News #106 - Use VueUse to Unleash the Power of Utility Functions

Weekly Vue News #106

Use VueUse to Unleash the Power of Utility Functions

Hi 👋

No progress on my eBook but I worked a lot on CodeSnap.dev to improve its stability. Additionally, I'm working on a short blog post about how I added focus & diff line highlighting to my custom code blocks at my portfolio website.

And of course, we're still waiting for the arrival of our baby, which is planned for this week.

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 Tip: Use VueUse to Unleash the Power of Utility Functions

VueUse is a collection of utility functions based on Composition API. It provides a set of essential utilities for interacting with various browsers, sensors, animations, and state APIs, and more:

State
Elements
Browser
Sensors
Network
Animation
Component
Watch
Reactivity
Array
Time
Utilities

Additionally, it provides Add-ons for Electron, Firebase, and more.

Installation

You can simply install it by running:

            1 npm i @vueuse/core

From v4.0, it works for Vue 2 & 3 within a single package.

For more information, check the official documentation.

Usage

Let's take a look at how VueUse can help us in our daily work by using the useClipboard composable:

Component.vue

            1 <script setup>
              2 import { useClipboard } from '@vueuse/core'
              3 
              4 const source = ref('Something you need to copy')
              5 const { text, copy, copied, isSupported } = useClipboard({ source })
              6 </script>

As you can see, it's a great way to save time in development because you don't have to add all of this standard functionality on your own.

You can use the VueUse playground to experiment with the library as much as you want.

Advice

I would strongly encourage you to use VueUse in your projects. It will save you a lot of time and effort.

Quote of the week

Curated Vue & Nuxt Content

📕 Emitting Events

👉🏻 Lachlan wrote about how he likes to handle events in Vue along with some other neat tips.

lachlan-miller.me

📕 Unit Testing a Pinia Component

👉🏻 "The most important key takeaway from this article is to respect the component boundaries when unit testing by mocking every external dependency and providing the data to cover every possible state of your component"

fadamakis.com

📕 Minimizing Nuxt 3 Docker Images

👉🏻 In this blog post, you'll learn how to minimize Nuxt 3 Docker images

👉🏻 Starting with a basic unoptimized image that is 1.4 Gigabytes large and ending with an image that's only 164 MB in size.

dev.to

📕 Forget File System Routing. Here's How To Setup Custom Routing in Nuxt 3

👉🏻 Thomas is not "a big fan of file-system routing for larger projects" and explains how to set up custom routing in Nuxt 3

theroadtoenterprise.com

📕 Contributing to Nuxt

👉🏻 Daniel Roe put down his thoughts on getting involved in open source, and specifically on contributing to Nuxt.

roe.dev

Fun

Curated Web Development Content

📕 How We Optimized Performance To Serve A Global Audience

👉🏻 This article talks about how Bookaway, an online travel booking platform, improved its website performance by auditing and optimizing Core Web Vitals.

www.smashingmagazine.com

📕 How to perform type casting in TypeScript

👉🏻 A comprehensive and advanced guide to TypeScript type casting.

blog.logrocket.com

📕 TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality

👉🏻 In this article, you will explore some effective and practical use cases for TypeScript template literal types and how they can enhance code quality & productivity.

claritydev.net