The Swiss Army Knife of Every Vue Developer

Rate this content
Bookmark
Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components. 
This shift in perspective opens the possibility for tackling common scenarios in a new and creative way.
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
9 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Composables are the Swiss Army knife of every Vue.js developer, helping build more extensible, adaptable, controllable, and trustful applications. They replace mixins and can be used everywhere, connecting different parts of the system and sharing common state. Composables are versatile, allowing for local or global use, and can be applied in both the domain layer and UI. They provide adaptability, controllability, easy testing, and eliminate the need to test the environment. Consider using Vue use for a library of composables and start building your own collection.

Available in Español

1. Introduction to Composables

Short description:

Welcome to this lightning talk, the Swiss Army knife of every Vue.js developer. Composables are the Swiss Army knife of every Vue.js developer. They help you build more extensible, adaptable, controllable and trustful Vue.js applications. A composable is a JavaScript function that uses the composition API to encapsulate and reuse stateful logic.

Welcome to this lightning talk, the Swiss Army knife of every Vue.js developer. My name is Juan Andres Nunez, I'm a frontend engineer and also a content creator in my spare time at my platform, squalavue.es.

Let's go straight to the point. What is the Swiss Army knife of every Vue.js developer? This is a bold affirmation, right? Well, in my opinion, composables are. Why? For many reasons that we will explore in this presentation, but there are two why's first. The first one is why you should learn this pattern, right? Or why you should give me your attention during the seven, eight or nine minutes. And this is a fair point, I understand. So let's make a deal. This is the promise. If you give me your attention, your full attention, I promise you that this pattern will help you build more extensible, adaptable, controllable and trustful Vue.js applications.

But let's go to the what first, right? Because maybe you are not involved in this composable thing. You're not aware of what it is. Well, a composable is a JavaScript function that uses composition API. By the way, this is the official Vue.js documentation to encapsulate and reuse stateful logic. Three key points here, super important. Composition API. You have to use composition API. There is no other way around it. Stateful logic, you have to have some kind of piece of state that will be mutated, right? And you want to be notified. You want to react to that. If you don't have a state, you probably don't need composition API and you probably are not working with a composable. Maybe it's a typical utility function, but not a composable, in my opinion, of course. So this is the most bare bones implementation of a composable that I can think of. We are importing the reactivity APIs from Vue. We are exporting a function, in this case, useAlert. We are doing our thing inside. We will come later to this stateless, stateful composable and we return something. We have full power to return what we really want to return. But let's go forward. Three last key points about the what.

2. Benefits and Use Cases of Composables

Short description:

Composables are not the same as mixins, but they completely replace mixins. You can start using composables in Vue 2.7, so there are no excuses. Composables are useful for connecting different parts of the system, sharing common state, creating controllers, reactive UI utilities, and any other creative use. They can be used everywhere and should be applied when they fit.

The convention is to start with use, useAlert, use whatever. They are not the same as mixins. They overlap. That is true, but they overcome, they replace completely mixins. So if you are super used to mixins and start using the composable, you won't miss the mixins, believe me.

Let's be honest. You don't even need Vue 3 to start using this composable thing. From Vue 2.7, you can use composable, so there is no excuse.

So when? When should you start using this pattern? When I think on composables, I think of bridges, but this is not the typical bridge, right? This is a reactive one. What it means is that you can decouple reactivity from the components and start using elsewhere. And this is if you're super used to Vue 2 and options API, this is a mental shift that is easy to do. But in the beginning, this is somewhat strange. So if you need to connect different parts of the system, well, I can use a composable.

Some use cases, state stores. Of course, you want to share some kind of common state between different components or different parts of the system and have centralized, of course. Controllers that are more or less the same as a state store. But when I think of a controller, it is maybe the gateway to a feature. We do some polling to backend, we transform the data, maybe we serve some computer properties. This for me is a controller and it's a perfect candidate for a composable. And also reactive UI utilities. The key here is reactive. If you don't have reactivity, you don't have a composable. And of course, any other creative use of this pattern. The last slide, we will mention Vue use. That for me is the most creative usage of this composable pattern. But this is four examples. Where? Well, everywhere. This is a video from one of our main projects and we started slow, but then something clicked. And we started using it when they fit. Of course, you cannot throw a composable at whatever situation.

