Weekly Vue News #107 - Dynamic Return Values in Composables

Weekly Vue News #107 - Dynamic Return Values in Composables

八月 21, 2023

View and discuss online,

Weekly Vue News #107

Dynamic Return Values in Composables

Focus & Code Diff in Nuxt Content Code Blocks

Focus & Code Diff in Nuxt Content Code Blocks

In this article, I'll show you how you can focus certain lines of your code or highlight a diff inside a custom code block.

Hi 👋

I hope you had a great week and are ready for your weekly dose of Vue & Nuxt news.

No special news from my side this week, so let's jump right into the content.

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: Dynamic Return Values in Composables

Vue Composables can return two types of values: a single value or an object of values. It's also possible to dynamically switch between the two depending on what we want to use the composable for.

VueUse heavily uses this pattern to provide a simple interface for the most common use cases, while still allowing for more advanced use cases.

Let's take a look at an example:

            1 import { useTimestamp } from '@vueuse/core'
              2 
              3 // Use the single return value
              4 const timestamp = useTimestamp({ offset: 0 })
              5 
              6 // Access object properties by passing "{ controls: true }"
              7 const { timestamp, pause, resume } = useTimestamp({ controls: true })

If you only need the timestamp you can use the single return value, but if you need more control you can pass an object with the controls property set to true.

I love that approach as it makes the API very simple to use, but still allows for more advanced use cases.

Let's see how we can implement this pattern in a composable:

useTimestamp.ts

            1 export const useTimestamp = (options = { controls: false }) => {
              2   const { controls } = options
              3 
              4   // Here is your remaining composable logic
              5 
              6   if (controls) {
              7     return { timestamp, pause, resume }
              8   } else {
              9     return timestamp
              10   }
              11 }

Quote of the week

Quote of the week

Curated Vue & Nuxt Content

📕 24 Articles for Learning Nuxt 3

👉🏻 This article is a compilation of 24 useful articles to learn Nuxt 3.

masteringnuxt.com

📕 7 Best Tools for Vue.js Micro Frontends

👉🏻 This article outlines 7 of the best tools to help maximize your Vue.js micro frontends development.

📕 Implementing OAuth in Nuxt with Supabase

👉🏻 Learn how to implement OAuth in Nuxt with Supabase.

🛠️ Vue Email

👉🏻 A powerful library designed to simplify email creation and sending using Vue.js.

vue-email.vercel.app

📅 FormKit 1.0 'Celebration of Vue' Event

👉🏻 To celebrate the 1.0 release of FormKit, the team is hosting a "celebration of Vue" event from Aug 28 - Sept 1st.

👉🏻 It's a blend of appreciation for Vue creators and fun for the community.

👉🏻 You can win cool prizes like Nintendo Switch and more.

Fun

Keep Coding

Curated Web Development Content

📹 Mastering JavaScript Functions for Beginners

👉🏻 A free 2 hour YouTube course.

👉🏻 You'll learn about the Call Stack, Nested Functions, Callback Functions, Higher-Order Functions, Closures, and more.

www.freecodecamp.org

📕 If Web Components Are So Great, Why Am I Not Using Them?

👉🏻 Dave thinks Web Components have a marketing problem and shares what he thinks the issues are for this slowly-adopted technology.

📕 A compilation of outstanding testing articles (with JavaScript)

👉🏻 A curated compilation of exceptional testing articles by a testing consultant.

👉🏻 These articles provide an overview of modern testing concepts and tools.

📕 What is Vite, And Why Is It Awesome?

👉🏻 Vite is a platform-agnostic frontend tool for building web applications.

👉🏻 This article provides a comprehensive overview of Vite.

📕 TypeScript or Kotlin for a BackEnd

👉🏻 An experienced software engineer gives a thorough list of pros and cons for both TypeScript and Kotlin for developing a RESTful API.

🛠️ npmgraph

👉🏻 A website to easily see the dependency graph of NPM modules.

npmgraph.js.org

🛠️ macintosh.js

👉🏻 An impressive virtual machine emulating a 1991 Macintosh Quadra 900 with System 8, all running in Electron.

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany

评论