3. Versatility and Benefits of Composables

Short description:

Composables are versatile and can be used in both the domain layer and the UI. They are omnipresent and can be local to a feature, global to a system, or anything in between. This pattern helps build extensible, adaptable, controllable, and trustful components. It allows for starting small and growing with the project, and supports both stateless and stateful implementations. Additionally, the Options pattern can be used to simplify code and provide default values.

But they are super versatile. So everywhere. Because, okay, Vue, it's a UI concept. Right? So this composable is a UI concept. Well, it doesn't have to be that way. Because it can be in the domain layer. It can be in the UI. Of course, what I mean is they are omnipresent. It breaks that boundary. Right? So it can be local to a feature, global to a system, or anything in between, really. So that's where.

And why? Let me recover the promise. This decomposable pattern will help you build four things. Extensible, adaptable, controllable, and trustful. So let me keep my word. Right? Extensible. Why? Because you want or you can start small and grow with the project. And it can be stateless or stateful. When I say stateless I don't mean that this composable doesn't have a state. It won't be a composable. But the state in this case is inside the exposed function. So every time we create a new implementation of this composable, we will recreate this state. It will be private to that implementation. But simply moving this state outside the function, this is common for all implementations. This is extremely easy to understand, but super powerful. And Options pattern. This is not a composable concept. This is a JavaScript concept. But if you want to stop abusing this argument pattern, you can create an object. You can have some nice defaults.

4. Composition, Adaptability, and Controllability

Short description:

Composables are super versatile and adaptable. They can fit in every app layer and work in any environment. They are controllable, allowing you to expose only what you need. Composables are easy to test and maintain.

And this is a common, super common practice in the composable world. Again, super easy to understand. Composition. It's the same as a view component. When it's too big, you want to start extracting to different sub-components or other components. The same with composables.

It's a common practice to use another composable inside your composable doing that composition. In this case, local storage, et cetera. So this is extensible. That's the first part of the promise.

Second one. Adaptability. They are adaptable because they fit in every app layer and work in every environment that you throw in. That word doesn't mean that this is the correct option, but they work. They're super versatile. For instance, domain business logic, check. Native APIs, check. Data modeling, check. And I can continue forever, to be honest, but super adaptable.

Controllable. The third point. Decide what to expose. We saw this in the beginning because you can return whatever you need then. So you can keep private, quote, some part of the composable and expose only what you need to consume outside. But you can do more. If you have to expose that piece of state or whatever, a computer property, a reactive object, doesn't matter, you can make this nice re-auth only API from Vue. And easier aliasing. Of course, this is JavaScript, right? So you can change the name alias when you are using or importing or when you are exposing. Super easy, but super powerful at the same time.

And the last part, the fourth part of the promise, they are trustful because they are easy to test and easier to maintain.

5. Testing and Conclusion

Short description:

Composables are easy to test and eliminate the need to test the environment. Start using composables now. Check out Vue use for a library of composables, and consider building your collection for your projects. Thank you for your attention, and see you in the workshop.

Why? Because you don't have to mount that Vue component or stuff or mock some dependencies. Of course, you don't use it inside your composable, but if you keep them as trust as possible, it's a lot easier to test because you can test only the composable, not the environment where the composable lives. And this is, again, super powerful.

I hope that at this point, you are solved on this concept. And if you never used this composable thing, this is the best way or the best moment also to start using them.

Some last considerations. Check Vue use, please, because a super amazing library of composables, hundreds of them, the super nice documentation, you can play with them. And the categorization is state, browser, network, animation. Please do yourself a favor and check Vue use. But of course, if you want to play, I understand this pattern, the best thing to do is build your collection for your own projects.

So again, thank you for your attention, and I'll see you in the workshop where we will put this composable thing into practice. I'll see you there.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance